CSS3 фильтры: изменяем изображения используя стили

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами — это filter.

filter: filter(value);

Как и следовало ожидать, для этого свойства требуется использование префикса браузера. Но на данный момент, только -webkit- (Chrome и Safari) является единственным движком браузеров, поддерживающим это свойство.

 -webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Фильтрация

Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например,

 filter: blur(5px) brightness(0.5);

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

 filter: blur(5px);
// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

Яркость

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

 filter: brightness(0.2);
// Browser Specific
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);

Насыщенность

Насыщенность измеряется в процентах.

 filter: saturate(50%);
// Browser Specific
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

Поворот тона

Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.

 filter: hue-rotate(20deg);
// Browser Specific
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);

Контрастность

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

 filter: contrast(150%);
// Browser Specific
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

 filter: invert(100%);
// Browser Specific
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

Обесцвечивание

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

 filter: grayscale(100%);
// Browser Specific
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% — это будет завершенная сепия, 0% — исходное изображение.

 filter: sepia(100%);
// Browser Specific
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);

Поддержка браузерами

Перевод статьи с www.inserthtml.com

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

20 потрясающих CSS3 техник, библиотек и примеров

В этом списке мы собрали для вас лучшие ресурсы с примерами CSS3 техник, а также  демо-сайты различных разработчиков, раскрывающие се богатство CSS.

В список также включены англоязычные статьи, обрисовывающие новые фичи в CSS3 и несколько полезных библиотек, наполненных разными фишками.

Для полного эффекта от просмотра ссылок из данной статьи рекомендуем пользоваться последней версией современного браузера, например, хромом.

Прекрасно исполненная версия меню на чистом CSS. На самом деле здесь представлено целых семь разных вариантов, в каждом из которых используются новые функции перехода в CSS3 и с умом применяются селекторы для создания безупречного эффекта размытия. Посмотреть на код можно здесь.

На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними. Демо-код достаточно сложный, поскольку использует 3D-Transform функции CSS3 и JavaScript. Подробную инструкцию на английском можно прочитать здесь.

Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS. При наведении мышкой на лого вы увидите, какие именно CSS-свойства использовались для создания изображений. На github можно посмотреть полный код.

Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.

Простая, но стильная панель навигации. Её CSS-код состоит всего из 65 строк, но это не мешает ей оставаться эффектной. Глубина пространства создаётся опять же за счёт новых функций перехода и трансформации в CSS3.

Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!

Ещё один классный проект, посвящённый слайдерам для изображений. Он тоже работает как часы, не содержит ни капли JavaScript. Проект состоит из четырёх разных вариантов реализации и учебника. Руководство на английском можно почитать здесь.

Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.

Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч. Сама по себе демонстрация не очень впечатляет, но вы только подумайте, сколько классного можно сделать, добавив ещё пару слоёв.

А вот несколько полезных статей и руководств о новых функциях CSS3.

Подробная статья о новых “гибких” контейнерах (так называемых “флексбоксах” — flexbox). Флексбоксы — это новый способ вёрстки страниц в CSS. Это удобное средство для изменения ширины, высоты и расположения HTML-элементов на странице. Если лень читать на английском много, можно прочесть краткую шпаргалку.

Руководство о том, как создать цветное меню навигации с анимированными выпадающими элементами. Никаких фокусов с изображениями или JavaScript — только чистый CSS.

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

Одна из лучших статей в мире о CSS. В ней представлены CSS-формы и множество примеров того, как их создавать и использовать. Читать немедленно.

В этом руководстве авторы объясняют, как создать простые индикаторы выполнения процесса без использования сложных скриптов. Градиенты, полоски, эффектные отблески: вот это всё сделано с помощью CSS3-техник. Конечный результат выглядит безупречно.

Очень популярный на github проект. И не зря! Всё выполнено на CSS и значительно повышает производительность веб-проекта.

Spinkit — это коллекция настраиваемых индикаторов загрузки. А индикаторы загрузки нужны всем.

Что же вы увидите, перейдя по ссылке? Большую коллекцию кнопок.

Классное приложение, которое позволяет настроить кнопки-“выключатели” под себя и скопировать полученный CSS-код. А ещё там есть кнопки-“выключатели”, используемые в популярных ОС.

СSS-библиотека подсказок для сайта, не требующих JavaScript.

Проект Colors.css нужен для тех, кто ненавидит подборку hex-кодов цветов. Это приятная альтернатива встроенному цветовому редактору.

Итак, надеемся, эти примеры и советы вдохновят вас на создание интересных и удобных CSS-поделок!

5 CSS свойств для изображений, которые вам необходимо знать

Существую CSS-свойства, которые используют изображения для создания фона элементов, создания рамок и масок «слоев», а также вырезки частей изображения. Применяя их, вы сможете добавлять изображения к элементам страницы и контролировать их положение и поведение.

Однако, существуют другие свойства, которые используются не так часто и применяются непосредственно к изображениям (тегу <img />). Использование тега является наиболее предпочтительными способом размещения изображений на страницах.

Предназначение указанных css свойств, применяемых к изображениям различное: от создания тени до увеличения резкости. Они помогают нам лучше контролировать положение и внешний вид изображений, добавляемых с помощью тега .

