Цветные SVG фильтры для элементов

Примеры наложения SVG фильтра на <div> c содержимым через CSS-свойство filter.

1
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-blackwhite">
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.94"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.93"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.88"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-blackwhite);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

2
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-violet">
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0.19 0.57"></feFuncR>
			<feFuncG type="table" tableValues="0.037 0.84"></feFuncG>
			<feFuncB type="table" tableValues="0.25 0.98"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>  
</svg>
HTML
.box {
	filter: url(#filter-violet);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

3
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-blue">	
		<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0"></feFuncR>
			<feFuncG type="table" tableValues="0.15 0.38"></feFuncG>
			<feFuncB type="table" tableValues="0.23 0.57"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-blue);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

4
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-blue">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0.25 0.61"></feFuncR>
			<feFuncG type="table" tableValues="0.13 0.93"></feFuncG>
			<feFuncB type="table" tableValues="0.94 0.88"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-blue);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

5
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-green">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.16"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.65"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.54"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-green);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

6
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-red">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
			<feFuncR type="table" tableValues="0 0.93"></feFuncR>
			<feFuncG type="table" tableValues="0.11 0.19"></feFuncG>
			<feFuncB type="table" tableValues="0.40 0.14"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer> 
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-red);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

7
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-pink">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0.92 0.99"></feFuncR>
			<feFuncG type="table" tableValues="0.24 0.78"></feFuncG>
			<feFuncB type="table" tableValues="0.64 0.42"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-pink);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

8
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-orange">	
		<feColorMatrix type="matrix" result="gray"values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.98"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.48"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.31"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-orange);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

9
<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-yellow">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.95"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.59"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.13"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>
HTML
.box {
	filter: url(#filter-yellow);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}
CSS

Результат:

27.04.2022, обновлено 22.12.2022
4050

Комментарии

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

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

Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
54531
+9
Текст в три колонки
Примеры, как вывести текст в три колонки одинаковой ширины и отступом между ними с помощью разных CSS-свойств.
28494
-2
Преобразование строк в массив PHP
Примеры преобразования строк текста в массив по разным разделителям.
15522
+4
Как преобразовать текст из textarea в параграфы HTML
Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.
7102
+3
Копирование текста на сайте с помощью Clipboard.js
Clipboard.js – мини плагин для копирования текста с сайта в буфер обмена, который не использует flash и JQuery.
7174
0
Стили для вложенных нумерованных списков ol
В продолжении темы нумерованных списков ol, пример стилизации и вывода нумерации вложенных элементов.
9739
-1