Как сделать Анимированные Всплывающие Подсказки?
Приветствую всех читателей – Sozdaiblog.ru!
Сегодня я покажу, как сделать всплывающие подсказки с помощью CSS стилей.
Вся идея в том, что есть список со ссылками или в нашем случае, социальные иконки, которые показывают маленькие подсказки при наведении курсора мыши.
Неупорядоченный список будет выглядеть следующим образом:
<ul>
<li><a class="tt-googl_plus" href="Ссылка"><span>Google Plus</span></a></li>
<li><a class="tt-rss" href="Ссылка"><span>Rss</span></a></li>
<li><a class="tt-twitter" href="Ссылка"><span>Twitter</span></a></li>
<li><a class="tt-wikipedia" href="Ссылка"><span>Wikipedia</span></a></li>
<li><a class="tt-wordpress" href="Ссылка"><span>WordPress</span></a></li>
<li><a class="tt-you_tube" href="Ссылка"><span>You Tube</span></a></li>
</ul>
В нём Вы вписываете названия всплывающих подсказок и адрес перенаправления для каждой кнопки.
Представленный выше список размещаем в любом месте документа между тегами <body></body>, предварительно обернув его в <ul></ul> с добавлением класса элементам:
<ul class="tt-wrapper">
<li><a class="tt-googl_plus" href="Ссылка"><span>Google Plus</span></a></li>
<li><a class="tt-rss" href="Ссылка"><span>Rss</span></a></li>
<li><a class="tt-twitter" href="Ссылка"><span>Twitter</span></a></li>
<li><a class="tt-wikipedia" href="Ссылка"><span>Wikipedia</span></a></li>
<li><a class="tt-wordpress" href="Ссылка"><span>WordPress</span></a></li>
<li><a class="tt-you_tube" href="Ссылка"><span>You Tube</span></a></li>
</ul>
Далее нам остаётся прописать CSS стили. Они вписываются в самый конец основного файл всех стилей Вашего ресурса. В шаблонах WordPress таковым файлом является «style.css».
Все исходные файлы можно загрузить одним общим архивом нажав на кнопку «СКАЧАТЬ» рядом с демонстрацией всплывающих подсказок.
Всплывающие подсказки
Скажите друзья, какая всплывающая подсказка Вам понравилась больше всего?
На сегодня это всё, но не расстраивайтесь, впереди Вас ожидает много различных эффектов.
Чтобы их не пропустить, предлагаю подписаться на обновление блога и получать уведомление о выходе нового материала на Ваш адрес электронной почты.
До новых статей…
С уважением, Денис Черников!
-
Как проверить Траст сайта?
- Псевдо-польза от кросспостинга!
- Отключаем запросы на обновление плагинов и WordPress!
-
Как в Photoshop создать красивую 3D коробку?
-
Как сделать мобильную версию сайта за 5 Минут?
-
Как установить Аудио Плеер для блога или сайта на WordPress?
-
Голосовая почта для WordPress!
-
Форма для комментариев в WordPress с Неоновой подсветкой
- Влияние тегов и мета-тегов на продвижение страниц сайта
- Как сделать видеоплеер для сайта Без Плагинов за 5 минут?
