Современные подсказки для сайта при наведении
Анимированные подсказки для сайта
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

Приветствую тебя уважаемый пользователь на своем сайте. Когда то, я уже рассказывал о том как добавить всплывающие подсказки на CSS, Но сегодня я бродил по интернету и наткнулся на прикольные всплывающие подсказки при наведении. Немного потестировал их, подумал что возможно кому то такие подсказки на чистом css для своего сайта так же подойдут.

Данные подсказки можно использовать практически к любой кнопке на сайте, или к какому либо словосочетанию, картинке, да в общем к чему угодно, но на примере всплывающие подсказки на сайте используются именно для социальных кнопок, при наведении на которые появляется прикольная текстовая подсказка.

Очень часто бывает так, что на вашем сайте много различных блоков, текстов и другого полезного контента, который может запутать пользователя, вот тут то и приходят на помощь подобные всплывающие подсказки, ими можно предоставить некую информацию для какого то участка или кнопки на сайте.

В данной статье я хочу поделится с вами чудесными подсказками при наведении, да и просто для себя сделать заметку на будущее, а вдруг пригодится :). В статье я не просто дам вам исходники, но и немного опишу что и с чем едят, как настроить подсказки на сайте, как их подключить,  в демонстрации вы сможете посмотреть на разные их эффекты,  и.т.п...

Вот такой примерно вид будут иметь всплывающие закладки на вашем сайте:

В общем приступим, и для начала нам потребуется создать HTML разметку для наших анимированных подсказок сайта, создадим li список который будет иметь приблизительно следующий вид:

Ну, в первом пункте сложного нет ничего, думаю все понятно, теперь же давайте приступим к более сложному заданию, это добавление css стилей, в которых будут применены переходы и псевдо элементы такие как :before и :after.  Для анимированных подсказок мы будем использовать чистый css код без применения js скриптов. Ниже добавим пример стилей css в котором элементы списка сместятся в левую сторону ну а ссылки примут следующий вид:

После нам потребуется для каждого отдельного фонового изображения указать положение:





Следующим пунктом нам потребуется добавить эффект появления подсказки, который будет появляться над выбранным пунктом сверху, установим свойство положения bottom равным 100px.

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

Для того что бы сформировать указатель нам потребуется применить свойство :before и :after. Стили в этих значениях будут такими же, плюс мы создадим с помощью прозрачных правых и левых  рамок треугольник. Псевдо-элемент :before в данном случае является тенью для псевдо-элемента :after, в связи с этим нам нужно установить темное его значение с применением низкой непрозрачности.

Ну и последним пунктом у нас будет, псевдо-элемент :after, который сместится на 1 пиксель и делается белого цвета кругом подсказки.

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

Посмотреть живой пример всплывающих подсказок вы можете у нас на сайте:

Таким вроде несложным способом вы можете отобразить анимированные, всплывающие подсказки практически на любую ссылку или картинку вашего сайта, и при этом ваш сайт будет очень красиво смотреться.
Общим пробуйте и у вас все получится, а я ухожу спать :).

Вас также может заинтересовать

Нет комментариев

Вы можете оставить комментарий первым.

Оставить комментарий

Пожалуйста, введите Ваше имя. Пожалуйста, введите действительный адрес электронной почты. Пожалуйста, введите сообщение.