Фильтры в 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
