Гламурная галерея картинок на CSS // HTML and CSS
Есть подозрения, что Вы читали мой предыдущий перевод о том, как создать эффект градиента для текста, и вот продолжение, но в этот раз мы займемся фото-галереей…
Всё очень просто – всё что нам понадобиться это дополнительный элемент с картинкой в качестве фона для создания эффекта наложения. И так – приступим…
Основная концепция
Добавляем тэг <span> внутрь <div>, и применяем к нему стиль с фоновым изображением – таким образом у нас получиться эффект наложения двух картинок (вы так же можете воспользоваться jQuery для добавления тэга на лету, пример далее).
В CSS необходимо обратить внимание на то, что тэг div у нас position:relative, а span – position:absolute. Это необходимо, чтобы свойства top и left у элемента span позиционировали его относительно div’a.
IE PNG Hack
Как обычно IE6 отличается умом и сообразительностью – он не отображает нормально полупрозрачные PNG, специально для него существует хак – iepngfix.htc. Скачайте файл iepngfix.htc и вставьте следующий код в тэг
:<!--[if lt IE 7]> <style type="text/css"> .photo span { behavior: url(iepngfix.htc); } </style> <![endif]-->
Стили
Изменяя свойства тэга Вы можете с легкостью создать свой неповторимый стиль, вот пример 15-ти стилей:
Добавление элемента с помощью jQuery
Как многие знают, добавление пустого элемента не есть ТРУ, по этой причине будем добавлять его средствами JavaScript’a, а именно при помощи библиотеки jQuery. Для этой цели нам необходимо добавить следующий код в тэг :
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //prepend span tag $(".photo a").prepend("<span></span>"); }); </script>
#1. Простая галерея
Используя предыдущую информацию Вы слегкостью можете создать следующую галерею:
#1b. Мини иконки
В данном примере показана возможность того, что иконки можно спозиционировать по Вашему желанию (примечание: имя CSS класса обязателен для тэга span)
#2. Фото + текст
Создадим галерею, с подписями к картинкам. (тэг em).
#2b. Текст-посказка
#3. Скрепка
#4. Галеряя на “пробке”
Версия для IE6.
sIFR версия (Flash Text Replacement)
В данном примере используется sIFR библиотека – которая заменяет шрифты на рукописные:
#4b. Пробковое дерево и липкая лента
Версия для IE6.
#5. Художественная галерея – Черная рамка
#5b. Художественная галерея – Золотая рамка
#6. Затертость
sIFR версия
#7. Глянец
#8. Дерево
И как завершающий пример – демонстрация того, как с легкостью можно изменить фоновые изображения для любого элемента галереи: ul, li, и em.
Вывод
Как Вы можете видеть, данный CSS трюк легок в пониманию и кастомизации, теперь оформление галереи ложиться полностью на вашу фантазию….
Данный пример доступен для скачивания:
Вольный перевод: CSS Decorative Gallery