Создание галереи с помощью CSS3

17 ноября 2009 Автор: Zver Прокомментировать

Недавно, гуляя по буржуйским блогам, нашёл очень интересный урок создания красивой CSS3 галереи.
Для тех, кто вообще не знает что такое CSS, процитирую википедию:

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

С помощью CSS вы можете отформатировать текст вашего HTML документа, установить отступы между блоками, задать фоновое изображение для блока и многое многое другое. Данная технология предоставить большую гибкость и возможность управления вашим HTML документом, а также уменьшить сложность и повторяемость в структурном содержимом.

Версия CSS3 намного расширена по возможностям, по сравнению с предыдущими версиями. С помощью CSS3, уже без проблем, можно делать закруглённые углы, градиентные границы, тени, использовать собственные шрифты и многое другое.

Единственным минусом CSS3 является то, что его ещё не поддерживают многие браузеры. Я пользуюсь Mozilla Firefox 3.5, всё отображается отлично.

До времени написания этого поста я не очень интересовался CSS3, однако наткнувшись вчера на одну галерею, сделанную с помощью CSS3 был удивлён тем, что картинки отображаются под углом, вот это и пробило у меня интерес к CSS3, а копнув чуть глубже, я ещё сильней был удивлён, и это ещё больше вызвало у меня интерес.
Жаль конечно что не все браузеры ещё поддерживают новую версию данной технологии, но будем надеяться и ждать новых времён.

Так, ладно, это было вступление, теперь давайте перейдём к главной части данного поста - создание красивой галереи с помощью CSS3.

Для начала отберите несколько изображений для вашей будущей галереи. Я выбрал 4 изображения, размером 255 на 188 пикселей, создал папку gallery, в которой создал папку images - куда и поместил эти изображения. Советую в начале, в учебных целях, делать также, а потом, когда всё будет понятно, можно без проблем встроить такую галерею к себе на сайт.

Теперь давайте откроем любой текстовый редактор, или HTML редактор. Я пользуюсь Macromedia Dreamweaver 8, Вы можете воспользоваться любым другим редактором, например Блокнотом.

С помощью редактора в папке gallery давайте создадим файл под именем index.html, в который вставим следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Создание красивой галереи с помощью CSS3</title> <!-- Заголовок -->
<link href="style.css" rel="stylesheet" type="text/css"> <!-- Файл таблицы стилей -->
</head>

<div id="container"> <!-- Главный блок -->
<h1>Красивая галерея, созданая с помощью CSS3</h1> <!-- Заголовок 1го уровня -->

<ul class="gallery"> <!-- Блок галереи(список) -->
    <li><a href="images/1.jpg" class="image"><img src="images/1.jpg" alt="" /></li>
    <li><a href="images/2.jpg" class="image-2"><img src="images/2.jpg" alt="" /></li>
    <li><a href="images/3.jpg" class="image-3"><img src="images/3.jpg" alt="" /></li>
    <li><a href="images/4.jpg" class="image-4"><img src="images/4.jpg" alt="" /></li>
</ul> <!-- Конец блока галереи -->

</div> <!-- Конец главного блока -->

<body>
</body>
</html>

Код прокомментирован, если что-то непонятно, жду вопросов в комментариях

надеюсь понятно, что ссылки на изображения следует заменить на свои.
Это ещё не всё, необходимо также создать файл таблицы стилей, т.е. в папке gallery создать файл style.css, воспользовавшись редактором, которым Вы создавали и редактировали файл index.html. В созданный файл, style.css, необходимо вставить следующий код, заточенный только под Mozilla Firefox:

* { margin: 0; padding: 0; border: 0; } /* Параметры для всей страницы */  
  
body{ /* Параметры для тега body */  
    background: #959796 url(images/background.jpg); /* Задание фонового изображения */  
}  
#container{ /* Параметры для блока container */  
    width: 600px; /* Ширина 600 пикселей */  
    margin: 40px auto; /* Отступ сверху и снизу 40 пикселей*/  
}  
h1{ /* Параметры для заголовком 1го уровня */  
    font: bold 45px/40px Helvetica, Arial, Sans-serif;  
    text-align: center; color: #fff;  
    text-shadow: 10px 12px 16px #333;  
}  
ul.gallery{ /* Параметры для блока галереи(списка) */  
list-style: none; /* Отключить вид маркера для списка */  
margin-top:70px; /* Отступ сверху 70 пикселей */  
}  
ul.gallery li a{ /* Параметры для ссылки в блоке галереи */  
    position: relative; /* Установка способа позицианирования элемента*/  
    float: left; /* Выравнивание элемента по левому краю */  
    padding: 10px 10px 25px 10px; /* Поля сверху слева и справа 10 пикселей, а снизу 25 пикселей*/  
    background: #eee; /* Задаёт фоновый цвет для блока */  
    border: 1px solid #fff; /* Задаёт рамку размером в 1 пиксель */  
    -moz-box-shadow: 0px 2px 15px #333; /* Задаёт тень для блока */  
} 
ul.gallery li a.image{ /* Параметры для 1го изображения */  
    z-index: 4; /* Определяет на каком плане будет блок(Наложение картинок друг на друга) */  
    -moz-transform: rotate(-20deg); /* задаёт поворот изображения */  
}
ul.gallery li a.image-2{ /* Параметры для 2го изображения */  
    z-index: 3;  
    -moz-transform: rotate(20deg);  
}
ul.gallery li a.image-3{ /* Параметры для 3го изображения */  
    z-index: 2;  
    -moz-transform: rotate(20deg);  
}
ul.gallery li a.image-4{ /* Параметры для 4го изображения */  
    z-index: 1;  
    -moz-transform: rotate(-20deg);  
}
ul.gallery li a:hover{ /* Параметры для ссылки, при наведённом курсоре мыши*/  
    z-index: 5;  
    -moz-box-shadow: 3px 5px 15px #333;  
}

Код таблицы стилей также прокомментирован, но если будут вопросы - пишите в комментариях. Для нормального отображения галереи в других браузерах необходимо внести небольшие изменения, над которыми подумаете сами.

За поворот блока отвечает свойство -moz-transform: rotate(-20deg);. Измеряется поворот блока в градусах, по часовой стрелке, если же ввести отрицательное значение - против часовой стрелки.

Один блок я не прокомментировал, т.к. о эффектах текста, созданных с помощью CSS3, думаю написать в следующих постах.
Так как данный файл уже прикреплён к нашему HTML документу(см. код файла index.html), то открыв или обновив страничку index.html в браузере, мы получим замечательную галерею, выполненную с помощью CSS3, вроде этой.

Надеюсь многие заметили, что для каждого изображения в стилях заданы свои параметры, что не очень удобно если у вас динамическая галерея, состоящая из 100, а то и более изображений. Но, я уверен, что посидев часок другой, покопавшись в коде, подумав, можно решить эту проблему.

Для тех, кто плохо понимает основы HTML и CSS, советую скачать учебник Игоря Квентора "Блочная вёрстка веб-сайта".

Ещё раз повторюсь, CSS3 не поддерживается старыми браузерами, поэтому все эффекты вы сможете посмотреть только в новых браузерах, например Mozilla Firefox 3.5.

С уважением, Евгений

Не забывайте подписываться на блог, а также присоединяйтесь ко мне в следующих социальных сервисах: