Создаем эффект для галереи изображений: стопка фотографий

Одиночное изображение, вставленное в страницу HTML, с помощью только CSS можно сделать в виде стопки полароидных фотографий. нужно только использовать псевдо-элементы.

 

Идея

Выше приведенное изображение демонстрирует эффект, который является целью нашего урока. Его можно использовать как для отдельных картинок, так и для галерей, повышая их визуальную привлекательность.

Попробуем воспроизвести эффект только средствами CSS с использованием минимума разметки HTML.

 

HTML

Для эффекта нужен только контейнер div с картинкой внутри. Также добавим контейнеру класс, который будет соответствовать определенному эффекту.

<div class='stackone'>
   <img src="http://lorempixum.com/200/200/city/7" />
</div>


Стили верхнего изображения

Зададим стили для верхнего изображения:

.stackone {
	border: 6px solid #fff;
	float: left;
	height: 200px; width: 200px;
	margin: 50px;
	position: relative;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

Так как планируется использовать данный эффект в галереях, то изображения будут смещаться влево, а также устанавливается поле 50px для формирования интервала между ними. Высота и ширина устанавливается фиксированной 200px х 200px.

Устанавливаем относительное позиционирование, потому что позже мы будем использовать абсолютное позиционирование для псевдо-элементов.

Также формируем тонкую рамочку вокруг картинки с использованием тени.

Наше изображение должно выглядеть вот так:

 

Первый псевдо-элемент

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

Добавим в код псевдо-элемент:

.stackone:before {
	content: "";
}

Такая синтаксическая конструкция добавляет еще один элемент, для которого можно устанавливать стили, в структуру документа. Зададим теже свойства, что и для верхнего изображения:

.stackone:before {
	content: "";
	height: 200px; width: 200px;	
	background: #eff4de;
	border: 6px solid #fff;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

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

Сейчас наш код выдаст следующий результат:

Псевдо-элемент интерферирует с верхним изображением. Для исправления ситуации нужно сделать позиционирование и сдвинуть псевдо-элемент вниз, используя  z-index:

.stackone:before {
	content: "";
	height: 200px; width: 200px;
	background: #eff4de;
	border: 6px solid #fff;
 
	position: absolute;
	z-index: -1;
	top: 0px;
	left: -10px;
 
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

Абсолютное позиционирование позволяет разместить псевдо-элемент точно в том месте, где нужно относительно верхнего изображения. Также мы используем поворот, что создать иллюзию стопки картинок.

 

Второй псевдо-элемент

Пришло время для добавления третьего элемента в нашу композицию. Для него используем псевдо-элемент :after. Все выше изложенные соображения действуют и здесь. Отличия заключаются только в цвете фона, координатах позиционирования и величине угла поворота.

.stackone:after {
	content: "";
	height: 200px; width: 200px;
	background: #768590;
	border: 6px solid #fff;
	position: absolute;
	z-index: -1;
	top: 5px;
	left: 0px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

В итоге мы имеем следующий вид нашей картинки:

 

Продолжаем

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

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

div[class*='stack'] {
	float: left;
	position: relative;
	margin: 50px;
}
 
div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
	border: 6px solid #fff;
	height: 200px; width: 200px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
 
div[class*='stack']:before, div[class*='stack']:after {
	background: #768590;
	content: "";
	position: absolute;
	z-index: -1;
}
 
div[class*='stack']:before {
	background: #eff4de;
}

Теперь можно создать сколько угодно вариантов оформления стопок в виде классов, имена которых начинаются на stack. Для демонстрации сделаем три класса:

/*СТОПКА ОДИН*/
.stackone:before {
	top: 4px;
	left: -6px;
}
 
.stackone:after {
	top: -2px;
	left: -6px;
}
 
/*СТОПКА ДВА*/
.stacktwo:before {
	top: 0px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
 
.stacktwo:after {
	top: 5px; left: 0px;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}
 
/*СТОПКА ТРИ*/
.stackthree:before {
	top: 5px;
	left: -15px;
	z-index: -1;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}
 
.stackthree:after {
	top: -2px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

Теперь код удобно модифицировать, так как все свойства сгруппированы в одном месте. И легко добавить новый вариант стопки.

 

Совместимость с браузерами

Тестирование показало, что выше описанный код работает в Safari, Firefox, Chrome, Opera и IE9+. В  IE7 выводится просто галерея изображений без эффекта стопки, что является приемлемым результатом.

Для IE8 нужно приметь трюк, чтобы скрыть псевдо-элементы. Тогда браузер будет выводить простую галерею изображений, как и IE7.

div[class*='stack']:before, div[class*='stack']:after {
	background: #768590;
	content: "";
	position: absolute;
	z-index: -1;
 
	/*Для IE8*/
	height: 0px\9; width: 0px\9; 
	border: none\9;
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hb7ovAZtKGE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Создаем эффект для галереи изображений: стопка фотографий | | 2012-06-19 11:59:30 | | Статьи Web-мастеру | | Одиночное изображение, вставленное в страницу HTML, с помощью только CSS можно сделать в виде стопки полароидных фотографий. нужно только использовать псевдо-элементы. ИдеяВыше приведенное | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: