Вопросы Теги
Описание
Все вопросы "css-filters"

Выражения CSS были представлены в Internet Explorer 5.0, чтобы позволить выражению JavaScript быть присвоенным свойству CSS. Они больше не поддерживаются с Internet Explorer 8.0.

Ссылки

---------121 эффект последующей обработки--------61822----, такие как непрозрачность, градиенты и тени, которые могут быть применены к элементам с помощью свойств CSS3

Фильтры CSS выполняют последующую обработку эффекты, такие как непрозрачность, градиенты и тени, которые могут быть применены к элементам с помощью свойств CSS3

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

Свойство находится все еще в экспериментальной фазе и не было стандартизировано/стабилизировано. Ни одна из версий IE не поддерживает фильтры CSS в настоящее время, в то время как весь WebKit привел в действие потребность браузеров -webkit префикс.

Использование тега: Этот тег может быть добавлен к вопросам об использовании свойства фильтра, любых ошибок или различий относительно их работы через браузеры и т.д.

Примеры

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

  • Размытость - Этот фильтр применил бы Гауссову Размытость к изображению. Входной параметр является стандартным отклонением.

    #blur{ -webkit-filter: blur(2px); filter: blur(2px); }

  • Шкала полутонов - Этот фильтр преобразовал бы изображение в свою полутоновую версию.

    #grayscale{ -webkit-filter: grayscale(); filter: grayscale(); }

  • Падающая тень - Этот фильтр добавил бы тень к элементу. Требуется 2 обязательных параметра, которые являются смещениями в X, оси Y и 3 дополнительных параметра, которые являются радиусом размытия, радиусом распространения и цветом тени.

    #shadow { -webkit-filter: drop-shadow(5px 5px 5px gray); filter: drop-shadow(5px 5px 5px gray); }

  • Контраст

    #contrast{ filter: contrast(200%); }

  • Оттенок вращается

    #rotate{ filter: hue-rotate(90deg); }

Ссылки