Генератор фильтра CSS

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

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

Все происходит в вашем браузере. Начните с пресета, например, в Vintage или Grayscale, точно настройте каждую функцию и скопируйте объявление. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Фильтры применяются в написанном порядке, и порядок изменяет результат: оттенки серого, затем сепия не то же самое, что сепия, а затем оттенки серого, потому что первый удаляет цвет, который второй оттеняет. Гоча, которую стоит знать, является структурной, а не визуальной. Любой элемент с фильтром, отличным от него, становится блоком, содержащим его фиксированных и абсолютно расположенных потомков, поэтому выпадающий или модальный внутри отфильтрованного родителя будет располагаться против этого родителя, а не в окне просмотра. Это также создает новый контекст стекирования, который может нарушить порядок z-индекса, который работал раньше. Если фильтр нарушает макет таким образом, что выглядит не связанным с внешним видом, то почти всегда поэтому. Фильтры ускоряются графическим процессором в большинстве браузеров, но большие радиусы размытия на больших элементах остаются дорогими.