CSS фильтры для фотографий на сайт

Редактор CSS фильтров к изображению для размещения на сайте. Применив фильтры к фотографии вы получите готовый код стилей <img>.

 

Применение стилей для фотографий:

  1. Добавьте ссылку на необходимую вам картинку.
  2. Настройте фильтры изображения передвигая ползунок
  3. Скопируйте полученный код изображения на свой сайт.

Ширина, px
Высота %
Описание картинки (Alt)

Размытие <img style="filter: blur(px);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Яркость <img style="filter: brightness(%);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Контрастность <img style="filter: contrast(%);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Оттенки серого <img style="filter: grayscale(%);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Изменение оттенков <img style="filter: hue-rotate(deg);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Непрозрачность <img style="filter: opacity(%);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Инвертировать <img style="filter: invert(%);" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >
Насыщать <img style="filter: saturate(%)" src="https://help2site.ru/4.jpg" alt="" width="px" height="px" >

Какие фильтры применяются для фотографий? Применение фильтров

  • Размытие (Blur) - эффект размытия лучше всего подходит для фонов блоков или других изображений. Благодаря размытому фону вы можете легко выразить свои идеи, поделиться своим настроением, добавив несколько значимых слов.
  • Яркость (Brightness) - это мера общего количества воспринимаемого света на изображении. Увеличение яркости изображения создает визуальное восприятие большего количества света и увеличение акцента на фото, излучаемого сценой на изображении, уменьшение яркости наоборот затемнит изображение и поможет подчеркнуть наложенный текст.
  • Контрастность (Contrast) - это разница в яркости или цвете, которая делает объект (или его представление на изображении или дисплее) различимым. При визуальном восприятии реального мира контраст определяется разницей в цвете и яркости объекта и других объектов в том же поле зрения.
  • Оттенки серого (Grayscale) - Изображения в градациях серого отличаются от однобитных двухтональных черно-белых изображений, которые в контексте компьютерной визуализации представляют собой изображения только с двумя цветами : черно-белые (также называемые двухуровневыми или двоичными изображениями ). Изображения в градациях серого имеют много промежуточных оттенков серого.
  • Изменение оттенков (Hue Rotate) - это когда указывается угол вокруг цветового круга, по которому будут корректироваться входные образцы цветов. Как это работает: HSL (что означает Hue Saturation Lightness) - это представление цветового пространства RGB компьютерной графики на основе оттенков. Модель HSL считается более интуитивной, чем модель RGB. Это связано с тем, что модель HSL позволяет вам выбрать базовый оттенок, а затем настроить его насыщенность и яркость по своему желанию. Выбор оттенка - это простой вопрос выбора пятна на цветовом круге. Например, красный - 0 градусов, синий - 240 градусов и т. д.
  • Непрозрачность (Opacity) - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности. По умолчанию установлено 100% - полная прозрачность.
  • Инвертировать (Invert) - заменять цвета изображения, где красный цвет меняется на голубой, зеленый - на пурпурный, а синий - на желтый, и наоборот. При этом светлые области изображения станут темными и наоборот.
  • Насыщать (Saturate) - регулировку насыщенности можно использовать как метод быстрого улучшения цвета изображений или фотографий. Увеличьте насыщенность, чтобы сделать цвета более интенсивными и выделить изображение. Уменьшите насыщенность, чтобы смягчить цвета и сделать изображение более полутоновым. Вы можете легко настроить значения насыщенности цвета с помощью простого ползунка в онлайн-редакторе.

Размыть фото

  1. Добавляем url фото в строку "Добавить фотографию".

    Примечание: фотография не загружается на наш сервер и не сохраняется у нас. Поэтому вы можете не беспокоиться за сохранность и конфиденциальность ваших изображений. Если у вас все равно есть опасения, то не добавляйте фотографию, просто при вставлении изображения замените значение src вставив в него необходимый url.

  2. Выберете необходимое размытие перемещая ползунок до нужного состояния. Результат виден на изображении слева.
  3. Скопируйте полученный код из окна "Готовый код", нажатием на кнопку "Скопировать код".
  4. Вставьте полученный код в нужное место на странице сайта (не в визуальном редакторе), нажатием правой кнопки мыши и выбрав "Вставить" (Win: Ctrl+V, Mac: Command-V).
  5. Готово. При необходимости подрегулируйте параметр blur(0px) до нужного значения.