Є підозри, що Ви читали мій попередній переказ про те, як створити ефект градієнта для тексту, і ось продовження, але в цей раз ми займемося фото-галерея…

Все дуже просто – все, що нам потрібно це додатковий елемент зображення в якості фону для створення ефекту накладання. І так приступимо…

Основна концепція

Додаємо тег всередину
і застосовуємо до нього стиль з фоновим зображенням – таким чином у нас вийде ефект накладення двох картинок (ви так само можете скористатися jQuery для додавання тега на льоту, приклад далі).

В CSS необхідно звернути увагу на те, що тег div у нас position:relative, а spanposition:absolute. Це необхідно, щоб властивості top і left у елемента span позиціонували його щодо div a.

IE PNG Hack

Як зазвичай IE6 відрізняється розумом і кмітливістю – він не відображає нормально напівпрозорі PNG, спеціально для нього існує хак – iepngfix.htc. Скачайте файл iepngfix.htc і вставте наступний код в тег :

.photo span { behavior: url(iepngfix.htc); }

Стилі

Змінюючи властивості тега Ви можете з легкістю створити свій неповторний стиль, ось приклад 15-ти стилів:

Додавання елемента з допомогою jQuery

Як багато хто знає, додавання порожнього елемента не є ТРУ, з цієї причини будемо додавати його засобами JavaScript’a, а саме за допомогою бібліотеки jQuery. Для цієї мети нам необхідно додати наступний код в тег :

$(document).ready(function(){
//prepend span tag
$(“.photo a”).prepend(““);
});

#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 трюк легкий у розуміння і кастомізації, тепер оформлення галереї повністю лягати на вашу фантазію….

Даний приклад доступний для скачування:

DownloadCSS Photo Gallery

Вільний переклад: CSS Decorative Gallery