Статьи

Создать Polaroid-подобное изображение с помощью CSS

Август 6, 2018

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

В этом уроке мы собираемся отображать изображения в стиле поляроида, используя только CSS.

Посмотрите демо, чтобы увидеть, что мы собираемся создать.

демонстрация

Для начала мы собираемся создать html для галереи polaroid , для этого все, что мы собираемся сделать, это отобразить изображения, обернутые в ссылку на тег привязки.

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

<div class="polaroid-images">
	<a href="" title="Cave"><img height="200" src="images/water.jpg" alt="Cave" title="Cave" /></a>
	<a href="" title="Island"><img height="200" src="images/water2.jpg" alt="Island" title="Island" /></a>
	<a href="" title="Islands Forest"><img height="200" src="images/water3.jpg" alt="Islands Forest" title="Islands Forest" /></a>
	<a href="" title="Decking"><img height="200" src="images/water4.jpg" alt="Decking" title="Decking" /></a>
	<a href="" title="Lake"><img height="200" src="images/water5.jpg" alt="Lake" title="Lake" /></a>
	<a href="" title="Mountains"><img height="200" src="images/water6.jpg" alt="Mountains" title="Mountains" /></a>
	<a href="" title="Forest"><img height="200" src="images/water7.jpg" alt="Forest" title="Forest" /></a>
	<a href="" title="Coast Valley"><img height="200" src="images/water8.jpg" alt="Coast Valley" title="Coast Valley" /></a>
</div>

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

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

Добавьте приведенный ниже CSS, чтобы стилизовать ваши изображения как поляроидную картинку.

.polaroid-images a
{
	background: white;
	display: inline;
	float: left;
	margin: 0 15px 30px;
	padding: 10px 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
	box-shadow: 0 4px 6px rgba(0,0,0,.3);
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	transition: all .15s linear;
	z-index:0;
}

На данный момент нет подписи под изображением, здесь нам нужно использовать псевдокласс: after для создания нового элемента после тега привязки. Преимущество этого состоит в том, что мы можем использовать содержимое свойства CSS, чтобы получить атрибут title из тега привязки.

Добавьте следующее, чтобы добавить подпись к изображению.

.polaroid-images a:after {
	color: #333;
	font-size: 20px;
	content: attr(title);
	position: relative;
	top:15px;
}

Чтобы убедиться, что изображение всегда будет соответствовать области поляроида, добавьте следующую строку.

.polaroid-images img {
	display: block;
	width: inherit;
}

Повернуть изображения

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

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

.polaroid-images a:nth-child(2n)
{
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}
.polaroid-images a:nth-child(3n) {
	-webkit-transform: rotate(-24deg);
	-moz-transform: rotate(-24deg);
	transform: rotate(-24deg);
}
.polaroid-images a:nth-child(4n)
{
	-webkit-transform: rotate(14deg);
	-moz-transform: rotate(14deg);
	transform: rotate(14deg);
}
.polaroid-images a:nth-child(5n)
{
	-webkit-transform: rotate(-18deg);
	-moz-transform: rotate(-18deg);
	transform: rotate(-18deg);
}

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

При событии наведения мыши мы устанавливаем вращение обратно на 0, добавляем масштаб 120% и добавляем тень на блок, чтобы он выглядел так, как будто он удаляется от страницы.

.polaroid-images a:hover{
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
        transform: rotate(0deg);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
        transform: scale(1.2);
	z-index:10;
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
        box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

Это все, что вам нужно для создания галереи изображений Polaroid.

Посмотрите демо, чтобы увидеть, как это получается.

демонстрация

45
Share: