Функции фильтра CSS

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

Основные функции CSS Filter Functions

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

  • Размытие
  • Яркость
  • Контрастность
  • Тень
  • Шкала серого
  • Оттенок Поворот
  • Инвертировать
  • Непрозрачность
  • Насыщенность
  • Сепия

Синтаксис функций фильтра CSS

Синтаксис функций фильтра CSS для большинства из них схож. Мы только добавляем свойство filter к нужному нам селектору. Затем мы добавляем в качестве значения функцию, которую нам нужно применить. Большинство значений похожи. В некоторых из них единственное, что варьируется, это единица стиля или количество параметров. Ниже мы покажем синтаксис функций CSS Filter.

#selector{
 filter: blur(3px);
}     /* Here we have  a 3px blur function*/

/* The code below shows the syntax for all the other functions */

filter: blur(3px);
filter: brightness(30%);
filter: contrast(70%);
filter: drop-shadow(3px 5px 2px blue);
filter: grayscale(75%);
filter: hue-rotate(30deg;) /* We can use rads or turns */
filter: invert(10%); 
filter: opacity(90%);
filter: saturate(125%);
filter: sepia( 30%);

Войти в полноэкранный режим Выйти из полноэкранного режима

Как мы уже говорили, функция и значения похожи. Единственное, что меняется, это единица измерения в некоторых из них. Если вы внимательно посмотрите код выше, то заметите, что blur, drop-shadow и hue-rotate имеют разные единицы измерения. Остальные используют проценты.

Непрозрачность как функция фильтра

Как вы, возможно, уже знаете, непрозрачность — это свойство CSS, которое мы можем использовать без фильтров. Значение непрозрачности — это число между 0 и 1. Значение 0 — полная непрозрачность, а значение 1 — отсутствие непрозрачности. Мы можем использовать непрозрачность как функцию фильтра CSS. Код выше показывает, что вместо 0 и 1 мы используем проценты для значений непрозрачности.

Фильтр «Тень

Как вы, наверное, знаете, в CSS можно создать тень для любого элемента с помощью свойства box-shadow или text-shadow. Чтобы создать другой эффект тени для любого HTML-элемента, мы можем использовать функции CSS Filter. Функция фильтра, которую мы используем, это функция drop-shadow(). Как вы можете заметить, эта функция может содержать три или четыре параметра. Первые три параметра — это смещения, а четвертый — цвет, который мы хотим использовать для тени. На примере ниже показан эффект от функции drop-shadow. Как видите, она отличается от box-shadow или text-shadow. Вы можете увидеть эффект на изображении. Как вы также можете видеть, мы можем использовать отрицательные числа, чтобы отбрасывать тень в противоположном направлении.

Эффект размытия

У нас также есть возможность добавить эффект размытия к любому свойству HTML с помощью функций CSS Filter. Как следует из названия, этот эффект размывает свойство. Функция blur — одна из функций, которая не использует проценты. Мы можем использовать пиксели или любые единицы измерения CSS (em, rem). В примере ниже показано, как размыть изображение с помощью функций фильтра. Как вы можете видеть, мы используем диапазон типов ввода и некоторые JavaScript. для того, чтобы увидеть вариации размытия. Вы можете видеть, что 0px не дает никакого эффекта, а максимальное размытие составляет 10px. Вы можете добавить максимум и единицу по своему усмотрению.

Поворот и инвертирование оттенка

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

Эффекты функции фильтра

В предыдущих примерах вы можете увидеть некоторые эффекты функций CSS Filter. Как вы можете заметить, большинство эффектов имеют цвет. Значение функций фильтрации простое. Поэтому в примере ниже мы покажем вам эффект большинства функций CSS Filter. Мы используем некоторые JavaScript и входы диапазона. Изменив входы диапазона, вы можете увидеть эффекты на изображении

Комбинирование функций CSS Filter

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

#selector{
   filter:  contrast(120%)  saturation(25%);  
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше пример синтаксиса показывает, как объединить только две функции фильтра. Вы можете комбинировать столько функций, сколько хотите, а не только две.

Создание собственного фоторедактора

В предыдущем разделе вы могли видеть, как применять каждый эффект функций CSS Filter. Затем вы увидели, что у вас есть возможность комбинировать их и применять все эффекты к одному элементу. Для примера мы создали простой фоторедактор с большинством эффектов функций CSS Filter. Мы также добавили немного JavaScript и использовали множество входов диапазона типов. Вы можете видеть, что код JavaScript немного шире. Это потому, что мы повторили некоторые переменные для каждой функции. Если вы хотите создать фоторедактор, подобный этому, вам достаточно объявить эти переменные как глобальные переменные. Также вы не сможете масштабировать или поворачивать изображение, потому что мы показываем только функции CSS Filter.

Если вы хотите масштабировать или поворачивать изображение, рекомендуем вам посмотреть наш учебник по переходам и анимации CSS Transform.

Глобальные значения функций CSS Filter

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

filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Войти в полноэкранный режим Выход из полноэкранного режима

Заключение

В этом уроке показано, как реализовать функции CSS Filter. Вы можете видеть, что эффект, который они вызывают, действительно хорош. Вы можете видеть, что мы также использовали много входов типа range. Все изображения, которые мы использовали в этом уроке, можно найти на Pixabay. Если вам нужна дополнительная информация о функциях CSS Filter, мы рекомендуем вам ознакомиться с Filters MDN.

Спасибо и надеемся, что вы узнали много нового из этого урока.

Больше по ссылке Moe’s Link

Оцените статью
devanswers.ru
Добавить комментарий