Иконизируем ссылки
Иконизировать ссылки по определенным параметрам и свойствам очень умный шаг в пользу юзабилити, пользователь должен знать куда приведет его ссылка!
При виде иконки возле ссылки пользователь легко поймет что его ожидает, ибо формат иконок понятен для каждого пользователя любой операционной системы
Как это реализовать?
Реализовать это очень просто — с помощью всемогущего css.
Ответ на опережение.
—Да, способ не работает в IE6, но мне все равно :-)
Вот так это делается с помощью css.
Иконизируем по расширению файла
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;
}
Вроде все разобрали. Так же выложу ссылку уже на готовый пак с иконками.
Спасибо за внимание! ;-)
Чел, всё норм. Крути – не обращай внимания. Есть много полезностей.
Ну хоть вы, тов. Чернев, открыв новый блог на более-менее интересную тематику, могли бы не допускать ошибок сотен существующих – создавайте уникальный контент. Из пустого в порожнее, я эти примеры вижу ежедневно в своей RSS-ленте. Еще месяц чтения, и я точно смогу сказать, с какой группы сайтов вы сдираете весь контент, ведь первоисточник не указываете. Двойка за старания.
update by chernev: Нда, товарищ унылый Кал.
Продолжайте, уважаемый автор.
На мой взгляд выборка интересного материала из нескольких источников – это уже работа. Не всем обязательно писать новые статьи. Думаю просто имеет смысл указывать источник.
Зря вы так, действительно. И контент… Ладно переведённый, ладно из книжки, но вы бы ссылки бы поставили. Стиль тоже слабоват. Сделать, чтобы не работало в ie6 – не мудрено, только спеки CSS читай. Кроме того, если вам всё равно, работает ли оно в ие6 – обоснуйте это. Напишите призыв и остальным разработчикам, что, мол, уже пора перекидывать людей на другие браузеры. Дайте ссылку на noie.ru или browsehappy.com где-то на блоге. И, пожалуйста, или давайте полную статью на хабр, или перестаньте заниматься этим ПЕАРом. Спасибо.
А кому не нравиться не читайте, хватит у меня в блоге УГ разводить :-)
Источник я всегда указываю. В данном случае я просто не мог заново открыть синтаксис css.
это css3 ?
Не слушайте никого! Это лучший блог о веб-технологиях в моем rss
Я согласен что блог хороший, мне нравится, поэтому не слушайте всяких долбоебов которым лижбы потрындеть и пишите побольше хороших заметок
А не могли бы вы указать способ не через css, а через, к примеру, JavaScript для формы ввода, чтобы он при обнаружении подобной ссылки ставил её соответствующий класс?
А по поводу вышесказанного – но у вас же пишется так громко «Я собственной персоной», может заменить на что-то поскромнее для таких постов-копий?)
на своих проектах я использую пример с jquery:
Что значит постов-копий?
Отличный пост, в первый раз вижу такое применение css)
Согласен контент не уникальный, но я в своем блоге тоже собираю интересные на мой взгляд статьи, как в записной книжке, и оставляю ссылки на автора. Я как и автор этого блога занимаюсь выборкой интересного материала. И я благодарен автору блога ибо читать его мне интересно.
Я извиняюсь, но правильно — «расширение», а не «разрешение».
Оуч, реально ступил, ОГРОМНОЕ спасибо, исправил ;-)
Г-н Чернев, даже не думайте останавливаться. Ваш блог сейчас лучший в рунете по такой тематике.
Автору большое спасибо за весь блог.Интересные и действительно нужные и полезные вещи описываете.
Отличный блог! Побольше бы таких! Спасибо за Ваш труд!
От меня ADD FAVORITE , Все что я искал , находится здесь .. спасибо за ваш труд
Помоему хороший блог, читать всегда интересно!
спасибо за пак с иконками, возможно когда нить пригодится
Очень интересно. Даже и не знал что css на такое способен.