CSS фильтры для изображений (фото)

В этой статье мы на примере рассмотрим использование 11 CSS фильтров, а именно:

-webkit-filter: blur — Добавляет эффект размытия изображения. Значение задается в пикселях (px).

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

-webkit-filter: drop-shadow — Создает тень также как и CSS свойство box-shadow, но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

-webkit-filter: sepia — Создает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

-webkit-filter: brightness — Данный фильтр изменяет яркость изображения (фото). Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

-webkit-filter: contrast — Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

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

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

-webkit-filter: saturate — Этот CSS фильтр управляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

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

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<h1>CSS Фильтры</h1>
<div class="imageholder">
 <img class="img" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img blur" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img grayscale" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img dropshadow" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img sepia" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img brightness" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img contrast" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img hue-rotate" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img invert" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img saturate" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
 <img class="img opacity" src="https://s3.amazonaws.com/ooomf-com-files/Vgu1RUfKT3WN1ZYxSWaR_14672519443_13d8873062_k.jpg">
</div>

CSS

body {
 background-color: #ededed;
}

h1 {
 text-align: center;
 font-family: "Oswald", sans-serif;
 font-size: 32px;
 text-transform: uppercase;
}

.imageholder {
 width: 80%;
 margin: 0px auto;
 padding: 0px;
}
.imageholder img {
 width: 20%;
 padding: 0px;
 margin: 0px;
 margin-right: 4.671%;
}
.imageholder .blur {
 -webkit-filter: blur(2px);
}
.imageholder .grayscale {
 -webkit-filter: grayscale(1);
}
.imageholder .dropshadow {
 -webkit-filter: drop-shadow(12px 12px 20px black);
}
.imageholder .sepia {
 -webkit-filter: sepia(1);
}
.imageholder .brightness {
 -webkit-filter: brightness(2.3);
}
.imageholder .contrast {
 -webkit-filter: contrast(10);
}
.imageholder .hue-rotate {
 -webkit-filter: hue-rotate(120deg);
}
.imageholder .invert {
 -webkit-filter: invert(1);
}
.imageholder .saturate {
 -webkit-filter: saturate(8.1);
}
.imageholder .opacity {
 -webkit-filter: opacity(0.6);
}