Давайте рассмотрим каждый из них подробнее.

Усиление резкости изображений с image-rendering

Поддержка браузерами — 90,82% (на 11.2017)

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

Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated.

Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.

Когда используется pixelated, соседние пиксели определенного пикселя объединиться с ним, создавая впечатление, будто они образуют один большой пиксель, отличный для экранов с высоким разрешением.

Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated.

CSS

img {
  image-rendering: pixelated;
}

Растягивание изображений с помощью object-fit

Поддержка браузерами — 89,7% (на 11.2017)

Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.

HTML

<div>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS

#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Сдвиги изображений с помощью object-position

Поддержка браузерами — 89,7% (на 11.2017)

Аналогично дополняющему background-position свойству background-size, существует свойство object-position, которое дополняет object-fit. Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения (top 20px right 5px, center right 80px).

HTML

<div>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS

#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}

Выравнивание изображений с помощью vertical-align

Иногда мы добавляем тег <img /> (который по своей природе является строчным элементом) внутрь текста в качестве иллюстраций или для украшения. В таких случаях выравнивание изображений и текста в необходимом нам положении может стать сложной задачей, если вы не знаете какое свойство применить.

Свойство vertical-align применяется не только в ячейках таблиц. Оно также может выравнивать строчные элементы, родителями которых также являются строчные элементы, поэтому с его помощью мы можем выровнять изображение внутри строки текста. У этого свойства имеется довольно много значений, которые можно применить к строчным элементам, поэтому вам будет из чего выбрать.

HTML

<p>
PDF <img src="/pdf.png"
style="vertical-align:text-top" alt="Image">
</p>

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени (text-shadow, box-shadow). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр. При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Оригинал статьи — http://www.hongkiat.com/blog/img-css-properties/

Перевод: Матвей Земсков

Примеры CSS фильтров (CSS Filters) для работы с изображениями

Примеры CSS фильтров (CSS Filters)

CSS фильтры нужны для применения эффектов в графике как часть спецификации SVG. В эксклюзивной верстке сайтов иногда без CSS фильтров (CSS filter) не обойтись.

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

normal

grayscale(50%)

saturate(360%)

sepia(100%)

invert(100%)

opacity(50%)

brightness(120%)

contrast(160%)

hue-rotate(160deg)

blur(2px)

Примеры пользовательских CSS фильтров:

grayscale(значение)
Конвертирует цвета изображения (img) в черно-белые. Значение может задаваться как в процентах от 0% до 100%, так и в десятичных дробях от 0 до 1.

saturate(значение)
Задает насыщенностью цвета. Значение может быть как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

sepia(значение)
Делает эффект сепии. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

invert(значение)
Инвертирует цвета изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

opacity(значение)
Устанавливает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). Данный фильтр похож на CSS свойство opacity. Различие только в том, что фильтр поддерживает аппаратное ускорение, а свойство opacity — нет. Таким образом применение фильтра дает лучшую производительность при выводе объекта.

brightness(значение)
Смена яркости изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

contrast(значение)
Смена контрастности изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

hue-rotate(угол)
Смена цвета изображения в зависимости от заданного угла. Угол поворота определяет как изменится цвет в цветовом круге от красного до фиолетового. Значение в градусах (0deg — 360deg).

blur(радиус)
Эффект размытости изображения. Значение задается в пикселях px.

drop-shadow(x, y, радиус, цвет)
Формирует тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения как и случае с opacity.

url(ссылка на SVG фильтр)
Создание собственных фильтров с помощью SVG элемента filter. Каждый фильтр имеет свой идентификатор — id.

custom (coming soon)
Возможность создавать свои собственные фильтры на CSS Shaders, но пока данная опция доступна не на всех браузерах.

349 раз уже помогла

CSS3 | Анимация

Анимация

Последнее обновление: 06.11.2016

Анимация предоставляет большие возможности за изменением стиля элемента. При переходе у нас есть набор свойств с начальными значениями, которые имеет элемент до начала перехода, и конечными значениями, которые устанавливают после завершения перехода. Тогда как при анимации мы можем иметь не только два набора значений — начальные и конечные, но и множество промежуточных наборов значений.

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

По сути переходы применяют ту же модель — так же неявно определяются два ключевых кадра — начальный и конечный, а сам переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.

В целом объявление ключевого кадра в CSS3 имеет следующую форму:

@keyframes название_анимации {
	from {
		/* начальные значения свойств CSS */
	}
	to {
		/* конечные значения свойств CSS */
	}
}

После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.

Например, определим анимацю для фонового цвета элемента:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Анимация в CSS3</title>
		<style>
			@keyframes backgroundColorAnimation {
				from {
					background-color: red;
				}
				to {
					background-color: blue;
				}
			}
			div{
				width: 100px;
				height: 100px;
				margin: 40px 30px;
				border: 1px solid #333;
				
				background-color: #ccc;
				animation-name: backgroundColorAnimation;
				animation-duration: 2s;
			}
		</style>
    </head>
    <body>
		<div></div>
    </body>
</html>

В данном случае анимация называется backgroundColorAnimation. Анимация может иметь произвольное название.

Эта анимация предоставляет переход от красного цвета фона к синему. Причем после завершения анимации будет устанавливться тот цвет, который определен у элемента div.

Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name. Значение этого свойства — название применяемой анимации.

Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном случае время анимации — это 2 секунды.

