Lecaw

Учимся создавать Web-сайты

Необычная галерея изображений с CSS transitions

September 10, 2012
CSS
662hits
 
 

CSS transitions позволяет браузеру анимировать HTML элементы через изменение свойств CSS. Другими словами, мы можем создать анимации на веб-странице без JavaScript, но с чистым CSS.

Сегодня я покажу, как использовать это удивительное свойство CSS transitions для создания необычной галереи изображений. Используемые методы являются, главным образом, CSS transitions, который объединен с псевдо-классом :hover в CSS. Конечно, мы также будем использовать и другие свойства CSS для достижения поставленной цели!

ДЕМОИсходные данные

 

Обратите внимание на то, что результаты этого учебного руководства будут работать хорошо в тех браузерах, которые поддерживают CSS transitions, такие как Chrome, Safari и Firefox.

Идея

Идея состоит в том, чтобы получить галерею изображений, которая немного 'увеличит масштаб' с наложением и выведет на экран описание изображения. При наведении курсора мыши к наложению и описанию будет добавляться эффект 'размытия'.

CSS transitions

Как обычно, прежде чем начать работу с разметкой давайте пройдемся по CSS transitions. CSS transitions поддерживает четыре различных свойства, а именно name, duration, easing и delay.

div
{
	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 1s;
	/* Firefox */
	-moz-transition-property: width;
	-moz-transition-duration: 1s;
	-moz-transition-timing-function: ease;
	-moz-transition-delay: 1s;
	/* Safari и Chrome */
	-webkit-transition-property: width;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease;
	-webkit-transition-delay: 1s;
}

Во всяком случае CSS transitions можно сгруппировать с помощью сокращенного свойства.

div
{
	transition: width 1s ease 1s;
	/* Firefox */
	-moz-transition:width 1s ease 1s;
	/* Safari и Chrome */
	-webkit-transition:width 1s ease 1s;
}

Основная разметка

Каждое изображение будет содержать небольшую информацию в виде заголовка, описание и конечно, саму картинку. Таким образом мы создадим элемент 'box', назовём его .box, чтобы сгруппировать всю информацию изображения в одном месте.

Кроме этого будет эффект наложения изображения, при наведении курсора мыши. Дадим этому элементу название #overlay.

<!-- ### Начало ### -->
<div id="holder"> <div class="box box-1"> <h3>Image1 Title</h3> <div class="image"> <img src="/images/1.jpg" /> </div> <div class="description"> Текст описания Image1 идет сюда... </div> </div> <div class="box box-2"> <h3>Image2 Title</h3> <div class="image"> <img src="/images/2.jpg" /> </div>
<div class="description"> Текст описания Image2 идет сюда... </div> </div> <div class="box box-1"> <!-- ... --> </div> <!-- другие image boxes --> </div> <!-- ### Начало наложения ### --> <div id="overlay"></div>

Image boxes CSS

Каждая image box станет больше, когда на неё наведут курсор мыши, так же она будет возвращаться к нормальному размеру как только будет убран курсор. Всё это сделать легко при помощи масштаба CSS3 связанного с псевдо-классом :hover в CSS. Кроме того, с помощью CSS transitions мы легко можем создать "масштабирование" на эти image boxes.

