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

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

19 марта 2020 CSS

Фильтры CSS — это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов.

Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, изменение контраста и даже цвета элемента.

CSS фильтры. Создание и использование

Чёрно-белый фильтр

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

Чтобы использовать этот фильтр, нам просто нужно:

img {
    -webkit-filter: grayscale(1);
}

Как вы можете видеть, в настоящее время вам нужен префикс webkit (пока эта функция доступна только в браузерах webkit), ключевое слово filter, а затем имя фильтра с указанием того, сколько его нужно добавить в элемент.

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

Размытие

Что-то, что всегда отлично выглядит на изображении, это размытие, давайте теперь добавим размытие:

img {
	-webkit-filter: grayscale(0.5) blur(2px);
}

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

Пока все просто, правда?

Контраст

Если вы хотите использовать фильтры, подобные Photoshop, CSS также подойдет для этого. Давайте начнем с контраста. Применить контраст к изображению так же просто:

img {
	-webkit-filter: contrast(300%);
}

В случае использования контраста вы должны представить 100% как начальную точку, если вы установите значение 100%, изображение никак не изменится, если сделаете меньше, чем это значение, например 50%, контраст уменьшится, более 100%, например 150%, сделают изображение более ярким.

Поворот цвета

Еще один очень интересный фильтр, который есть в нашем распоряжении, это hue-rotate, он очень похож на фильтр «Оттенок/Насыщенность» в Photoshop.

img {
	-webkit-filter: hue-rotate(180deg);
}

Для этого фильтра нам нужно использовать градусы, чтобы установить значение, поначалу это может показаться немного запутанным, но этот фильтр принимает значение цвета каждого пикселя и вращает его вокруг цветового круга. Таким образом, если ваш пиксель синего цвета и вы поворачиваете оттенок на 180 градусов, он станет оранжевым.

Насыщенность

В нашем распоряжении также есть еще один эффект насыщенности, широко используемый в Photoshop. Использование этого фильтра со значением выше 100% сделает цвета в вашем элементе более яркими, так как этот фильтр также использует 100% в качестве начальной точки:

img {
	-webkit-filter: saturate(300%);
}

Сепия

И, конечно, у нас есть другие фильтры, такие как сепия, которые работают аналогично фильтру в оттенках серого, где вы вводите значение от 0 до 1:

img {
	-webkit-filter: sepia(0.5);
}

Прозрачность

У нас также есть прозрачность, и она также работает со значениями от 0 до 1:

img {
	-webkit-filter: opacity(0.8);
}

Инвертирование

Еще один фильтр, который у нас есть — инвертирование, который инвертирует цвета на вашем элементе, поэтому, если вы установите значение 100%, результат будет выглядеть как негатив фото, значения устанавливаются в диапазоне от 0% до 100%.

img {
	-webkit-filter: invert(100%);
}

Тень

У фильтра drop-shadow схожая функциональность с фильтром box-shadow и он принимает те же значения. Основное отличие состоит в том, что при применении к изображениям в формате .png с прозрачным фоном тень будет отбрасываться вокруг пикселей, а не контура изображения .png. Эта версия фильтра также имеет аппаратное ускорение.

Яркость

И наконец, у нас есть яркость, и это тоже самое, что вы, вероятно, уже использовали в Photoshop ранее. Этот фильтр принимает 100% в качестве начального значения, если вы установите его на 100%, ничего в элементе не изменится, значение 0% сделает ваш элемент черным и значение 200% сделают его в два раза ярче:

img {
	-webkit-filter: brightness(200%);
}

Заключение

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

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как использовать animate.css

Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее

Как сделать прогресс бар на CSS

Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все будет загружаться мгновенно. Он служит для уведомления пользователя о ходе выполнения конкретной задачи на вашем веб-сайте, такой как загрузка, выгрузка, загрузка приложения и т.д. Раньше Читать далее

Прижать футер с помощью Flexbox

Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее

CSS animation

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

CSS transition

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

Использование функции CSS calc()

С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее

Добавить комментарий

*

code