При подобном определении анимация будет запускаться сразу после загрузки страницы. Однако можно также запускать анимацию по действию пользователя. Например, с помощью определения стиля для псевдокласса :hover можно определить запуск анимации при наведении указателя мыши на элемент:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
	background-color: #ccc;
}
div:hover{
				
	animation-name: backgroundColorAnimation;
	animation-duration: 2s;
}

Множество ключевых кадров

Как уже выше говорилось выше, анимация кроме двух стандартных ключевых кадров позволяет задействовать множество промежуточных. Для определения промежуточного кадра применяется процентное значение анимации, в котором этот кадр должен использоваться:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	25%{
		background-color: yellow;
	}
	50%{
		background-color: green;
	}
	75%{
		background-color: blue;
	}
	to {
		background-color: violet;
	}
}

В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% — на зеленый и так далее.

Также можно в одном ключевом кадре анимировать сразу несколько свойств:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
		opacity: 0.2;
	}
	to {
		background-color: blue;
		opacity: 0.9;
	}
}

Также можно определить несколько отдельных анимаций, но применять их вместе:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
@keyframes opacityAnimation {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 0.9;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
	background-color: #ccc;
	
	animation-name: backgroundColorAnimation, opacityAnimation;
	animation-duration: 2s, 3s;
}

В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у свойства animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть анимация opacityAnimation будет длиться 3 секунды.

Завершение анимации

В общем случае после завершения временного интервала, указанного у свойства animation-duration, завершается и выполнение анимации. Однако с помощью дополнительных свойств мы можем переопределить это поведение.

Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации подряд:

animation-iteration-count: 3;

Если необходимо, чтобы анимация запускалась бесконечное количество раз, то этому свойству присваивается значение infinite:

animation-iteration-count: infinite;

При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction: alternate; противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а затем будет переход к начальному кадру:

animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 2s;
animation-iteration-count: 3;
animation-direction: alternate;

При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации. Но свойство animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить именно то, которое было в последнем кадре:

animation-name: backgroundColorAnimation;
animation-duration: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;

Задержка анимации

С помощью свойства animation-delay можно определить время задержки анимации:

animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-delay: 1s;	/* задержка в 1 секунду */

Функция плавности анимации

Как и к переходам, к анимации можно применять все те же функции плавности:

• linear: линейная функция плавности, изменение свойства происходит равномерно по времени

• ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

• ease-in: функция плавности, при которой происходит только ускорение в начале

• ease-out: функция плавности, при которой происходит только ускорение в начале

• ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

• cubic-bezier: для анимации применяется кубическая функция Безье

Для установки функции плавности применяется свойство animation-timing-function:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
				
	animation-name: backgroundColorAnimation;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
}

Свойство animation

Свойство animation является сокращенным способом определения выше рассмотренных свойств:

animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode

Первые два параметра, которые предоставляют название и время анимации, являются обязательными. Остальные значения не обязательны.

Возьмем следующий набор свойств:

animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-delay: 1s;
animation-fill-mode: forwards;

Этот набор будет эквивалентен следующему определению анимации:

animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Создание баннера с анимацией

В качестве примера с анимацией создадим простейший анимированный баннер:

<!DOCTYPE html>
<html>
<head>
	<title>HTML-баннер</title>
	<meta charset="utf-8" />
	<style type="text/css">
	@keyframes text1
	{
		10%{opacity: 1;}
		40%{opacity: 0;}
	}  
	@keyframes text2
	{
		30%{opacity: 0;}
		60%{opacity:1;}
	}
	@keyframes banner
	{
		10%{background-color: #008978;}
		40%{background-color: #34495e;}
		80%{background-color: green;}
	}
	.banner
	{
		width: 600px;
		height: 120px;
		background-color: #777;
		margin: 0 auto;
		position: relative;
	}
	.text1,.text2
	{
		position: absolute;
		width: 100%;
		height: 100%;
		line-height: 120px;
		text-align: center;
		font-size: 40px;
		color: #fff;
		opacity: 0;
	}

	.text1
	{
		animation : text1 6s infinite;
	}

	.text2
	{
		animation : text2 6s infinite;
	}

	.animated
	{
		opacity: 0.8;
		position: absolute;
		width: 100%;
		height: 100%;  
		background-color: #34495e;
		animation: banner 6s infinite;
	}
	</style>
</head>
<body>
	<div>
		<div>
			<div>Только в этом месяце</div>
			<div>Скидки по 20%</div>
		</div>
	</div>
</body>
</html>

Здесь одновременно срабатывают три анимации. Анимация «banner» изменяет цвет фона баннера, а анимации text1 и text2 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.

8 фильтров изображений CSS с примерами кода

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

Дизайнеры заботятся о том, как пользователи будут чувствовать сайт и какие эмоции он вызовет. Графические дизайнеры могут использовать передовое программное обеспечение для редактирования фотографий и добавления к ним фильтров, масок или других эффектов, определяющих окончательный вид.

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

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

Приступим!

Фильтры в CSS

Для создания фильтров к изображениям в CSS мы используем свойство filter, которое определяет визуальные эффекты с помощью нескольких различных функций. Каждая функция может давать разный результат для основного изображения. Кроме того, к одному изображению можно добавить несколько фильтров.

Пойдем по очереди и посмотрим, какой результат мы можем получить.

1. оттенки серого (% | число)

Самый популярный фильтр, добавляемый к изображениям, — это оттенки серого. Позволяет создавать черно-белую фотографию.Функция градаций серого может принимать числовой или процентный аргумент. 0% означает, что ничего не изменится, а 100% означает, что изображение будет полностью преобразовано в оттенки серого. Если оставить значение пустым, по умолчанию будет установлено 100%. Если вы хотите установить значение в виде чисел, оно принимает значения от 0 до 1.

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

2.сепия (% | число)

Фильтр сепия создает красновато-коричневую фотографию. Метод sepia () работает аналогично оттенкам серого; он также принимает значения от 0% до 100% или от 0 до 1. Отрицательные значения не допускаются. Давайте посмотрим на примеры:

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

3.размытие (px)

Эффект размытия делает фотографию очень размытой за счет применения эффекта размытия по Гауссу. Это применимо к цензуре или фоновому изображению, когда нет необходимости делать фото очень резким. Метод blur () также принимает один аргумент, и аргументом должно быть определенное количество пикселей. Наибольшее значение будет иметь большее размытие. По умолчанию значение равно 0.

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

4. яркость (% | число)

Еще один фильтр — яркость (), позволяющий регулировать уровень яркости картинки. Требуется один параметр в процентах от 0% до 100%, и все, что указано выше, делает изображение ярче или в виде числа от 0 до 1 или выше, чтобы сделать его ярче. По умолчанию яркость каждого изображения составляет 100%. Давайте проверим, как этот фильтр ведет себя на примере кода:

Изображения в этом примере установлены на 0,5 и 150%. Вы можете заметить, что чем меньше число, тем темнее фотографии, и наоборот.

5. контраст (% | число)

Фильтр контрастности () позволяет регулировать контрастность изображений. Если установлено значение 0% или 0, оно будет полностью темным, установлено значение 100% или 1, это значение по умолчанию, что означает, что фотография не будет изменена вообще, а значения выше 100% или 1 предоставят меньше контраста. Давайте посмотрим на пример:

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

6.насыщение (% | число)

Насыщенность описывает интенсивность цветов, и чем больше значение насыщающего фильтра, тем ярче цвета. Значение по умолчанию для изображения — 100% или 1, 0 означает, что изображение ненасыщенное, а все, что выше 100% и 1, увеличивает насыщенность. Давайте посмотрим на пример:

Как вы можете видеть в примере, второе изображение ненасыщенное и имеет 20% насыщенности, а третье изображение имеет 200% насыщенности, и оно заметно более яркое.

7. поворот оттенка (град.)

Во-первых, давайте сначала объясним, что такое поворот оттенка, потому что это может сбивать с толку. Это было для меня. Итак, поворот оттенка — это функция, в которой мы указываем угол вокруг цветового круга. Входные данные могут быть в градусах или оборотах. Он также принимает отрицательные значения. Максимальное значение составляет 360 градусов, поэтому, даже если мы установим большее значение, оно будет работать как в круге, поэтому, например, если вы установите 450 градусов, то результат будет как в 90 градусов, а если мы поставим -10 градусов, результат будет как если мы установим 350 градусов (то есть 360 градусов — 10 градусов).Давайте посмотрим на пример кода:

В приведенном выше примере вы можете увидеть четыре изображения, первое из которых является оригинальным, без какого-либо поворота оттенка, но это также то, как выглядит поворот оттенка на 360 градусов. Второе изображение настроено на поворот оттенка на 90 градусов, и видно, что зеленый здесь очень сильный. Третье изображение установлено на 180 градусов, и в этом примере изображение более синее, а последнее, установленное на -90 градусов (что рассчитано на 240 градусов), более красноватое.

8. инвертировать (% | число)

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

В коде выше вы можете увидеть три изображения. Первый — исходный, следующий инвертирован на 75%, а последний полностью инвертирован (значение 1).

Заключение

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

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

Надеюсь, вы найдете это полезным, также поделитесь своими любимыми методами фильтрации в комментариях или, может быть, вы создадите какие-нибудь потрясающие пользовательские фильтры? Дай мне знать!

Удачного кодирования!

Связанные показания 📖

Учебник по CSS Grid

Шпаргалка по Flexbox — 12 советов и приемов, которые должен знать каждый веб-разработчик

Анна Данилец

Анна Данилец окончила факультет управления бизнесом.В течение многих лет она получала солидный опыт в разработке клиентских и серверных интерфейсов, создавая программное обеспечение для известных ИТ-компаний. Ее опыт в области ИТ — это React.JS, Angular, React Native, Flutter, Node.JS и Nest.JS. В последние годы она вела бизнес в Duomly, уделяя особое внимание информационным технологиям, а также интернет-маркетингу, дизайну и созданию контента, таким как ведение блогов и Youtube. В нерабочее время Анна ведет свой настоящий криминальный канал на YouTube, любит спорт, солнце и средиземноморскую кухню.

Подробнее об Анне Данилец

Если понравилось, делитесь и комментируйте!

Создание потрясающих эффектов изображения с помощью CSS Backdrop-filter

Сегодня мы узнаем о свойстве CSS backdrop-filter, которое было введено в спецификации Filter Effects Module Level 2.В частности, мы рассмотрим синтаксис свойства фонового фильтра , поддержка браузера и практические приложения .

Все изображения, включенные в демонстрационные ролики этой статьи, взяты с сайта Pixabay.com.

Backdrop-filter — это не то же самое, что Filter

Вы, наверное, уже слышали о фильтрах CSS. Если вам нужно освежить в памяти эту тему, эффекты фильтров CSS: размытие, оттенки серого, яркость и многое другое в CSS! отличное чтение.

В то время как свойство filter помогает нам применять эффекты, такие как размытие и сепия, к заданному элементу, свойство backdrop-filter поможет нам применить те же эффекты к области за элементом . Вот демонстрация, чтобы проиллюстрировать разницу (убедитесь, что вы используете соответствующий браузер, такой как Chrome, с включенным флагом Experimental Web Platform Features — подробнее о поддержке браузера в следующем разделе):

См. Сравнение перьевого фильтра и фонового фильтра от SitePoint (@SitePoint) на CodePen.

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

Синтаксис и поддержка браузера

Свойство backdrop-filter имеет ряд общих функций со свойством filter , с которым вы, вероятно, уже знакомы.Вы можете применить его к любому элементу, используя следующий синтаксис:

  фоновый фильтр: <функция-фильтр> [<функция-фильтр>] * | нет  

Как и свойство filter , вы можете применить несколько фильтров к фону элемента. Все значения, допустимые для свойства filter , также действительны для свойства backdrop-filter . Это свойство также можно анимировать.

Несмотря на много общего между обоими свойствами, backdrop-filter не пользуется такой же широкой поддержкой браузеров, как свойство filter .На данный момент только Safari 9 поддерживает это свойство без флага, и даже в этом случае вы должны использовать префикс -webkit- .

Для Chrome и Opera вы можете включить флажок «Экспериментальные функции веб-платформы» в разделе «chrome: // flags». Свойство вообще не поддерживается в Firefox и Edge. Вы можете узнать больше о поддержке браузером backdrop-filter на Могу ли я использовать.

Использование фонового фильтра

Свойству backdrop-filter для правильной работы необходимы как минимум два элемента — целевой элемент и другой элемент прямо под нашей целью, к которому будут применяться эффекты.Чтобы создать эффект фона в нашей демонстрации выше, мы использовали следующую разметку:

  

  

     
 Заголовок 
 
    
 Случайный текст, связанный с заголовком. 
  
  

Мы также использовали следующий CSS, чтобы применить фильтр к фону нашего элемента и установить фон для нашего текстового содержимого:

  .backdrop {
  фон: url ('путь / к / image.jpg');
}

.содержание {
  положение: относительное;
  верх: 30%;
  фон: rgba (100,150,100,0.35);
  фоновый фильтр: оттенок-поворот (180 градусов);
}  

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

Вот нужная вам разметка:

  

  

  
  

  
  ....
  

А это CSS:

  .target {
  позиция: абсолютная;
  верх: 0%;
  высота: 100%;
  ширина: 20%;
  непрозрачность: 0;
}

.a {
  осталось: 0%;
  фоновый фильтр: оттенок-поворот (30 градусов);
}

.b {
  осталось: 20%;
  фоновый фильтр: оттенок-поворот (90 градусов);
}

  

Это окончательный результат в моем случае:

См. «Несколько фильтров бок о бок для пера» от SitePoint (@SitePoint) на CodePen.

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

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

Когда кто-то наводит курсор на изображение, ширина первого div и высота второго изменяются с 0% до 80% в течение 0,5 с. Это делит наше изображение на четыре разных раздела, к каждой из которых применена собственная комбинация фильтров:

См. Статью «Анимация целевых элементов пером» от SitePoint (@SitePoint) на CodePen.

Другие возможности включают использование SVG-фильтров и анимацию фильтров, применяемых к целевым элементам.

Приложения

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

Это разметка, которая нам нужна для начала:

  

  
  

    
 Нажмите кнопку ниже, чтобы увидеть изображение с места убийства. 
     Покажи мне 
  
  

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

А вот CSS для создания эффекта размытия изображения:

 .предупреждение {
  фон: rgba (0,0,0,0.75);
  фон-фильтр: контраст (4) размытие (20 пикселей);
}  

Вы можете поэкспериментировать с разными цветами фона и фильтрами, чтобы выбрать то, что вам больше всего подходит. В демонстрации я также добавил немного JavaScript, чтобы скрыть текст предупреждения после того, как пользователь нажимает кнопку «Показать». Вы должны попробовать:

См. «Размытие графического содержимого пером» от SitePoint (@SitePoint) на CodePen.

Вы также можете использовать свойство backdrop-filter для создания размытого фона при отображении модального окна пользователю или для размытия фона за меню вне холста, когда оно появляется.Еще одно применение фонового фильтра — размытие изображений на вашей веб-странице до тех пор, пока они не будут полностью загружены, как это делается на Medium.

Заключение

Используя свойство backdrop-filter , вы сможете воссоздать множество эффектов, которые ранее требовали JavaScript. Однако я бы порекомендовал вам подождать, пока браузер не получит достаточную поддержку, прежде чем использовать его в производственной среде. Еще одна вещь, которую вы должны иметь в виду при использовании backdrop-filter , — это производительность .Использование этого свойства на значительном количестве элементов или на большой области вашей веб-страницы отрицательно скажется на производительности.

Подробнее о свойстве backdrop-filter можно прочитать в черновике W3C и документации MDN.

Можете ли вы предложить другие интересные варианты использования этой собственности? Как вы планируете использовать его в будущем? Дайте нам знать об этом в комментариях.

Раскрашивание белого изображения с помощью фильтра CSS

2018-06-17 ~ 2 мин

Недавно мне пришлось изменить цвет белого изображения.Поскольку это изображение было отрисовано библиотекой, которая не позволяла заменить его другим, это пришлось сделать с помощью CSS. Хотя есть относительно простое решение, найти его оказалось довольно сложно.

Поехали.

Должно быть легко!

Просто добавьте фильтр hue-rotate , который должен работать.

Но это не так. Конечно, нет, это было бы слишком просто. Изображение по-прежнему белое.

Почему не сработало?

После нескольких проверок, действительно ли фильтр применен, меня осенило.
Белый имеет значение яркости 100%, поэтому изменение оттенка ни к чему не приведет. Фактически, белый цвет имеет значение оттенка 0, то есть красный. Так что я должен был заранее знать, что изменить оттенок не получится, глупый я!

Измените яркость, затем

Поскольку 100% яркости — это белый цвет, а 0% — черный, 50% должны давать насыщенный цвет. Давай попробуем.

Изменить яркость можно с помощью фильтра яркости , который изменяет яркость в зависимости от заданного коэффициента.

Хорошо, что-то изменилось, это хорошо. Но результат оказался не таким, как ожидалось. Цвета нет. Изображение просто серое.

Что случилось?

Яркость теперь 50%, как и ожидалось. Но про насыщенность забыл. Поскольку белый цвет имеет 100% -ную яркость, я подумал, что насыщенность тоже будет 100%. К сожалению, это 0%, что вызывает серый цвет.

Итак, измените насыщенность

Если есть фильтр яркости , то обязательно будет фильтр насыщения .И да, есть!
Давайте установим насыщенность на 100%, затем:

Опять же, ничего не изменилось.
Оказывается, фильтр насыщения работает так же, как фильтр яркости . Он просто изменяет значение на основе заданного коэффициента . Вот это проблема. Как нас учила математика в начальной школе, всего умножить на 0 это 0 .
Это делает фильтр насыщения бесполезным для этой цели.

Пора сдаваться?

Еще нет! Есть еще несколько фильтров.Давайте рассмотрим их:

• размытие : очевидно, не меняет цвет
• контраст : ничего не делает в сером изображении
• drop-shadow : также не меняет цвет
• оттенки серого : ну, не могу сделать серое изображение серым er
• hue-rotate : все дело в том, чтобы сделать оттенок видимым, разных оттенков ничего не изменит
• инвертировать : инвертировать серый, к сожалению, просто приводит к другому варианту серого
• непрозрачности : можно было бы просвечивать другой цвет, но это не то, что мне нужно
• сепия : это последний.И, наконец, похоже, что это могло сработать!

Пример документации MDN выглядит очень многообещающим.

Попробуем:

Это что-то изменило? Похоже на белый цвет. Почти . Проверив цветовую палитру, я обнаружил, что фактический цвет составляет hsl (60, 100%, 97%) .
Значит, насыщенность есть! Наконец, некоторые результаты: tada:

Теперь можно применять другие фильтры для достижения желаемого результата.

Давайте посмотрим на цвет!

Я уже достаточно написал о пробах и ошибках. Позвольте мне сэкономить ваше время и показать вам, как получить чистый красный цвет:

На мой взгляд, это самый простой цвет, с которым можно работать, чтобы получить любой цвет, который вы хотите.
Например, чтобы получить зеленый цвет, просто добавьте hue-rotate (120deg) в конце.

Заключение

Белый — неприятный цвет, который нужно менять с помощью фильтров. С помощью обычных фильтров невозможно создать другой цвет, кроме градаций серого.
Фильтр sepia , возможно, не был разработан для этой цели, но он спасает положение!

Еще одна вещь: черный

Чтобы превратить черный в цвет, превратите его в белый и работайте оттуда:

  img {
  фильтр: инвертировать (1) яркость (50%) сепия (100%) насыщенный (10000%);
}  

7 плагинов CSS Image Filter для Instagram-ifying WordPress

Если вы проводите в социальных сетях столько же времени, сколько и я, то знаете, что люди склонны злоупотреблять фильтрами изображений.

Думаю, применение классного черно-белого фильтра к свадебной фотографии могло бы быть приятным штрихом, но не тогда, когда это фотография кричащего ребенка, танцующего с женихом. Однако я бы сказал, что в правильных руках (то есть в руках профессиональных разработчиков WordPress!) Фильтры изображений могут принести много пользы для визуального контента.

Недавно я писал о том, насколько важна последовательность при разработке сайта WordPress. Фильтр изображений — это один из способов придать единообразный вид всем фотографиям на вашем сайте.Фильтры также позволяют вам играть на эмоциях посетителей, вызывая определенные настроения. О, и они тоже выглядят чертовски круто.

Хотя такие приложения, как Instagram и Snapchat, сделали готовые фильтры достаточно повсеместными, фильтр — это на самом деле любой параметр или комбинация настроек, которые изменяют внешний вид фотографии. Любой инструмент, который позволяет открывать и редактировать изображение (например, тот, который находится на вашем компьютере или интеллектуальном устройстве), должен иметь настройки регулировки цвета, которые вы можете изменить для создания желаемого эффекта.

Эти параметры обычно включают:

• Экспозиция
• Контраст
• Основные моменты
• Тени
• Насыщенность
• Температура
• Оттенок
• сепия
• Виньетка
• Резкость или размытость

Вот пример того, как редактор изображений представляет настройки фильтра на компьютере:

Вот как с этим справляется iPhone, предлагая как отдельные элементы управления настройками, так и предварительно созданные эффекты фильтров:

В сегодняшней статье я собираюсь рассказать о том, что можно и чего нельзя применять при применении фильтров изображений к изображениям WordPress. Я также рассмотрю варианты использования CSS для создания этих эффектов фильтра. Если нет необходимости переключаться между Photoshop и выходить из него каждый раз, когда вы хотите добавить новое изображение на свой сайт, позвольте избавить вас от этой проблемы.

11 советов по использованию эффектов фильтров изображений на вашем сайте WordPress

После того, как вы решили, что хотите применить эффекты фильтра к изображениям на своем сайте WordPress, найдите время, чтобы просмотреть, что можно и чего нельзя использовать. Хотя ученым-ракетчикам не нужно понимать, какой эффект вы получите, применив к изображениям оттенок сепии, есть несколько менее очевидных передовых методов, которые вам стоит запомнить.

Совет №1: Помните психологию цвета

Теория цвета играет большую роль в веб-дизайне, поэтому не забудьте использовать ее здесь.Хотя вы, возможно, не применяете полные изменения цвета к своим изображениям, эти тонкие вариации, возникающие из-за эффектов фильтров, по-прежнему будут иметь аналогичное влияние на ваших посетителей.

Совет № 2: не переусердствуйте

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

Совет № 3: Минимизируйте количество фильтров

В исследовании 2011 года, в ходе которого изучалось, как сходство цветов влияет на кратковременную память, исследователи обнаружили, что чем больше согласованности между цветами в изображениях, тем лучше ваши посетители смогут сохранять и вспоминать эти изображения в своей краткосрочной памяти. Так что будьте проще, как Оуэн О’Доннелл.

Совет № 4: вдохновляйтесь своим брендом

Есть ряд причин для применения эффекта фильтра к вашим изображениям, но почему бы не начать с вашего брендинга? Если у вас есть фирменный цвет, который будет отлично смотреться на ваших изображениях (например, у Криса Редшоу), тогда сделайте это. Или, может быть, ваша компания находится в Калифорнии, и вы хотите создать непринужденную, выбеленную солнцем атмосферу для своих фотографий, фильтры — отличный способ добиться этого эффекта.

Совет № 5: Скрывайте недостатки с помощью фильтров

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

Совет № 6: Создайте время и место

Я думаю, что причина того, почему некоторые фотографы-любители и фотошопы в социальных сетях неправильно понимают все фильтры изображений, заключается в том, что они не задумываются о том, какое влияние эти изображения оказывают на людей, которые на них смотрят. Они просто думают, что фильтр «красивый» или «крутой». Многие фильтры были созданы для того, чтобы перенести зрителя в другое время и в другом месте, и их следует использовать для этих целей.

Мне очень нравится это руководство от Make Use Of. Я думаю, что он хорошо объясняет, как следует использовать каждый фильтр Instagram. Даже если вы не используете инструмент, который дает вам доступ к фильтрам Instagram, подразумеваемое значение такое же, как и для фильтров аналогичного стиля, которые можно найти в других местах.

Совет № 7: не используйте чернильницу!

При тестировании испытуемых на то, какие чувства вызывают у них определенные фильтры Instagram, исследователи из Гарварда обнаружили, что большинство людей связывают фильтр Inkwell с чувством депрессии.Если вы не хотите навязывать посетителям неправильное представление, а ваши изображения с самого начала выглядят более мрачными, держитесь подальше от этого фильтра.

Совет № 8: оживите фотографии

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

Совет № 9: выделите что-то конкретное

Мы используем пробелы, текстовые иерархии и другие манипуляции с контентом, чтобы сосредоточить внимание на самом важном. То же самое можно сделать с некоторыми фильтрами изображений. Виньетирование
— один из способов сделать это, поскольку оно создает своего рода размытие или блеклость вокруг изображения. Это привлекает внимание к центру и вызывает у зрителя своего рода приглашение перейти к фотографии.

Совет № 10: улучшите эффекты при наведении курсора или наведении курсора

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

Совет № 11: используйте эффекты, улучшающие вовлеченность

Исследование Georgia Tech показало, как фильтрация изображений может повысить взаимодействие с визуальным контентом. Их исследование подтвердило ряд гипотез:

• Чем больше контраст и экспозиция фотографии, тем больше просмотров и комментариев.
• Более теплые фильтры приводят к большему количеству комментариев и просмотров.
• Фильтры, которые состаривают фотографии, увеличивают количество просмотров, но получают меньше комментариев.
• Saturation, напротив, отрицательно влияет на количество просмотров, но положительно влияет на комментарии.

7 фильтров изображений CSS для использования на вашем сайте WordPress

Единственная реальная проблема, которую я вижу при принятии решения использовать фильтры для вашего сайта WordPress, — это труд и время, необходимые для этого.

Послушайте, это действительно здорово, что Photoshop, Canva и приложение для обработки фотографий на вашем устройстве позволяют легко создавать специальные цветовые эффекты для наших изображений, но это требует времени.Когда вы просматриваете веб-сайт за веб-сайтом, последнее, что вам нужно делать, — это применять специальные настройки фильтра к каждому изображению.

Сэкономьте время и используйте CSS для обновления изображений на вашем сайте. В W3Schools есть хорошее руководство по созданию этих фильтров с помощью CSS3, но этот подход все же требует некоторых изысканий. Если вам нужна помощь в применении этих фильтров, используйте один из них:

• При первом взгляде на эти фильтры CSS я был немного сбит с толку из-за изображения Губки Боба.Однако, протестировав другие изображения и видео, я понял, как можно использовать эти фильтры для улучшения внешнего вида каждого из них. Первая карта особенно интересна, поскольку я знаю, что видел эти эффекты раньше, но понятия не имел, что это были эффекты фильтров.

• Что мне больше всего нравится в этом инструменте, так это то, что в нем есть множество готовых фильтров, большинство из которых вы узнаете из Instagram, но у вас все еще есть возможность настроить их по своему вкусу. Вы также можете загрузить сюда свои собственные изображения, чтобы получить представление о том, как фильтры на самом деле будут выглядеть с вашими фотографиями, прежде чем переходить к одному из них и получать для него код CSS.

• Эта небольшая библиотека CSS дает вам возможность вставлять фильтры Instagram в WordPress и применять их к вашим изображениям. Однако следует отметить, что эффекты не будут отображаться в Internet Explorer. Излишне говорить, что если у вас есть большая база посетителей, использующих IE, и вы хотите, чтобы эффекты проявлялись, это может быть не лучшим решением.

• Для более упрощенных настроек фильтра вы можете использовать эти свойства CSS. Меньше внимания уделяется применению различных эффектов цвета и затенения из таких приложений, как Instagram, и больше — изменению четкости и яркости фотографии.

• Philter — действительно хороший вариант, поскольку его легко применить (просто обновите HTML на своем сайте), и есть множество вариантов, с которыми можно поиграть. Они создали готовые эффекты фильтров, эффекты фильтров при наведении курсора и даже позволяют настраивать фильтры. Что бы ты ни захотел!

• Хотя этот плагин CSS имеет ограниченное количество включенных эффектов фильтрации, он по-прежнему является хорошим вариантом для упрощения процесса применения фильтров к изображениям на сайте. Разработчик также использовал широкий спектр стилей, поэтому вы не просто получаете на выбор множество черно-белых или размытых эффектов.

• Здесь можно выбрать девять уникальных вариантов фильтров, каждая из которых имеет удобное сокращение CSS. Также важно отметить, что они совместимы со всеми основными браузерами, поэтому, если вы беспокоитесь о том, что посетители будут одинаково работать на всех платформах, это может быть вашим самым безопасным выбором.

Завершение

Вы знаете, что я считаю лучшим в использовании фильтров изображений? Вам не нужно быть профессиональным дизайнером, чтобы придать своему сайту WordPress более профессиональный вид или эффектный вид.Все, что вам нужно, — это немного ноу-хау с точки зрения использования CSS (или, в качестве альтернативы, опыт работы с приложением для редактирования фотографий), и вы можете создавать визуальные эффекты, которые одновременно увлекательны и запоминаются.

Бесплатное видео Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра) Узнайте, как использовать Google PageSpeed ​​Insights, чтобы ставить реалистичные цели, повышать скорость сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.

  .my-element {
 filter: drop-shadow (0 0.2rem 0,25rem rgba (0, 0, 0, 0,2)); 
}  

  img {
 фильтр: падающая тень (0,35 rem 0,35 rem 0,4 rem rgba (0, 0, 0, 0,5)); 
}  

  .parent-element {
 filter: drop-shadow (0,35rem 0,35rem 0,4rem rgba (0, 0, 0, 0,5)); 
} 
 .clipped-element {
 clip-path: polygon (0 0, 50% 0, 100% 50%, 50% 100%, 0100%,, 50% 50%)) 
} 
  

 .мой-элемент> * {
 box-shadow: 0 0,2 rem 0,25 rem rgba (0, 0, 0, 0,2); 
} 
 @supports (filter: drop-shadow (0 0,2rem 0,25rem rgba (0, 0, 0, 0,2))) {
 .my-element {
 filter: drop-shadow (0 0,2rem 0,25rem rgba ( 0, 0, 0, 0,2)); 
} 
 
 .my-element> * {
 box-shadow: none; 
} 
}