CSS фильтры для изображений фото

CSS фильтры для изображений (фото)

В этой статье мы на примере рассмотрим использование 11 CSS фильтров, а именно:

-webkit-filter: blur — Добавляет эффект размытия изображения. Значение задается в пикселях (px).

-webkit-filter: grayscale — Конвертирует изображения в черно-белый цвет. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

-webkit-filter: drop-shadow — С оздает тень также как и CSS свойство box-shadow , но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

-webkit-filter: sepia — С оздает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

-webkit-filter: brightness — Данный фильтр и зменяет яркость изображения (фото). Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

-webkit-filter: contrast — Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

-webkit-filter: hue-rotate — Фильтр м еняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).

-webkit-filter: invert — Инвертирует цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

-webkit-filter: saturate — Этот CSS фильтр у правляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

-webkit-filter: opacity — Задает прозрачность изображения. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). Данный фильтр работает так же как и CSS свойство opacity . Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Источник

Эффекты для изображений на CSS

Фильтры CSS позволяют применять к изображениям эффекты, аналогичные фильтрам Photoshop.

Синтаксис свойства filter выглядит следующим образом:

Простой пример использования фильтра:

Параметры, которые может принимать свойство:

  • Размытие (blur) – эта функция размывает изображение. Чем больше значение, тем сильнее эффект размытия. Значение по умолчанию равно 0.
  • Яркость (brightness) – значение 0% сделает изображение абсолютно черным, 100% оставит его без изменений, а более – повысит яркость.
  • Контрастность (contrast) – значение 0% сделает изображение полностью серым, 100% оставит исходное изображение без изменений, больше – повысит контрастность.
  • Тень (drop-shadow) –создает эффект тени на изображении. Функция принимает один из следующих параметров:
    • Горизонтальная тень (Н-shadow) – обязательный параметр. Он устанавливает смещение тени по горизонтали. Отрицательное значение задает сдвиг тени влево.
    • Вертикальная тень (V-shadow) – обязательный параметр. Задает смещение тени по вертикали. Отрицательное значение сдвигает тень вверх.
    • Цвет (color) – необязательный параметр. Если он не указан, браузер добавляет определенный цвет к тени.
    • Растяжение (spread) – необязательный параметр. Устанавливается в пикселях. Положительное значение растягивает тень, а отрицательное – сжимает.

    Исходное изображение, которое мы будем изменять с помощью фильтров CSS, выглядит следующим образом:

    Filter: saturate

    Первое значение свойства filter меняет цветовую насыщенность изображения.

    Filter: grayscale

    Ниже приведен пример использования CSS-фильтра grayscale:

    Filter: sepia

    Следующий пример демонстрирует эффект, полученный от применения фильтра sepia:

    Filter: blur

    Пример использования фильтра blur:

    Filter: opacity

    В следующем примере показано, как работает фильтр opacity:

    Filter: invert

    Следующий пример использует CSS-фильтр invert:

    Filter: brightness

    Ниже показан пример использования фильтра brightness:

    Filter: contrast

    Пример применения фильтра contrast:

    Filter: hue-rotate

    CSS-фильтр hue-rotate позволяет создавать удивительные эффекты. Пример использования функции с тремя разными параметрами:

    Filter: shadow

    Примеры использования фильтра shadow продемонстрированы ниже:

    Комбинация фильтров

    В примере, приведенном ниже, для получения эффекта инфракрасного изображения, используются два фильтра: hue-rotate и saturate:

    Заключение

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

    Источник

    

    CSS фильтры изображений

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

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

    Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.

    Поддержка CSS фильтров браузерами

    В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.

    Браузер Explorer Chrome Firefox Safari Opera Android iOS
    Версия no 31+ 35+ 7+ 18+ 4.4+ 6+
    filter (-webkit-) + (-webkit-) (-webkit-) (-webkit-) (-webkit-)

    Функции и синтаксис CSS фильтров

    Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.

    Синтаксис

    Список фильтров

    Фильтр Описание
    blur (px) Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0.
    drop-shadow () Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают.
    grayscale (%) Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0.
    brightness (%) Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%).
    contrast (%) Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%).
    hue-rotate (deg) Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу.
    invert (%) Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра.
    saturate (%) Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения.
    sepia (%) Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания.
    opacity (%) Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра.
    url () CSS ссылка на SVG элемент с определенным идентификатором #id.
    initial Устанавливает значение свойства по умолчанию.
    inherit Наследует все значения свойства своего родительского элемента.

    Примеры CSS filters

    Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.

    Фильтр размытия [blur]

    В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.

    В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр тень [drop-shadow]

    Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

    Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента. Посмотреть пример.

    Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр обесцвечивания [grayscale]

    Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр яркости [brightness]

    Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр контрастности [contrast]

    Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр тона цвета [hue-rotate]

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

    Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр инверсия [invert]

    Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр насыщенность [saturate]

    Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр сепия [sepia]

    Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр прозрачность [opacity]

    Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр ссылка [url]

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

    Использование нескольких фильтров

    Заключительный пример включает в себя комбинирование фильтров (от двух и более), что позволяет добиться еще лучшего результата. Делается это очень легко, достаточно лишь через пробел перечислить желаемые фильтры.

    Оригинал
    Фильтр
    Hover-эффект

    Фильтр DuoTone [двухцветная модель]

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

    Но стоит обратить внимание на то, что эта библиотека построена только средствами CSS, из-за чего эти визуальные эффекты поддерживают еще меньше число браузеров ( посмотреть таблицу ).

    фильтр DuoTone

    Генератор CSS filters

    Уже давно повелось создавать генераторы различных CSS свойств. Генераторы градиентов, CSS кнопок и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:

    Заключение

    Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.

    Источник

    2.26. CSS3-фильтры

    CSS3-фильтры предназначены для задания специальных эффектов различным html-блокам (в том числе и картинкам IMG). По своему виду они частично похожи на встроенные фотошоповские. СSS фильтры можно применять как к изображениям, так и к другим элементам разметки, которые содержат некоторый контент (не являются пустыми).

    Среди классических фильтров в 3-ей версии каскадных стилей есть возможность их задания с помощью SVG, которые подгружаются при инициализации DOM-структуры. Однако, они поддерживаются в основном в линейке самых последних версий веб-обозревателей. При рендеринге браузер делает копию SVG-объекта и отрисовывает применяемый эффект по пикселям поверх оригинального. Используя совместно разные фильтры можно добиться нужных уникальных спецэффектов. Однако, следует помнить, что чем больше спецэффектов Вы примените, тем дольше браузер будет отрисовывать их на странице.

    Каскадные стили позволяют использовать сразу несколько фильтров.

    Поддержка браузеров

    Приведем версии обозревателей, начиная с которых эффекты поддерживаются:

    IE: —
    Edge: 13.0 кроме url()
    Firefox: 35.0
    Chrome: 18.0 -webkit-
    Safari: 9.1, 6.0 -webkit-
    Opera: 40.0, 15.0 -webkit-
    Safari: 9.3, 6.1 -webkit-
    Android Browser: 53.0, 4.4 -webkit-
    Chrome (андройдовый): 55.0, 47.0 -webkit-

    Список доступных

    filter
    blur() В качестве входной переменной (радиуса размытия) указывается числовое значение в разных единицах: пикселях (px), относительных единицах (em), в точках (pt) и других. Эффект основывается на гаусовском размытии объекта относительно его оригинала. Чем больше значение задаваемого параметра, тем сильнее будет размывание. Дефолтное значение — 0.
    Пример записи
    filter: blur(10px);
    brightness() Это свойство позволяет изменять яркость html-блока, к которому она применяется. В качестве передаваемого параметра указывается цифровое значение от 0 до 100 в процентах (%) или десятичное число от 0 до 1 (то есть 0, 0.1, 0.2 и так далее). Чем больше значение параметра, тем большую яркость будет иметь объект. По умолчанию равно 1.
    Пример записи
    filter: brightness(62%);
    filter: brightness(0.62);
    contrast() Влияет на контраст html-блока, к которому применяется. Входной переменной выступает число от 0 до бесконечности в процентах или десятичная цифра от 0 до бесконечности. По умолчанию входной параметр равен 100% (эквивалент 1). В диапазоне от 0 до 100% (от 0 до 1) объект перекрашивается от темных тонов до оригинала, а в диапазоне выше 100% (выше 1), цветовая палитра выходит за пределы оригинала и стремится к белому цвету.
    Пример записи
    filter: contrast(33%);
    filter: contrast(0.33);
    drop-shadow() Эта функция позволяет задать объекту тень. Она работает подобно css-правилам box-shadow и text-shadow. В качестве входных переменных задаются: смещение по горизонтали, по вертикали, размытие, растяжение и цвет тени. При задании этого свойства он применяется не только к самому объекту, но и к объектам внутри него (например, к расположенному внутри html-блока тексту и т.д.).
    Синтаксис
    filter: drop-shadow(10px 13px 7px green);
    grayscale() Переводит объект с текущей цветовой палитрой в черно-белый диапазон цветов. Входной параметр — это десятичное число от 0 до 1 или число в процентах. При увеличении входного параметра, чернобелость усиливается.
    Синтаксис
    filter: grayscale(0.6);
    filter: grayscale(60%);
    hue-rotate() Это свойство изменяет оттенок объект про круговой палитре цветов. Входным параметром выступает числовое значение от 0 до 360 в градусах (deg). При входном нуле не применяется.
    Синтаксис
    filter: hue-rotate(270deg);
    invert() Эта функция инвертирует цветовую гамму объекта, делая его похожим на негатив. Входным значением может быть числовое значение от 0 до 100 в процентах (%). При нулевом значении объект не изменяется, а при 100% его цветовая палитра полностью инвертируется.
    Синтаксис
    filter: invert(100%);
    opacity() Этот эффект работает подобно css-правилу opacity, изменяя прозрачность объекта. В качестве входного параметра указывается цифровое значение от нуля до ста в процентах (%). При нулевом значении объект станет полностью прозрачным, а при 100% будет полностью видимым.
    Синтаксис
    filter: opacity(44%);
    saturate() Эта функция позволяет управлять насыщенностью объекта с опорой на его контрастность. В качестве входного параметра задается цифровое значение от 0 до бесконечности в процентах или десятичная цифра от 0 до бесконечности (0, 0.1, 0.2, … ). При нулевом значении насыщенность уменьшится до самого низкого уровня. В диапазоне от 0 до 100 — уменьшается, а в диапазоне выше 100% — увеличивается. Единица эквивалентна 100%.
    Синтаксис
    filter: saturate(22%);
    sepia() Эта функция позволяет состарить html-объект или придать ему ретро-эффект. В качестве передаваемой переменной задается цифровое значение от 0 до 100 в процентах (%). По мере увеличения параметра эффект увеличивается.
    Пример записи
    filter: sepia(178%);
    url() В качестве параметра передается путь к SVG файлу, или якорь к фильтру, который располагается в html-теле текущего документа.
    Пример записи
    filter: url(#id); — указываем айдишник фильтра в html-структуре текущего документа;
    filter: url(yourfilter.svg#id); — указываем на айдишник фильтра (якорь) в свгешном файле yourfilter.svg
    none Указав такой параметр, никакие спецэффекты применены не будут.
    initial Задав так, рассматриваемое свойство установится в значение по умолчанию.
    inherit Задав так, текущий объект унаследует данное свойство у своего родителя.

    Примеры

    Рассмотрим все, описанное выше, на примере применения к некоторой картинке. Свойств будем применять при наведении на нее: :hover . Для большей наглядности сделаем плавное применение свойства, дописав дополнительное правило: transition: 0.6s ease-in-out; .

    Наведите курсор мыши на картинку:

    2. Изменение яркости

    5. Изменение насыщенности

    7. Изменение тональности по кругу

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

    Источник

    Читайте также:  Tadaa SLR или как делать фото с эффектом боке размытый фон как на iPhone 7 Plus 8 Plus на старых устройствах