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

Автор: Aport Вторник, Январь 27th, 2015 Нет комментариев

Рубрика: Разное

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

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

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

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

Реализовать это очень просто — с помощью всемогущего 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;
}

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты