SVG рамки для фотографий

Пример:

HTML:

<div class="card-container">
	<div class="card">
		<div class="image image1"></div>
	</div>
	<div class="card">
		<div class="image image2"></div>
	</div>
	<div class="card">
		<div class="image image3"></div>
	</div>
	<svg>
		<filter id="wavy1">
			<feturbulence x="0" y="0" baseFrequency="0.2" numOctaves="5" seed="1"></feturbulence>
			<feDisplacementMap in="SourceGraphic" scale="20" />
		</filter>
	</svg>
	<svg>
		<filter id="wavy2">
			<feturbulence x="0" y="0" baseFrequency="0.1" numOctaves="5" seed="1"></feturbulence>
			<feDisplacementMap in="SourceGraphic" scale="20" />
		</filter>
	</svg>
	<svg>
		<filter id="wavy3">
			<feturbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feturbulence>
			<feDisplacementMap in="SourceGraphic" scale="20" />
		</filter>
	</svg>  
</div>

</div>

</div>

</div>

<svg>

</filter>

</svg>

<svg>

</filter>

</svg>

<svg>

</filter>

</svg>

</div>

Все три варианта рамок отличаются только значением атрибута baseFrequency в фильтрах

CSS:

.card-container *,
.card-container *:after,
.card-container *:before {
	box-sizing: content-box;
}
.card-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.card-container .card {
	position: relative;
	width: 260px;
	height: 360px;
	margin: 30px;
}
.card-container .card .image {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	transform: translate(10px, 10px);
}
.card-container .card:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 340px;
	border: 20px solid #fff;
	z-index: 1;
	background: linear-gradient(145deg, #ffffff, #e6e6e6);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	background: transparent;
}
.card-container .card:nth-of-type(1)::before {
	filter: url(#wavy1);
}
.card-container .card:nth-of-type(2)::before {
	filter: url(#wavy2);
}
.card-container .card:nth-of-type(3)::before {
	filter: url(#wavy3);
}
.image1 {
	background-image: url("photo-1.jpg");
}
.image2 {
	background-image: url("photo-2.jpg");
}
.image3 {
	background-image: url("photo-3.jpg");
}
.card-container svg {
	width: 0;
	height: 0;
}

.card-container *,

.card-container *:after,

.card-container *:before {

box-sizing: content-box;

}

.card-container {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

}

.card-container .card {

position: relative;

width: 260px;

height: 360px;

margin: 30px;

}

.card-container .card .image {

position: relative;

width: 100%;

height: 100%;

background-size: cover;

transform: translate(10px, 10px);

}

.card-container .card:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 240px;

height: 340px;

border: 20px solid #fff;

z-index: 1;

background: linear-gradient(145deg, #ffffff, #e6e6e6);

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

background: transparent;

}

.card-container .card:nth-of-type(1)::before {

filter: url(#wavy1);

}

.card-container .card:nth-of-type(2)::before {

filter: url(#wavy2);

}

.card-container .card:nth-of-type(3)::before {

filter: url(#wavy3);

}

.image1 {

}

.image2 {

}

.image3 {

}

.card-container svg {

width: 0;

height: 0;

}

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: