Рамки блоков с градиентом

14.10.2020

10366

Примеры, как сделать рамку блока с градиентом и анимировать её.

Белый фон блока

<div class="block">
	<div class="block-content">
		...
	</div>
</div>

HTML

.block {
	position: relative;
}
.block:before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	bottom: 3px;
	right: 3px;
	background-color: #fff;
	z-index: 1;
	border-radius: 4px;
}
.block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
	z-index: -1;
	border-radius: 4px;
}
.block-content {
	z-index: 999;
	position: relative;
	padding: 10px 30px;
	font-size: 16px;
}

CSS

Результат:

Используя различные градиенты можно добиться следующих узоров:

.block {
	position: relative;
}
.block:before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
	background-color: #fff;
	z-index: 1;
}
.block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: repeating-linear-gradient(45deg, yellow 0, yellow 10px, #000 10px, #000 20px);
	z-index: -1;
}
.block-content {
	z-index: 999;
	position: relative;
	padding: 10px 30px;
	font-size: 16px;
}

CSS

Пример:

Еще один пример:

.block {
	position: relative;
	margin: 0 auto;
	width: 500px;
}
.block:before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
	background-color: #fff;
	z-index: 1;
}
.block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: repeating-linear-gradient(45deg, #fff, #fff 10px, #3C7AB8 0, #3C7AB8 20px, #fff 0, #fff 30px, #CB2C4B 0, #CB2C4B 40px);
	z-index: -1;
}
.block-content {
	z-index: 999;
	position: relative;
	padding: 10px 30px;
	font-size: 16px;
}

CSS

Прозрачный фон блока

Для прозрачного фона потребуется CSS-свойство clip-path, которое задаст прозрачную область блока.

<div class="block">
	...
</div>

HTML

.block {
	color: #ffffff;
	padding: 10px 30px;
	font-size: 16px;
	border-radius: 4px;
	position: relative;
}
.block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 4px;
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	background-size: 100% 100%;
	clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

CSS

Результат:

Анимированный градиент

Анимировать градиент можно с помощью animation keyframes изменяя значения background-position.

<div class="block">
	...
</div>

HTML

.block {
	color: #ffffff;
	padding: 10px 30px;
	font-size: 16px;
	border-radius: 4px;
	position: relative; 
}
.block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 4px;
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	z-index: -1;
	animation: blockanimate 3s ease alternate infinite;
	background-size: 300% 300%;
	clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

@keyframes blockanimate {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

CSS