Иконизируем ссылки

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

Иконизируем ссылки

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

Реализовать это очень просто — с помощью всемогущего css.

Ответ на опережение: да, способ не работает в IE6

Иконизируем по расширению файла

a[href $='.расширение_вашего_файла'] {
padding-right: 18px;
background: transparent url(имя_иконки.gif) no-repeat center right;
}

Пример в действии:

a[href$='.txt'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_txt.gif) no-repeat center right;
}

Иконизируем по действию

Сразу перейду к примеру, например отправка письма(mailto):

a[href ^="mailto:"] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_mailto.gif) no-repeat center right;
}

Иконизируем по сайту

К примеру ссылка ведет на Википедию, так добавим ее иконку!

a[href *="ru.wikipedia.org"] {
padding: 5px 20px 5px 0;
background: transparent url(icons/wikipedia.gif) no-repeat center right;
}

Скачать пак с иконками »

Оцени публикацию:
  • 3,15
Оценили человек: 3

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »