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

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

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

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

Вот генератор CSS-фильтра на теплом фото взгляде Нажмите на Пресет Теплое и Сгенерированный CSS считывает фильтр: яркость (105%) насыщение (140%) сепия (25%); с предварительным просмотром смещение в сторону янтаря. Перетащите размытие в 2px и линия становится фильтром: размытие (2px) яркость (105%) насыщение (140%) сепия (25%);.Нажмите Нет, или нажмите Сброс, и он возвращается к фильтру: нет;. Поскольку предварительный просмотр представляет собой образец фиксированного цвета, а не вашу собственную фотографию, проверьте скопированный CSS на реальном изображении, прежде чем отправлять его.

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