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

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

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

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

Реализовать это очень просто — с помощью всемогущего 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:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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