Правильные иконки к ссылкам при помощи CSS
Узнал об интересном способе проставлять разным ссылкам разные иконки и все это при помощи CSS. Прикольно и так просто
Пример:
Подставляем нужную иконку для ссылки указывающей на файл с расширением .pdf
имея ссылку такого типа
<a href="document.pdf">Ссылка на документ pdf</a>
достаточно написать вот такой CSS файлец и подготовить нужную иконку
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(pdf-ico.gif) no-repeat center right;
}
в вышеупомянутом примере к любму тегу имеющему атрибут href заканчивающийся на .pdf будет применен стиль. Отступ справа на 18 пикселей и наложением фона(иконки) с выравниванием в правом по горизонтали и по центру по вертикали. Знак доллара $ перед знаком = означает, что совпадения ищутся с конца строки.
Похожим же образом можно определить ссылку уазывающую на e-mail и подставить иконку письма.
<a href="mailto:test@pion.ru">Пишите письма</a>
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}
^ - означает то, что совпадения ищутся в начале строки
Да, чуть не забыл. Для нормальной работы в ИЕ7 а может и еще в каких браузерах, нужно в начале ХТМЛ документа
ставить эту строку.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Похожие записи:
Закажи товарища
Как качать с торрентов не волнуясь о рейтинге?
После прочтения – сжечь!
Parrot AR.Drone – летающий робот
Осознанные сновидения
В отпуск!
Интерактивный редактор кода для jQuery
Tenga egg – яйца для мужчин
Бесплатный проезд на электричках
ASIMO робот компании Honda
Марадона в молодости
Microsoft MySong Аккомпанимент
Квест выберись из комнаты
Легкий способ сделать сайт
Достаточно 3 человека, чтобы снять высадку в нормандии
Red Bull BC One 2007 South Africa Highlight
Фокусы с лазером
Sony – Робот QRIO
Мобильные карты, пробки, и сообщества
Perpetuum Jazzile – Africa
Самый первый тестовый пост


Во всех браузерах работает?
— 20 марта 2008 @ 15:06
Вроде как да, я проверил в ИЕ7 и Опере потом проверю в ФФ и ИЕ6, как время будет. Ваще штука хорошая, буду пользовать в будущем.
— 20 марта 2008 @ 15:10
в шестом осле не работает, а жаль
— 15 апреля 2008 @ 14:20