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

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

<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

Результат:

14.10.2020
5438

Комментарии

, чтобы добавить комментарий.

Другие публикации

Наложение градиента на изображение
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
5090
0
Сборник CSS градиентов
Подборка 23-х фонов с линейным и радиальным градиентом.
56044
+9
Не стандартный СSS градиент
Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.
7656
+2
Сборник анимированных градиентов
Сборник анимированных градиентов c использованием CSS keyframes.
2886
0
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
34278
+9
Как сделать несколько фонов в background
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они...
6943
+1