Веб-дизайнеру
Веб-разработчику
Дополнительно
Анимационная всплывающая подсказка CSS3 + 4 варианта!
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы узнаем, как создается простая всплывающая подсказка css. Но у нас она будет не совсем простая, а с эффектом анимации. При создании подсказок, мы будем использовать псевдо-классы CSS3 :before и :after.
Вообще, идея состоит в том, чтобы имея список со ссылками, в нашем случае социальные кнопки, показывать маленькие подсказки при наведении курсора мыши на элемент. В этой статье, Вы можете найти 4 варианта анимационных эффектов появления подсказок. Данная техника также применима и в других случаях, не только по отношению к социальным кнопкам. Например, можно создать кнопку с описание на CSS3. Итак, приступим.
Основа HTML
Как уже было сказано выше, мы имеем список ссылок, в частности маркированный список, следующего вида:
|
1 2 3 4 5 6 7 8 |
<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
Элементы списка li позиционированы с помощью float, что позволяет выстроить их не вертикально, а горизонтально. Сами ссылки, анкоры, имеют следующие стили:
|
1 2 3 4 5 6 7 8 9 |
.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; } |
Так как мы для фона используем CSS спрайт, прописываем позицию фонового изображения для каждой ссылки элемента списка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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 мы используем для вывода всплывающих подсказок, которые по умолчанию мы прячем, устанавливая их начальную прозрачность на 100%. Красивый эффект появления подсказки, будет поднимать её выше ссылки или кнопки, поэтому мы задаем нижний отступ 100px:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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 также засчитывается как часть ссылки), подсказка также появится при наведении курсора мыши на область над ссылкой (просто прозрачность 100%, делает его невидимым).
Для самых маленьких указателей, мы будем стилизовать псевдо-элементы :before и :after. Мы будем оформлять их таким образом, чтобы создать треугольник с помощью прозрачных левой и правой границ. Псевдо-элемент :before будет служить в качестве тени для :after, поэтому мы дадим ему черное значение RGBA с низкой прозрачностью:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } |
Значение при наведении курсора мыши, для элемента span:
|
1 2 3 4 |
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } |
И вуаля! Аннимированные подсказки на CSS3 готовы! Во втором примере, вы можете увидеть альтернативный стиль эффекта всплывающей подсказки (в виде круга), который всплывает от ссылки. В третьем примере подсказки вращаются. И в четвертом другой красивый эффект.
Вот что мы имеем:
Надеюсь, этот небольшой эффект Вам понравился и оказался полезен!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
