CSS: Filters

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

• blur()— применяет к элементу размытие по Гауссу (px)
• brightness()— влияет на яркость изображения. (0% - 100%)
• contrast()— изменяет контрастность изображения. (0% - 100%)
• drop-shadow()— ведёт себя похожим образом наbox-shadow(), но, применяясь к изображению с прозрачным фоном или сложной геометрической фигуре, образует тень, обтекающую именно фигуру, а не блок. Пример:filter: drop-shadow(1px 1px 5px 0 black);
• grayscale()— делает изображение чёрно-белым. (0% - 100%)
• hue-rotate()— вращает цвета изображения по HSL-кругу. (0deg - 360deg)
• invert()— создаёт негатив изображения. (0% - 100%)
• opacity()— ведёт себя так же, как и обычное свойство opacity, изменяя прозрачность изображения. (0% - 100%)
• saturate()— устанавливает насыщенность дл изображения. (0% - 100%)
• sepia()— имитирует эффект "старинного снимка". (0% - 100%)
• url()— принимает ссылку на SVG-фильтр и применяет этот фильтр к изображению.

Этот пример от html5book наглядно демонстрирует возможности фильтров: CSS3 Filters

Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues