Хаки и Скрипты Next Generation CMS

Выводим иконки типов файлов возле каждой ссылки на чистом CSS

irbees2008 irbees2008 Опубликовано - 30 - апреля CSS
4259 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Пришел заказ , нужно сделать страничку, на которой будут выкладываться файлы разных типов архивы, картинки, документы, и при этом чтобы каждый тип файла выделялся.Это все очень просто сделаем при помощи CSS

Итак приступим:
1. Поскольку каждый файл у нас — это ссылка.

Код:
<a href='downloads/Мой файл.zip'>Мой файл.zip</a>
добавим общий стиль ссылок в CSS:
Код:
a{ padding-left: 18px;
background-position: 0 0;
background: transparent url(../images/icon.png) no-repeat;
}
Как видите мы задали смещение для текста ссылки на 18 px влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, т.е. если пользователь добавит файл, не описанный в стилях.
2.ну теперь приступим к описанию типов файлов:
Код:
a[href $='.pdf'] {
padding-left: 18px;
background-position: 0 0;
background: transparent url(../images/pdf.png) no-repeat;
}
a[href $='.zip'] {
padding-left: 18px;
background-position: 0 0;
background: transparent url(../images/zip.png) no-repeat;
}
Как вы заметили ,мы прописываем для каждого типа файла свою иконку и свой стиль ,также мы можем даже подсвечивать каждый тип файла своим цветом,но это уже как хотите.
Практически также как и эти иконки у ссылок выводятся и фавиконки в выдаче поисковика.
НЕЗАБЫВАЕМ СКАЧАТЬ ИКОНКИ[COUNTER] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. [/COUNTER]

Можешь почитать и вот эту статейку "Интересный HOVER эффект"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [33]
  • Гости: [32]
  • Users: [1] ????????? ?????
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 34
  • Генерация страницы: 0.308сек
  • Потребление памяти: 5.400 Mb 
  •   Яндекс.Метрика