.box
{
	position: relative;
	float: left;
	margin: 5px 1%;
	padding: 10px 2% 15px;
	text-align: center;
	background-color: #f4f4f4;
	border: 1px solid #ccc;
	z-index: 5;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-shadow: 0 0 3px #ccc;
	-moz-box-shadow: 0 0 3px #ccc;
	-webkit-box-shadow: 0 0 3px #ccc;
	transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	transition:
		background-color 1s,
		box-shadow 1s,
		transform 0.5s;
	-moz-transition:
		background-color 1s,
		-moz-box-shadow 1s,
		-moz-transform 0.5s;
	-webkit-transition:
		background-color 1s,
		-webkit-box-shadow 1s,
		-webkit-transform 0.5s;
}
.box:hover
{
	background-color: #fff;
	z-index: 10;
	box-shadow: 0 0 15px #333;
	-moz-box-shadow: 0 0 15px #333;
	-webkit-box-shadow: 0 0 15px #333;
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.box-1 { max-width: 24%; }
.box-2 { max-width: 44%; }
.box-3 { max-width: 35%; }

Эффект изменения масштаба будет выглядеть более реалистичным, если добавить тени на поле изображения.

Если Вам интересно, то вы можете посмотреть еще пример CSS3 3D transform – Эффект вращения куба .

Падающая CSS тень заголовка 

При изменении text-shadow - свойства текста CSS, на название изображения будет падать тень при наведении курсора мыши.

.box h3
{
	margin: 5px 10px;
	padding: 5px 10px;
	border-bottom: 0 solid #fff;
	color: #777;
	font-size: 27px;
	font-family: 'Arial Narrow', Arial;
	letter-spacing: 1px;
	text-shadow: 0 1px 1px #ccc;
	border-bottom: 0 solid #fff;
	transition:
		color 1s,
		text-shadow 1s,
		border-bottom 1s;
	-moz-transition:
		color 1s,
		text-shadow 1s,
		border-bottom 1s;
	-webkit-transition:
		color 1s,
		text-shadow 1s,
		border-bottom 1s;
}
.box:hover h3
{
	color: #333;
	border-bottom: 1px solid #aaa;
	text-shadow: 1px 1px 1px #fff, 2px 2px 1px #888;
}

Прозрачность изображения в CSS

Изображения будут выглядеть полупрозрачными на начальной стадии и становиться непрозрачными, когда поле будет выбрано. Этот исчезающий переход может быть выполнен, когда мы поменяем свойство в CSS opacity.

.box .image
{
	margin: 10px;
	opacity: 0.5;
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1.5s;
	-o-transition: opacity 1s;
}
.box:hover .image
{
	opacity: 1;
}

Размывание текста в CSS

Задача состоит в том, чтобы создать 'размывающийся' текст описания для каждого поля изображения. Кроме того, этот текст описания станет 'читаемым', когда поле изображения будет активно. В этом случае мы будем использовать приемы размытия тени используя приемы CSS для заголовков, шрифтов и стилей текста.

.box .description, .box .description a
{
	color: rgb(153,153,153);
	color: rgba(153,153,153,0);
	text-shadow: 0 0 5px #aaa;
	text-align: left;
	font-size: 14px;
	transition:
		text-shadow 1s ease 0.5s,
		color 1s ease 0.5s,
		outline 1s ease 0.5s;
	-moz-transition:
		text-shadow 1s ease 0.5s,
		color 1s ease 0.5s,
		outline 1s ease 0.5s;
	-webkit-transition:
		text-shadow 1s ease 0.5s,
		color 1s ease 0.5s,
		outline 1s ease 0.5s;
}
.box:hover .description, .box:hover .description a
{
	text-shadow: 0 0 0 #fff;
	color: rgb(100,100,100);
}
/* this will create a nice focus effect on Firefox */
.box:hover .description a
{
	outline: 1px dotted #777;
}

CSS наложения

Последнее, но не менее важное это CSS наложения. Сейчас я Вам продемонстрирую как это работает.

#overlay
{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 7;
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.5);
	transition: background-color 0.7s;
	-moz-transition: background-color 0.7s;
	-webkit-transition: background-color 0.7s;
}
#overlay:hover
{
	background: rgba(0,0,0,0);
	z-index: 0;
}

Из кода видно, что наложение происходит после наведения курсора мыши (или выбирается какое то поле изображения), в результате остальные изображения становятся полупрозрачными и располагаются на заднем фоне активного изображения (за это отвечает свойство z-index). Если мы убираем курсор (или у нас не будет выбранного поля изображения), активное изображение будет 'исчезать' и сливаться с остальными изображениями.

Заключение

Это все что понадобится для создания необычной галереи изображений с CSS transitions! Я надеюсь, что Вы сочтете это учебное руководство полезным.

Возможно, Вам может понравиться эта статья Необычные эффекты Hover с переходами CSS3. Спасибо за чтение.

 

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий