CSS3 Фильтры изображений

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

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

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

Greyscale
пятно
Насыщение
Сепия
Hue Rotate
инвертировать
яркость
Контраст
помутнение

Как использовать фильтры

Использовать фильтр в CSS так же просто, как использовать любое другое свойство CSS.

img
{
     filter: type(value);
}

Как и большинство новых функций в CSS3, вам нужно использовать префиксы браузера.

img
{
     filter: type(value);
     -webkit-filter: type(value);
     -moz-filter: type(value);
     -ms-filter: type(value);
     -o-filter: type(value);
}

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

В настоящее время единственным браузером, который поддерживает это, является браузер Wekbit, так что Chrome и Safari.

Фильтры CSS поддерживаются в Chrome начиная с версии 21, а в Safari — с версии 6.

В настоящее время неизвестно, будут ли IE10 или Firefox версии 17 поддерживать эти свойства, но пока лучшим браузером для просмотра этих функций является webkit.

демонстрация

Это лучше всего видно в браузерах webkit.

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

Посмотрите демо, чтобы увидеть, что мы собираемся создать.

демонстрация

CSS Greyscale

Свойство Greyscale преобразует цвет в ваших изображениях в оттенок серого.

Значение свойства может быть десятичным или процентным. 100% или 1,0 сделают изображение полностью серым, 0% или 0 не добавят эффекта серого к изображению.

Вот HTML-код, который мы собираемся использовать.

<section class="grayscale">
<h2>CSS Greyscale</h2>
	<img height="200" src="images/water.jpg" />
</section>

Для CSS мы собираемся прикрепить свойства к изображениям внутри div. Сначала мы собираемся установить для значений полные оттенки серого, а затем при наведении на них удаляем все оттенки серого на изображениях.

.grayscale img
{
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}
.grayscale img:hover
{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}

CSS Blur

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

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

<section class="blur">
<h2>CSS Blur</h2>
	<img height="200" src="images/water.jpg" />
</section>

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

.blur img
{
	filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
}
.blur img:hover
{
	filter: blur(0);
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-o-filter: blur(0);
	-ms-filter: blur(0);
}

CSS Насыщенный

Эффект насыщения добавляет насыщенности цвета к цветам на ваших изображениях.

Значение, используемое в насыщении, может быть десятичным или процентным, нормальное значение насыщенности на ваших изображениях будет 100%. Чтобы добавить насыщенности вашему изображению, примените процент выше, чем 100%.

<section class="saturate">
<h2>CSS Saturate</h2>
	<img height="200" src="images/water.jpg" />
</section>

Это CSS для демонстрации насыщенности, мы используем значение 500%, а при событии при наведении изображения мы возвращаем изображение в нормальное состояние со значением 100%.

.saturate img
{
	filter: saturate(500%);
	-webkit-filter: saturate(500%);
	-moz-filter: saturate(500%);
	-o-filter: saturate(500%);
	-ms-filter: saturate(500%);
}
.saturate img:hover
{
	filter: saturate(100%);
	-webkit-filter: saturate(100%);
	-moz-filter: saturate(100%);
	-o-filter: saturate(100%);
	-ms-filter: saturate(100%);
}

CSS Sepia

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

<section class="sepia">
<h2>CSS Sepia</h2>
	<img height="200" src="images/water.jpg" />
</section>

Значение свойства сепия позволяет использовать как десятичные, так и процентные значения. 100% или 1,0 — это эффект полной сепии, а 0% или 0 вернут изображение в нормальное состояние.

.sepia img
{
	filter: sepia(1);
	-webkit-filter: sepia(1);
	-moz-filter: sepia(1);
	-o-filter: sepia(1);
	-ms-filter: sepia(1);
}
.sepia img:hover
{
	filter: sepia(0);
	-webkit-filter: sepia(0);
	-moz-filter: sepia(0);
	-o-filter: sepia(0);
	-ms-filter: sepia(0);
}

CSS Hue Rotate

Свойство Поворот оттенка изменит цвет вокруг, чтобы он стал совершенно другим в зависимости от значения градуса, которое вы ему предоставляете.

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

<section class="hue-rotate">
<h2>CSS Hue Rotate</h2>
	<img height="200" src="images/water.jpg" />
</section>

Значение этого будет принимать градусы, в норме 0 градусов. Если вы установите значение в 360 градусов, спектр обернется кругом и будет точно таким же.

.hue-rotate img
{
	filter: hue-rotate(180deg);
	-webkit-filter: hue-rotate(180deg);
	-moz-filter: hue-rotate(180deg);
	-o-filter: hue-rotate(180deg);
	-ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover
{
	filter: hue-rotate(0);
	-webkit-filter: hue-rotate(0);
	-moz-filter: hue-rotate(0);
	-o-filter: hue-rotate(0);
	-ms-filter: hue-rotate(0);
}

CSS Invert

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

Значение 100% установит полный инвертированный эффект.

<section class="invert">
<h2>CSS Invert</h2>
	<img height="200" src="images/water.jpg" />
</section>

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

.invert img
{
	filter: invert(1);
	-webkit-filter: invert(1);
	-moz-filter: invert(1);
	-o-filter: invert(1);
	-ms-filter: invert(1);
}
.invert img:hover
{
	filter: invert(0);
	-webkit-filter: invert(0);
	-moz-filter: invert(0);
	-o-filter: invert(0);
	-ms-filter: invert(0);
}

Яркость CSS

Свойство яркости просто изменит яркость, примененную к изображению, нормальное изображение начнется с 0%. Чтобы увеличить яркость изображения, вам нужно подняться выше 0%, поэтому измените его на 50%, чтобы увидеть изменение яркости.

<section class="brightness">
<h2>CSS Brightness</h2>
	<img height="200" src="images/water.jpg" />
</section>

Значение может быть десятичным или процентным, равным 100%, или 1 будет полной яркостью, 0% или 0 будет нормальным изображением.

.brightness img
{
	filter: brightness(50%);
	-webkit-filter: brightness(50%);
	-moz-filter: brightness(50%);
	-o-filter: brightness(50%);
	-ms-filter: brightness(50%);
}
.brightness img:hover
{
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-o-filter: brightness(100%);
	-ms-filter: brightness(100%);
}

CSS Contrast

Значение контрастности изменит разницу между самой светлой и самой темной частью изображения.

<section class="contrast">
<h2>CSS Contrast</h2>
	<img height="200" src="images/water.jpg" />
</section>

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

.contrast img
{
	filter: contrast(0.3);
	-webkit-filter: contrast(0.3);
	-moz-filter: contrast(0.3);
	-o-filter: contrast(0.3);
	-ms-filter: contrast(0.3);
}
.contrast img:hover
{
	filter: contrast(1);
	-webkit-filter: contrast(1);
	-moz-filter: contrast(1);
	-o-filter: contrast(1);
	-ms-filter: contrast(1);
}

CSS непрозрачность

Настройка непрозрачности изменит прозрачность изображения. Изменение непрозрачности изображения сделает изображение более прозрачным.

<section class="opacity">
<h2>CSS Opacity</h2>
	<img height="200" src="images/water.jpg" />
</section>

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

.opacity img
{
	opacity:0.3;
}
.opacity img:hover
{
	opacity:1;
}

Добавление дополнительной анимации при наведении курсора

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

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

img{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
img:hover{
	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-o-transform: scale(1.1);
  	transform: scale(1.1);
}

Чтобы увидеть все вышеперечисленные эффекты вместе, посмотрите демонстрацию.

CSS3 Фильтры изображений

Как использовать фильтры

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

демонстрация

демонстрация

CSS Greyscale

CSS Blur

CSS Насыщенный

CSS Sepia

CSS Hue Rotate

CSS Invert

Яркость CSS

CSS Contrast

CSS непрозрачность

Добавление дополнительной анимации при наведении курсора

демонстрация

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC