Приветствую тебя уважаемый пользователь на своем сайте. Когда то, я уже рассказывал о том как добавить всплывающие подсказки на CSS, Но сегодня я бродил по интернету и наткнулся на прикольные всплывающие подсказки при наведении. Немного потестировал их, подумал что возможно кому то такие подсказки на чистом css для своего сайта так же подойдут.
Данные подсказки можно использовать практически к любой кнопке на сайте, или к какому либо словосочетанию, картинке, да в общем к чему угодно, но на примере всплывающие подсказки на сайте используются именно для социальных кнопок, при наведении на которые появляется прикольная текстовая подсказка.
Очень часто бывает так, что на вашем сайте много различных блоков, текстов и другого полезного контента, который может запутать пользователя, вот тут то и приходят на помощь подобные всплывающие подсказки, ими можно предоставить некую информацию для какого то участка или кнопки на сайте.
В данной статье я хочу поделится с вами чудесными подсказками при наведении, да и просто для себя сделать заметку на будущее, а вдруг пригодится :). В статье я не просто дам вам исходники, но и немного опишу что и с чем едят, как настроить подсказки на сайте, как их подключить, в демонстрации вы сможете посмотреть на разные их эффекты, и.т.п...
Вот такой примерно вид будут иметь всплывающие закладки на вашем сайте:
В общем приступим, и для начала нам потребуется создать HTML разметку для наших анимированных подсказок сайта, создадим li список который будет иметь приблизительно следующий вид:
|
1 2 3 4 5 6 7 8 |
<ul> <li><a href="#"><span>Google Plus</span></a></li> <li><a href="#"><span>Twitter</span></a></li> <li><a href="#"><span>Dribbble</span></a></li> <li><a href="#"><span>Facebook</span></a></li> <li><a href="#"><span>LinkedIn</span></a></li> <li><a href="#"><span>Forrst</span></a></li> </ul> |
Ну, в первом пункте сложного нет ничего, думаю все понятно, теперь же давайте приступим к более сложному заданию, это добавление css стилей, в которых будут применены переходы и псевдо элементы такие как :before и :after. Для анимированных подсказок мы будем использовать чистый css код без применения js скриптов. Ниже добавим пример стилей css в котором элементы списка сместятся в левую сторону ну а ссылки примут следующий вид:
|
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; } |
После нам потребуется для каждого отдельного фонового изображения указать положение:
|
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; } |
Следующим пунктом нам потребуется добавить эффект появления подсказки, который будет появляться над выбранным пунктом сверху, установим свойство положения bottom равным 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 в данном случае выступает так же в качестве ссылки), и в этом случае всплывающее окно подсказки будет отображаться при проходе указателя мышки выше ссылки. (элемент span присутствует, но со значением прозрачности равным нулю, то есть он становится не видимым).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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); } |
Для того что бы сформировать указатель нам потребуется применить свойство :before и :after. Стили в этих значениях будут такими же, плюс мы создадим с помощью прозрачных правых и левых рамок треугольник. Псевдо-элемент :before в данном случае является тенью для псевдо-элемента :after, в связи с этим нам нужно установить темное его значение с применением низкой непрозрачности.
|
1 2 3 4 5 |
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } |
Ну и последним пунктом у нас будет, псевдо-элемент :after, который сместится на 1 пиксель и делается белого цвета кругом подсказки.
|
1 2 3 4 |
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } |
Вот в принципе и все что требуется для того что бы сделать подсказки на вашем сайте, сложного здесь ничего нет, но подсказки на сайте смотрятся действительно красиво.
Посмотреть живой пример всплывающих подсказок вы можете у нас на сайте:
Нет комментариев
Вы можете оставить комментарий первым.