Недавно столкнулся с необходимостью сделать небольшой сайт-галерею (захотелось приятно удивить любимую девушку, показав ей сие творение). Поэтому я решил обратиться к Гуглу за помощью. Просидев часик-другой за компьютером я все же наткнулся именно на то, что и требовалось. После некоторых изменений, внесенных мною, получилось совсем недурно. Ниже я опишу процедуру создания подобной галереи. Думаю, что некоторым новичкам в области web-дизайна будет полезно.
Шаг 1 — HTML разметка
Тут все просто. Необходимо создать классический HTML «каркас» для будущих фото.
<div class="photos">
<img src="img/01.jpg" />
<img src="img/02.jpg" />
<img src="img/03.jpg" />
<img src="img/04.jpg" />
<img src="img/05.jpg" />
</div>
Выглядеть это будет примерно вот так:
Шаг 2 — Позиционирование фото
Здесь еще проще. Теперь нам необходимо позиционировать наши фото. Описывается это следующим нехитрым CSS кодом:
.photos img {
position: absolute;
}
Таким образом, мы выставили значение absolute для каждой фотографии. И получиться должно примерно следующее:
Шаг 3 — Позиционирование фото (по отдельности)
Начинается самое интересное. Теперь нужно примерно позиционировать каждую фотографию. Стоит так же отметить, что само позиционирование начинается с верхнего левого угла окна браузера. Пишем в CSS:
.photos img:nth-of-type(1) {
left: 50px;
top: 50px;
}
.photos img:nth-of-type(2) {
left: 150px;
top: 100px;
}
.photos img:nth-of-type(3) {
left: 250px;
top: 50px;
}
.photos img:nth-of-type(4) {
left: 350px;
top: 150px;
}
.photos img:nth-of-type(5) {
left: 450px;
top: 50px;
}
Теперь мы получаем вот такую картинку:
Шаг 4 — Вращение
Далее, чтобы придать нашим фотографиям более благородный вид и приблизиться к финалу, необходимо CSS кодом описать функцию поворота (вращения, как хотите). Обновим наш прошлый код:
.photos img:nth-of-type(1) {
left: 50px;
top: 50px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.photos img:nth-of-type(2) {
left: 150px;
top: 100px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photos img:nth-of-type(3) {
left: 250px;
top: 50px;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
.photos img:nth-of-type(4) {
left: 350px;
top: 150px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.photos img:nth-of-type(5) {
left: 450px;
top: 50px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
И вот уже появляются первые намеки на возможную галерею:
К сожалению, функция вращения не работает в Internet Explorer, что, впрочем, не удивительно.
Шаг 5 — Эффект наведения и анимация
Чтобы сделать галерею более «живой», необходимо создать эффект наведения на фотографию, к тому же, используя z-index можно вывести изображения на передний план. Вот, собственно, код:
.photos img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 10;
}
И сразу же можно добавить вращение для каждого изображения:
.photos img:hover {
-webkit-transform: rotate(380deg) scale(1.5);
-moz-transform: rotate(380deg) scale(1.5);
-o-transform: rotate(380deg) scale(1.5);
transform: rotate(380deg) scale(1.5);
z-index: 10;
}
Новая функция transition в CSS3 позволяет создать плавную анимацию. В нашем случае это выглядит так:
.photos img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
Шаг 6 — Создание границ
Чтобы наши фотографии действительно имели вид таковых, можно добавить небольшую поправку в CSS:
.photos img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
padding: 10px 10px 30px 10px;
background: white;
border: solid 1px black;
}
Финал
В конечном итоге, у нас получится неплохая галерея на HTML и CSS3 без всякого применения jQuery. Если вносить какие-либо авторские поправки, то можно добиться просто восхитительных результатов. Вот пример того, что должно получиться у вас. Спасибо за чтение! Надеюсь, что кому-то действительно статья будет полезна.
Автор: Zaidik
