Отображения подсказок про ссылки с помощью CSS
Сегодняшний урок поведает Вам о том, как сделать вывод красивых иконок рядом с каждой ссылкой на сайте.
На Вашем сайте могут быть сотни ссылок. Некоторые будут вести на другие сайты, некоторые на скачивания вордовских файлов, некоторые на PDF файлы и т.п. Было бы очень полезно информировать Ваших посетителей о том, куда они попадут при нажатии на ссылку. Совсем недавно мы рассматривали пример, который выполнял подобное действие и показывал фавикон внешнего сайта. Данный пример выполнен только на CSS и может быть использован для ссылок в пределах сайта.
Теперь давайте разбираться как все это работает:
HTML: чтобы сделать ссылку на PDF файл нам необходим следующий код
<a href="files/holidays.pdf">Ссылка</a>
Использовав такой код мы просто получим обыкновенную ссылку. Теперь добавим немного магии CSS:
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Использовав несколько строчек кода мы обучили браузер после каждой ссылки (которая ведет на .pdf файл) добавлять красивую иконку Акробат Ридера. В коде есть также путь к картинке, так что не забывайте его менять, если будете менять расположение картинки.
Тоже самое можно проделать с остальными вариантами: Email = "mailto:", Word = ".doc", Excel = ".xls" и т.д.
Например, тут еще можно добавить картинки к ссылкам на видео и музыку.
Но бывают ситуации, когда не получится указать расширение файла. Например, при добавлении ссылок на всплывающие окна или на другие сайты.
Давайте взглянем на код в таком случае:
<a class="popup" href="help.html">Help Page</a>
Как мы видим тут мы добавили к ссылке класс "popup". Теперь посмотрим на CSS:
a[class ="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}
В самом начале мы пишем, что если у какой либо ссылки есть класс "popup" - значит ей необходимо прибавлять иконку попапа. То есть, таким образом можно приделать иконку к любой ссылке, просто определив ее класс.
Иногда бывает еще сложнее и у ссылки может быть двухсловные классы. Тогда на помощь приходит код:
a[class ~="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}
В таком случае будет выбрана любая ссылка, в которой есть класс с упоминанием слова "popup" (может быть часть слова, а может быть одно из нескольких).
На сегодня все! Спасибо за внимание!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.askthecssguy.com
Перевел: Максим Шкурупий
Урок создан: 3 Мая 2009
Просмотров: 25765
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.