Настройка изображения с помощью CSS Filter Effects
Регулировка изображения яркость а также контрастировать, или превращение изображения в Оттенки серого или же Sephia это общая функция, которую вы можете найти в приложении для редактирования изображений, например Photoshop. Но теперь можно добавлять те же эффекты к веб-изображениям с помощью CSS..
Эта возможность основана на эффектах фильтра, которые еще находятся на стадии разработки проекта. Тем не менее, браузер Webkit, кажется, шаг вперед в реализации этой функции.
Итак, давайте попробуем, и мы будем использовать это изображение от Мехди Кх для демонстрации эффектов.
Эффекты
Применение эффектов очень просто. Посмотрите на фрагмент ниже, чтобы превратить изображения в полутоновой;
img -webkit-filter: оттенки серого (100%);
... и это для сепия аля инстаграм.
img -webkit-filter: сепия (100%);
Оба сепия и полутоновой значения указаны в процентах, где 100% это максимум и применение 0% оставит изображение неизменным, но если значение не указано явно, 100% будет принят по умолчанию.
Осветление изображения также возможно, и мы можем сделать это, используя яркость функционировать следующим образом;
img -webkit-filter: яркость (50%);
Эффект яркости работает как эффект контрастности и сепии выше, где значение 0% сохранит изображение как есть и применяя 100% полностью осветлит изображение, которое может показывать только пустую белую страницу вместо изображения.
Эффект яркости также допускает отрицательные значения, в котором это будет затемнять изображение.
img -webkit-filter: яркость (-50%);
... и мы можем настроить контраст изображения таким образом.
img -webkit-filter: контраст (200%);
Существует небольшая разница в том, как работает значение, как вы можете видеть выше, мы устанавливаем Контраст () от 200%, это потому что ценность 100% является отправной точкой, где изображение останется неизменным. Когда значение ниже 100%, скажем, 50%, изображение станет менее контрастным.
Кроме того, мы также можем объединить эффект в одном блоке объявления, как в примере ниже. Мы превращаем изображение в полутоновой и увеличить контрастировать на 50% одновременно.
img -webkit-filter: контраст в оттенках серого (100%), контраст (150%);
Сочетая фильтр с переходом CSS3, мы можем сделать изящное зависать эффект.
img: hover -webkit-filter: grayscale (0%); img: hover -webkit-filter: sepia (0%); img: hover -webkit-filter: яркость (0%); img: hover -webkit-filter: контраст (100%);
Наконец, есть еще один эффект, который мы можем попробовать; Gaussian Blur, который размывает целевой элемент.
img: hover -webkit-filter: blur (5px);
Как и в Photoshop, значение размытия указывается в пиксельном радиусе, и если значение не указано явно, значение 0 будет принято по умолчанию, а изображение останется без изменений..
Последняя мысль
На самом деле в спецификации гораздо больше эффектов. такие как Оттенок поворота, инвертировать а также насыщать, но я думаю, что они менее применимы в реальных веб-случаях. Таким образом, обсуждение было ограничено только четырьмя эффектами.
И, несмотря на обсуждение, применяемое к изображениям в этом учебном пособии, свойство может также применяться к любому элементу в DOM.
Наконец, вы можете посмотреть живую демоверсию по этим ссылкам ниже. Обратите внимание, что фильтр в настоящее время поддерживается только в Chrome 19 и выше.
- демонстрация
- Скачать исходный код
