Редактор CSS фильтров к изображению для размещения на сайте. Применив фильтры к фотографии вы получите готовый код стилей <img>.
Применение стилей для фотографий:
- Добавьте ссылку на необходимую вам картинку.
- Настройте фильтры изображения передвигая ползунок
- Скопируйте полученный код изображения на свой сайт.
[siteorigin_widget class=»WP_Widget_Custom_HTML»][/siteorigin_widget]
Какие фильтры применяются для фотографий? Применение фильтров
- Размытие (Blur) — эффект размытия лучше всего подходит для фонов блоков или других изображений. Благодаря размытому фону вы можете легко выразить свои идеи, поделиться своим настроением, добавив несколько значимых слов.
- Яркость (Brightness) — это мера общего количества воспринимаемого света на изображении. Увеличение яркости изображения создает визуальное восприятие большего количества света и увеличение акцента на фото, излучаемого сценой на изображении, уменьшение яркости наоборот затемнит изображение и поможет подчеркнуть наложенный текст.
- Контрастность (Contrast) — это разница в яркости или цвете, которая делает объект (или его представление на изображении или дисплее) различимым. При визуальном восприятии реального мира контраст определяется разницей в цвете и яркости объекта и других объектов в том же поле зрения.
- Оттенки серого (Grayscale) — Изображения в градациях серого отличаются от однобитных двухтональных черно-белых изображений, которые в контексте компьютерной визуализации представляют собой изображения только с двумя цветами : черно-белые (также называемые двухуровневыми или двоичными изображениями ). Изображения в градациях серого имеют много промежуточных оттенков серого.
- Изменение оттенков (Hue Rotate) — это когда указывается угол вокруг цветового круга, по которому будут корректироваться входные образцы цветов. Как это работает: HSL (что означает Hue Saturation Lightness) — это представление цветового пространства RGB компьютерной графики на основе оттенков. Модель HSL считается более интуитивной, чем модель RGB. Это связано с тем, что модель HSL позволяет вам выбрать базовый оттенок, а затем настроить его насыщенность и яркость по своему желанию. Выбор оттенка — это простой вопрос выбора пятна на цветовом круге. Например, красный — 0 градусов, синий — 240 градусов и т. д.
- Непрозрачность (Opacity) — это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности. По умолчанию установлено 100% — полная прозрачность.
- Инвертировать (Invert) — заменять цвета изображения, где красный цвет меняется на голубой, зеленый — на пурпурный, а синий — на желтый, и наоборот. При этом светлые области изображения станут темными и наоборот.
- Насыщать (Saturate) — регулировку насыщенности можно использовать как метод быстрого улучшения цвета изображений или фотографий. Увеличьте насыщенность, чтобы сделать цвета более интенсивными и выделить изображение. Уменьшите насыщенность, чтобы смягчить цвета и сделать изображение более полутоновым. Вы можете легко настроить значения насыщенности цвета с помощью простого ползунка в онлайн-редакторе.
Размыть фото
- Добавляем url фото в строку «Добавить фотографию».
Примечание: фотография не загружается на наш сервер и не сохраняется у нас. Поэтому вы можете не беспокоиться за сохранность и конфиденциальность ваших изображений. Если у вас все равно есть опасения, то не добавляйте фотографию, просто при вставлении изображения замените значение src вставив в него необходимый url.
- Выберете необходимое размытие перемещая ползунок до нужного состояния. Результат виден на изображении слева.
- Скопируйте полученный код из окна «Готовый код», нажатием на кнопку «Скопировать код».
- Вставьте полученный код в нужное место на странице сайта (не в визуальном редакторе), нажатием правой кнопки мыши и выбрав «Вставить» (Win: Ctrl+V, Mac: Command-V).
- Готово. При необходимости подрегулируйте параметр blur(0px) до нужного значения.