filter¶
Применяет различные фильтры к изображению
.colorize-pink {
filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
.colorize-navy {
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.colorize-blue {
filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
brightness()¶
Яркость
filter: brightness([ number | percentage ]);
img {
filter: brightness(3);
filter: brightness(0.5);
filter: brightness(20%);
}
drop-shadow()¶
Тень
filter: drop-shadow(length{2,3} color?)
img {
filter: drop-shadow(5px 5px 5px #333);
}
grayscale()¶
Оттенки серого
filter: grayscale([ number | percentage ]);
img {
filter: grayscale(70%);
filter: grayscale(0.7);
}
invert()¶
Инверсия
filter: invert([ number | percentage ]);
img {
filter: invert(70%);
filter: invert(0.7);
}
opacity()¶
Прозрачность
filter: opacity([ number | percentage ]);
img {
filter: opacity(70%);
filter: opacity(0.7);
}
saturate()¶
Насыщенность
filter: saturate([ number | percentage ])
img {
filter: saturate(3);
filter: saturate(200%);
}
sepia()¶
Сепия, раскрашивает картинку в красно-коричневых тонах.
filter: sepia([ number | percentage ])
img {
filter: sepia(70%);
filter: sepia(0.7);
}
url()¶
#svg-filter {
display: none;
}
img {
filter: url(#svg-blur);
}