Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно

Добро пожаловать!
Сделай
Cайт
Лучше
  • Главная страница
  • Форум Помощь
  • Файлы Каталог файлов
  • Полезно Рекомендуем
  • Новое На сайте
  • Правила Читать всем

Всплывающие подсказки на CSS3

Твитнуть
01 Июл 2025
В данном уроке представлен очередной вариант организации всплывающих подсказок на CSS3. Используются CSS переходы и псевдо-элементы :before и :after.

В демонстрации представлены ссылки на социальные сети с названиями в подсказках.
Разметка HTML

Для демонстрации используется неупорядоченный список:
Code
<ul class="tt-wrapper">
  <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
  <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
  <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
  <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
  <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
  <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>

CSS

Элементы списка смещаются влево и ссылки будут иметь следующий вид:
Code
.tt-wrapper li a{
  display: block;
  width: 68px;
  height: 70px;
  margin: 0 2px;
  outline: none;
  background: transparent url(../images/icons.png) no-repeat top left;
  position: relative;
}

Каждая ссылка будет иметь разные положения фонового изображения:
Code
.tt-wrapper li .tt-gplus{
  background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
  background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
  background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
  background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
  background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
  background-position: -340px 0px;
}

Элемент span работает как подсказка и будет скрыт с помощью начальной полной прозрачности. Будем использовать эффект проявления подсказки соскальзывании ее сверху, поэтому устанавливаем значение свойства bottom равным 100px, размещая ее сверху ссылки.
Code
.tt-wrapper li a span{
  width: 100px;
  height: auto;
  line-height: 20px;
  padding: 10px;
  left: 50%;
  margin-left: -64px;
  font-family: 'Alegreya SC', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  color: #719DAB;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 4px solid #fff;
  background: rgba(255,255,255,0.3);
  text-indent: 0px;
  border-radius: 5px;
  position: absolute;
  pointer-events: none;
  bottom: 100px;
  opacity: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  transition: all 0.3s ease-in-out;
}

Так как подсказка будет появляться при наведении курсора мыши на ссылку (а элемент span считается частью ссылки), то подсказка будет выводиться при проходе курсора мыши выше ссылки (элемент span здесь, но его непрозрачность равна 0, что делает его невидимым).

Для формирования указателя используем псевдо-элементы :before и :after. Мы задаем для них такие же стили и создаем треугольник с помощью прозрачных правых и левых рамок. Псевдо-элемент :before служит тенью для псевдо-элемента :after, поэтому мы устанавливаем черное значение rgba с низким уровнем непрозрачности.
Code
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0,0,0,0.1);
}

Псевдо-элемент :after смещается на пиксель и делается белым, по образу рамки вокруг подсказки:
Code
.tt-wrapper li a span:after{
  bottom: -14px;
  margin-left: -10px;
  border-top: 10px solid #fff;
}

При наведении курсора мыши мы перемещаем элемент span сверху и проявляем его:
Code
.tt-wrapper li a:hover span{
  opacity: 0.9;
  bottom: 70px;
}

И вот они - всплывающие подсказки. Демонстрация представляет еще три различных варианта анимации вывода подсказок.

Уважаемый посетитель, скачивать материал могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

+
    • 1
    • 2
    • 3
    • 4
    • 5

на, Подсказки, Всплывающие, CSS3, Читать уроки

АвторПользователи/ Категории » Сайтостроение/ Просмотров 919 / Посмотреть комментарии 0
 
Вернуться назад

А также:
PicPick Portable 3.2.6 by PortableApps

PicPick Portable 3.2.6 by PortableA...

Красивые Списки На CSS

Красивые Списки На CSS

50 анимированных иконок загрузки

50 анимированных иконок загрузки

Новый  шаблон для uCoz-MVStyle

Новый шаблон для uCoz-MVStyle

Регистрация сайта в поисковиках

Регистрация сайта в поисковиках

Красивый минипрофиль

Красивый минипрофиль

 

html-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию


Всего комментариев: 0
Уважаемый посетитель, Вы зашли на сайт, как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться,либо войти на сайт под своим именем.
Twitter RSS Добавить в избранное

Профиль


  • Привет, Пользователи!


Логин:
Пароль:
Забыл пароль | Регистрация

Меню

  • Скрипты для uCoz
  • Шаблоны для uCoz
  • Графика Ucoz
  • Шаблоны с конструктором
  • Блоки и шапки
  • Адаптация с DLE
  • Виды материалов
  • Всё для DLE
  • PSD
  • Иконки
  • Разное
  • Шаблоны с PSD
  • Иконки/Значки
  • Хаки
  • Софт
  • Интернет
  • Всё для Photoshop

Мини-чат

    Вы не можете добавлять сообщения в чат
    Авторизуйтесь!

  • Top-5
  • Comments
  • Tags
  • UserGate Proxy & Firewall 4.3.949 + crack (serial) [Русская версия]
    60 downloads
  • Вид Фотоальбома + iLoad для Dominion
    41 downloads
  • Форма добавления комментариев
    41 downloads
  • Форма добавления комментариев для форума
    39 downloads
  • Новый шаблон для uCoz-ChromeGT
    36 downloads
Код вставляем в глобальный блок ВЕРХНЯЯ ЧАСТЬ САЙТА
Аватар Алексей Алексей 17 Мар 2013 | 13:35
Блин у меня не получилось его установить(( html код нужно в "страницы сайта" вставлять? в head :unsure:
аватар отсутствует Master 08 Мар 2013 | 00:08
Штука убойная, респект :v:
Аватар Babalus Babalus 13 Окт 2012 | 16:21
для (74)
null (68)
ucoz (46)
на (31)
разное (31)
сайта (22)
шаблон (19)
Скрипт (17)
psd (14)
вид (14)
Сайтостроение (14)
Новый (13)
форум (12)
Для сайта (11)
Хаки (10)
как (9)
красивый (9)
набор (9)
Flash (8)
для uCoz (8)
меню (8)
русский (8)
AJAX (7)
кнопка (7)
кнопки (7)

Рейтинг-Топ 10

  • Редактируем шаблон прямо на сайте
  • Красивый блок информации для uCoz
  • Новшества мини чата ucoz
  • Скруглённые уголки
  • Видеокурс "HTML с нуля"
  • Красивые Списки На CSS
  • Переключение страниц с интересным эффектом.
  • Набор Noavatar для сайта
  • Очень красивый вид комментариев для ucoz
  • Имитация градиента

Топ-5-сайтов

  • Oyama Do
    Рейтинг: 5.0/5
    Просмотров: 11676
  • Профессиональная академия единоборств KEA-FIGHTING
    Рейтинг: 3.0/2
    Просмотров: 5341

Статистика

Нас уже: 1651 {+0}
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    Пользователи
    Гости сайта
  • Сегодня нас посетило

    Опрос

    Оцените мой сайт
    Всего ответов: 266
Форум Файлы Магазин Статьи Графика Видео Теги
| Карта сайта | Карта форума | Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно | ©2011 - 2025

  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru
  • Клуб каратэ кёкусинкай OYAMA-DO



Статистика/ Обратная связь/ Размещение рекламы