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


Содержание

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

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

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

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

ZorNet.Ru — портал для вебмастера

Наведите на картинку, чтобы увидеть фильтры в действии

фильтр: размытие (3 пикселя)

  • фильтр: яркость (40%)
  • фильтр: контраст (10%)
  • фильтр: оттенки серого (.75)
  • фильтр: насыщенный (300%)
  • фильтр: сепия (100%)
  • фильтр: оттенок-поворот (270 градусов)
  • фильтр: инвертированный (100%)
  • фильтр: непрозрачность (50%)
  • filter: url(#posterize)
  • На demo странице можете посмотреть как все работает, также на картинке покажется значение, по которому появляется эффект, где можно заметить, что прибавить в плюс или сделать менее заметным, но это все уже создается после, как все установили.

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

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

    Эффекты CSS-фильтров

    В данной статье рассматриваются API , которые еще не полностью стандартизированы и все еще продолжают развиваться. Будьте осторожны при использовании экспериментальных API , в собственных проектах.

    Введение

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

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

    Прошлое, настоящее и будущее эффектов фильтров

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

    У Роберта O’Каллахана из Mozilla возникла блестящая идея — использовать SVG фильтры путем применения CSS к « обычному » HTML -контенту.

    Роберт разработал прототип, который показал, насколько мощными возможностями может обладать комбинация фильтров и стилей CSS . Рабочие группы W3C , занимавшиеся CSS и SVG , решили упорядочить через CSS -стили использование фильтров как для HTML , так и для SVG , и таким образом родилось свойство CSS — « filter «.

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

    Новая жизнь свойства CSS «filter»

    Веб-разработчики иногда переживают дежавю, когда видят « filter » в стилях CSS . Это связано с тем, что старые версии Internet Explorer имели свойство « filter », реализуемое через CSS для обеспечения некоторых функций платформы. Это было старое определение стандарта свойства « filter », которое теперь является частью CSS3 .

    Поэтому, когда вы видите « filter » в среде некоторых старых веб-страниц, не путайте его с новыми фильтрами. Новое свойство « filter » — это объект, в котором происходят все преобразования, и новые версии IE реализуют его так же, как и все остальные современные браузеры.

    Как работают фильтры

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

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

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

    Еще один образ, который можно представить — это фильтр, помещенный на объектив фотокамеры. Вы видите через объектив камеры внешний мир, измененный эффектом фильтра.

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

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

    Фильтры, определяемые с помощью SVG и CSS

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

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

    Большинство CSS -фильтров может быть выражено в терминах фильтров SVG , и CSS также позволяет ссылаться на фильтр, определенный в SVG .

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

    Как применять CSS-фильтр

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

    и тогда все содержимое внутри всех элементов

    Большинство фильтров используют определенную форму параметра для регулировки того, насколько интенсивно применяется фильтр.

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

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

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

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

    Какие эффекты фильтров доступны через CSS

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

    Давайте рассмотрим каждый из них и разберемся, что они делают.

    grayscale(amount)

    Этот фильтр переводит цвета входящего изображения в оттенки серого. « amount » указывает, на сколько процентов применяется данный фильтр. Если « amount » равно 100%, то все цвета будут представлены в оттенках серого, если это 0% — цвета остаются неизменными.

    Вы можете использовать для определения значения число с плавающей точкой, если предпочитаете обойтись без процентов. То есть, 0 обозначает то же, что и 0%, 1.0 — 100%:

    sepia(amount)

    Этот фильтр передает цвета с оттенками сепии, как на старых фотографиях. « amount » используется так же, как и для фильтра grayscale .

    А именно: 100% делает все цвета полностью представленными в оттенках сепии, меньшие значения позволяют применить эффект не так интенсивно:

    saturate(amount)

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

    Данный эффект также позволяет использовать значение, превышающее 100%, чтобы действительно подчеркнуть насыщенность. Определенно это тот эффект, который может сделать изображения действительно потрясающими!

    hue-rotate(angle)

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

    Этот эффект сдвигает все исходные цвета на определенный угол, который задается параметром « angle «. Это, конечно, упрощенное представление того, что делает этот фильтр, но, надеюсь, вы приблизительно улавливаете логику:

    invert(amount)

    Этот эффект переворачивает цвета — так что, если параметр « amount » равен 100%, результат будет выглядеть как негатив пленки старого фотоаппарата! Аналогично предыдущим фильтрам, используя значения меньше 100%, мы можем регулировать интенсивность применения фильтра:

    opacity(amount)

    Если вы хотите, чтобы контент выглядел полупрозрачным, этот фильтр — то, что вам нужно. Значение «amount» определяет, насколько прозрачным будет содержимое страницы. Так значение 100% устанавливает полную непрозрачность, то есть изображение на входе будет аналогично выходному изображению.

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

    « amount » 0% означает, что изображение полностью исчезнет — но обратите внимание, вы все равно можете задавать для них отслеживание событий, таких как клик мыши и т.д. Это возможно даже для полностью прозрачных объектов. Что удобно, если вы хотите создать интерактивные области, в которых совсем ничего не будет отображаться.

    Этот фильтр работает так же, как свойство « opacity », которое вы уже знаете. Как правило, для свойства CSS « opacity » не применяется аппаратное ускорение, но некоторые браузеры, реализующие фильтры с использованием аппаратного ускорения, для большей производительности ускоряют версию фильтра непрозрачности:

    brightness(amount)

    Этот эффект действует, как регулировка яркости в телевизоре. Он изменяет цвета от полностью черного до первоначального цвета пропорционально заданному параметру « amount «.

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

    Конечно, вы можете продолжить — установив что-то вроде 200%, вы получите изображение в два раза более яркое, чем оригинал — отличный способ для обработки снимков, сделанных при низкой освещенности!

    contrast(amount)

    Еще одна функция управления из телевизора! Этот фильтр корректирует разницу между самыми темными и самыми светлыми частями входного изображения. Если вы используете 0%, в итоге получите черный фон, как и в случае с « brightness », это не слишком интересно.

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

    blur(radius)

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

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

    Параметр « radius » влияет на то, как много пикселей на экране смешиваются друг с другом. Чем больше его значение, тем сильнее размытие. Ноль, конечно, оставляет изображение без изменений:

    drop-shadow(shadow)

    Хорошо иметь в распоряжении эффект, который дает возможность сделать так, чтобы контент выглядел, будто он расположен на солнце, которое отбрасывает тень на землю позади него. И это, конечно, достигается с помощью фильтра « drop-shadow ».

    Илон Маск рекомендует:  Простой парсер статистики Liveinternet на PHP. Практика!

    Он делает снимок изображения, переводит его в один цвет, размывает, а затем немного компенсирует результат так, что это выглядит, как тень от исходного контента. Параметр « shadow » на самом деле является немного более сложным, чем просто одно значение. Это ряд значений, разделяемых пробелом — и некоторые значения являются необязательными!

    «s hadow » задает такие параметры, как расположение тени, степень размытия, цвет тени и т.д. Для получения полной информации о том, что задается значениями параметра « shadow », ознакомьтесь со спецификацией « box-shadow » CSS3 Backgrounds .

    Несколько примеров, приведенных ниже, должны дать вам представление о том, какие варианты эффектов доступны с помощью этого фильтра:

    Это еще одна операция с фильтрами, которая похожа на существующий CSS функционал, доступный через свойство ‘ box-shadow ’. Использование этого фильтра означает, что в некоторых браузерах вы можете оптимизировать его работу с помощью аппаратного ускорения, как это было описано в разделе « opacity ».

    Фильтры url-адресов, связанных с SVG

    Поскольку фильтры изначально были созданы, как часть SVG , вполне логично, что вы можете укладывать контент с помощью SVG -фильтров. С помощью возможностей, которые на сегодняшний день обеспечивает свойство « filter », это делается очень просто.

    Все фильтры SVG определены с помощью атрибута ‘ ID ‘, который можно использовать, чтобы ссылаться на конкретный эффект фильтра. Таким образом, все, что вам нужно сделать, чтобы использовать любой SVG -фильтр из CSS , это разместить на него ссылку при помощи синтаксиса ‘ url ’.

    Например, SVG -разметка для фильтра может представлять собой примерно следующее:

    А в CSS вы можете разместить такой простой код:

    И вуаля! Все блоки

    custom (ожидается вскоре)

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

    Эта часть спецификации « filter » все еще находится в стадии обсуждения, но как только она будет реализована в большинстве популярных браузеров, мы обязательно подробно ее опишем.

    Вопросы производительности

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

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

    Во-первых, не все фильтры одинаковы! На самом деле, большинство фильтров работают быстро на любой платформе и очень незначительно влияют на производительность.

    Тем не менее, фильтры, которые выполняют различные виды размытия, как правило, медленнее, чем другие. Это относится к таким эффектам, как ‘ blur ’ и ‘ drop-shadow ’. Это, конечно, не означает, что вы не должны их использовать, просто нужно понимать, как они работают.

    Когда вы применяете фильтр ‘ blur ’, для генерации эффекта размытия он смешивает цвета из разных пикселей по всему выходному изображению. Так, скажем, если параметр ‘ radius ’ равен 2, то для генерации смешанных цветов фильтр должен обрабатывать 2 пикселя в каждом направлении от каждого исходного пикселя.

    Так как это делается для каждого исходного пикселя, то автоматически это означает большое количество расчетов. И чем больше радиус, тем больше расчетов. Поскольку ‘ blur ’ обрабатывает пиксели в каждом из направлений, удвоение радиуса означает, что должно быть обработано в 4 раза больше пикселей.

    То есть каждое увеличение радиуса в два раза влечет за собой замедление работы в четыре раза. Фильтр ‘ drop-shadow ’ содержит эффект ‘ blur ’ как одну из составляющих частей обработки объектов. Поэтому он ведет себя так же, как и ‘ blur ’, когда вы изменяете части ‘ radius ’ и ‘ spread ’ параметра ‘ shadow ’.

    Однако с ‘ blur ’ на самом деле не все так плохо, так как на некоторых платформах можно использовать графический процессор для его ускорения. Но это доступно не во всех браузерах.

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

    Если вы используете ‘ url ’ фильтры, ссылающиеся на SVG -фильтры, они могут содержать любые произвольные эффекты фильтров, и поэтому также могут работать медленно.

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

    Доступность в современных браузерах

    На данный момент ряд CSS эффектов « filter » доступны в WebKit -браузерах и Mozilla Firefox . В ближайшее время мы ожидаем того же и в Opera , а также в Internet Explorer 10 .

    Так как спецификация находится в стадии разработки, некоторые производители браузеров реализовали этот материал с помощью префиксов. Таким образом, в WebKit вам нужно использовать ‘- webkit-filter ’, в Mozilla Firefox ‘- moz-filter ’. Кроме того следите за версиями, выходящими для других браузеров, по мере их релиза.

    Не все браузеры будут поддерживать абсолютно все эффекты фильтров, поэтому набор фильтров будет варьироваться для разных платформ. В настоящее время браузер Mozilla Firefox поддерживает только функцию ‘ filter: url() ‘ — без вендорного префикса, поскольку ее реализация предваряет другие функции эффектов.

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

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

    Эффект фильтра Поддержка браузерами Производительность
    grayscale Chrome Очень быстро
    Sepia Chrome Очень быстро
    Saturate Chrome Очень быстро
    hue-rotate Chrome Быстро
    Invert Chrome Очень быстро
    Opacity Chrome Может работать медленно
    brightness Chrome Быстро
    contrast Chrome Быстро
    Blur Chrome Медленно без ускорения
    drop-shadow Chrome Может работать медленно
    url() Chrome, Mozilla По-разному, быстро и медленно

    Данная публикация представляет собой перевод статьи « Understanding CSS Filter Effects » , подготовленной дружной командой проекта Интернет-технологии.ру

    CSS filter Свойство


    Пример

    Измените все изображения на Черное и белое (100% серого):

    Совет: Подробнее примеры ниже.

    Определение и использование

    Свойство filter определяет визуальные эффекты (например, размытие и насыщенность) для элемента (часто ).

    Значение по умолчанию: none
    Inherited: no
    Animatable: yes. Читайте о animatable
    Version: CSS3
    Синтаксис JavaScript: object.style.WebkitFilter=»grayscale(100%)»

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

    Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

    Номера следуют -webkit- Укажат первую версию, которая работала с префиксом.

    Свойство
    filter 53.0
    18.0 -webkit-
    13.0 35.0 9.1
    6.0 -webkit-
    40.0
    15.0 -webkit-

    Примечание: Более ранние версии Internet Explorer (4,0 до 8,0) поддерживали нестандартное свойство «Filter», которое устарело. В основном это было использовано для не прозрачности при необходимости поддержки от IE8 и Down.

    Синтаксис CSS

    Совет: Чтобы использовать несколько фильтров, разделите каждый фильтр на пробел (см. ниже «Дополнительные примеры»).

    Filter Functions

    Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

    Filter Описание
    none Значение по умолчанию. Указывает отсутствие эффектов
    blur(px) Применение эффекта размытия к изображению. Большее значение создаст больше размытия.

    Если значение не указано, используется 0. brightness(%) Регулировка яркости изображения.

    0% сделает изображение полностью черным.
    100% (1) по умолчанию и представляет исходное изображение.
    Значения более 100% обеспечат более яркие результаты. contrast(%) Регулировка контрастности изображения.

    0% сделает изображение полностью черным.
    100% (1) по умолчанию и представляет исходное изображение.
    Значения более 100% обеспечат результаты с меньшим контрастом. drop-shadow(h-shadow v-shadow blur spread color) Применяет эффект тени к изображению.

    Возможные значения:
    h-тень -требуется. Задает значение пикселя для горизонтальной тени. Отрицательные значения поместите тень слева от изображения.

    v-тень -требуется. Задает значение пиксела для вертикальной тени. Отрицательные значения поместите тень над изображением.

    размыт ие — необязательно. Это третье значение и должно быть в пикселях. Добавляет эффект размытия в тень. Большее значение создаст больше размытия (тень становится больше и светлее). Отрицательные значения не допускаются. Если значение не указано, используется 0 (кромка тени резко).

    спред -опционально. Это четвертое значение и должно быть в пикселях. Положительные значения приводят к тому, что тень расширяется и увеличивается, а отрицательные значения приводят к уменьшению размера тени. Если значение не указано, оно будет равно 0 (тень будет иметь тот же размер, что и элемент).
    Примечание: Chrome, Safari и Opera, и, возможно, другие браузеры, не поддерживают эту 4-ю длину; Он не будет отображаться при добавлении.

    Цвет — необязательный. Добавляет цвет к тени. Если не указано, цвет зависит от браузера (часто черного).

    Пример создания Красной тени, 8px большой как по горизонтали, так и по вертикали, с эффектом размытия 10px:

    фильтр: Drop-Тень (8px 8px 10px красный);

    Совет: Этот фильтр подобен свойству box-shadow. grayscale(%) Преобразует изображение в оттенки серого.

    0% (0) по умолчанию и представляет исходное изображение.
    100% сделает изображение полностью серым (используется для черно-белых изображений).

    Примечание: Отрицательные значения не допускаются. hue-rotate(deg) Применение поворота оттенка на изображении. Значение определяет количество градусов вокруг цветового круга, в котором будут корректироваться образцы изображений. 0дег по умолчанию и представляет исходное изображение.

    Примечание: Максимальное значение — 360дег. invert(%) Инвертирование образцов в изображении.

    0% (0) по умолчанию и представляет исходное изображение.
    100% сделает изображение полностью инвертированным.

    Примечание: Отрицательные значения не допускаются. opacity(%) Задает уровень непрозрачности для изображения. Уровень прозрачности описывает уровень прозрачности, где:

    0% является полностью прозрачным.
    100% (1) по умолчанию и представляет исходное изображение (без прозрачности).

    Примечание: Отрицательные значения не допускаются.
    Совет: Этот фильтр подобен свойству Opacity. saturate(%) Насыщение изображения.

    0% (0) сделает изображение полностью un-насыщенным.
    100% по умолчанию и представляет исходное изображение.
    Значения более 100% обеспечивают супер-насыщенные результаты.

    Примечание: Отрицательные значения не допускаются. sepia(%) Преобразует изображение в сепия.

    0% (0) по умолчанию и представляет исходное изображение.
    100% сделает изображение полностью сепия.

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

    31 мая 2020. Категория: Магия CSS стилей

    Раньше для изменения, например, яркости/контрастности изображения для сайта, использовались фильтры различных графических редакторов. Эти времена уже в прошлом, сейчас данные эффекты можно реализовать при помощи свойств и параметров технологии CSS3.

    Filter — свойство каскадных таблиц стилей CSS3, применяемое для изменения цветовой гаммы изображений. В основном используется с префиксом -webkit- .

    К сожалению, данное CSS3 свойство не поддерживается устаревшими браузерами. Со списком поддерживаемых браузеров Вы можете ознакомиться здесь.

    1. Grayscale — серый оттенок (черно-белый фильтр)

    Для создания эффекта «черно-белого фильтра» используется параметр grayscale , которому применяется значение от 0 — 100%.

    2. Sepia — светло-коричневый оттенок (сепия фильтр)

    Для создания эффекта «светло-коричневого фильтра» используется параметр sepia , которому применяется значение от 0 — 100%.

    3. Brightness — фильтр яркости

    Для создания эффекта «фильтра яркости» используется параметр brightness , которому применяется значение от 0 до больших показателей (в процентах).

    Например, при 0% изображение будет черным, при 100% — будет использоваться исходная яркость изображения, при 200% — яркость увеличится в 2 раза.

    4. Contrast — фильтр контрастности

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

    При 0% изображение будет черным, при 100% — будет использоваться исходный контраст изображения, при 150% — контрастность увеличится в 1,5 раза.

    5. Saturate — фильтр насыщенности

    Фильтр насыщенности придает изображению более сочный и насыщенный вид. Используется параметр saturate , применяется значение от 0 до больших показателей (в процентах).

    При 0% изображение становится черно-белым (аналог фильтра grayscale ), при 100% — будет использоваться исходная насыщенность изображения, при 200% — насыщенность увеличится в 2 раза.

    6. Invert — фильтр инверсии цветов

    Инверсия цветов — изменения цветовой гаммы изображения на противоположный по спектру.

    За работу фильтра отвечает параметр invert , применяется значение от 0 до 100%.

    7. Hue-rotate — фильтр оттенка

    Данный фильтр меняет угол цвета, основываясь на «цветовом колесе», и смещает его на указанное значение в градусах.

    За работу фильтра отвечает параметр hue-rotate , применяется значение от 0 до 360 градусов (deg).

    8. Blur — фильтр размытия

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

    За работу фильтра отвечает параметр blur , значение задается в пикселях (px).

    9. Opacity — фильтр прозрачности

    Фильтр регулирует уровень прозрачности изображения.

    За работу отвечает параметр opacity , значение задается от 0 — 100%. При значении в 10% изображение будет еле видно, при 100% — прозрачности не будет.

    Как сделать анимацию при наведении (как в демо примерах)?

    HTML разметка

    CSS разметка

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

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

    CSS фильтр: Оттенки серого

    CSS фильтр: Сепия

    CSS фильтр: Смещение цвета

    CSS фильтр: Инвертирование цвета

    CSS фильтр: Контраст

    CSS фильтр: Размытие

    CSS фильтр: Якрость

    CSS фильтр: Насыщенность

    CSS фильтр: Прозрачность

    CSS фильтр: Тень

    CSS фильтр: ALL

    ОНЛАЙН ГЕНЕРАТОР CSS ФИЛЬТРОВ ДЛЯ ИЗОБРАЖЕНИЙ

    Для того чтобы упростить представление работы css свойства «filter» вы можете воспользоваться онлайн генератором. В левой и правой колонках представлены все 10 вариаций фильтров, кроме того на верхней панели можно переключить центральный вид на одновременное применение всех фильтров. В общем случае после выбора необходимого вам свойства, в центральной колонке будет отображен блог с изображением, ползунком и поле с кодом. Изменяя значения фильтра с помощью ползунка вы тут же сможете увидеть как будет выглядеть тот или иной фильтр, код также будет реагировать на движение ползунка и его можно скопировать сразу же после достижения нужного результата.

    Формат изображения* — формат изображения для которого применяется фильтр.

    Параметры вставки фильтра* — выбор как будет загружен фильтр на страницу.

    Активировать все фильтры — открывается вид с ползунками для каждого фильтра. Фильтры будут применены одновременно.

    Перезагрузка — сброс всех параметров.

    * — В будущем будут добавлены варианты для изменения и этих параметров.

    Общая информация о свойстве CSS — Filter

    CSS свойство filter позволяет манипулировать цветом изображения путём наложения на него различных фильтров, таких как сепия, оттенки серого, насыщенность и т.д. Так как свойство введено относительно недавно (первое описание стандарта от 25 октября 2012) его не поддерживают старые браузеры, в том числе вся линейка Internet Explorer.

    Поддержка CSS свойства filter в разных браузерах:

    • Не совместимо с IE. Подробнее о возможной совместимости — Microsoft Library.
    • Edge — не поддерживается url.
    • Chrome с 58 до 49 версии и Android Browser в Android 4.4 и 4.4.4 требуют добавления префикса «-webkit-«.

    Описание значений свойства filter

    BLUR — Размытие

    Возможные величины: длина (px,rem,vw,vh и т.д.).

    Диапазон: 0 — ∞; где ноль исходное изображение.

    Описание: Размытие, смещение резкости, расфокусировка. При больших значениях свойства, изображение может становиться близким к монотонному. Также при больших значениях может понадобиться время чтобы эффект отрендерился в браузере.

    Пример: filter: blur(10px);

    BRIGHTNESS — Яркость

    Возможные величины: число, проценты.

    Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

    Описание: Увеличение и снижение яркости. При величине меньше единицы или 100% изображение будет темнеть (в нуле чёрное), при значениях больше единицы или 100% изображение будет становиться ярче.

    Пример: filter: brightness(0.2);

    CONTRAST — Контраст

    Возможные величины: число, проценты.

    Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

    Описание: Увеличение и снижение контрастности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле серое), при значениях больше единицы или 100% на изображении будет увеличиваться количество цветовых оттенков.

    Пример: filter: contrast(200%);

    DROP-SHADOW — Тень

    Возможные величины: Длина и цвет для тени.

    Диапазон: любое значение для первых двух параметров смещения; 0 — ∞, для параметра размытия, где 0 — отсутствие размытия.

    Описание: Тень для изображения, необходимо задать два первых параметра длины для смещения тени по оси координат (x,y), третий параметр задаёт размытие/прозрачность тени (третий параметр не должен быть меньше нуля). Последний параметр — цвет тени (стандартное значении цвета при его отсутствии разнится в зависимости от браузера, например в Chrome оно равно — #1a1a1a ). Порядок в спецификации задан следующим образом: 1 — смещение по оси X; 2 — смещение по оси Y; 3 — размытие; 4 — цвет тени. При этом браузеры также активируют свойство если цвет тени задать в самом начале — перед смещением по оси абсцисс (Х). Значение равнозначны с css свойством ‘box-shadow’.

    Пример: filter: drop-shadow(20px -20px 10px #000);

    GRAYSCALE — Оттенки серого

    Возможные величины: число, проценты.

    Диапазон: 0 — 1, 0%-100%;где 0 или 0% — оригинальное изображение.

    Описание: Увеличение и снижение количество цветов на изображении.

    Пример: filter: grayscale(0.2);

    HUE-ROTATE — Смещение цвета

    Возможные величины: угловые (градусы, радианы)


    Диапазон: любое значение ; где 0 или 360deg — оригинальное изображение.

    Описание: Действие основано на замене текущего цвета, на цвет который будет получен при смещении на заданный угол по цветовому кругу. Например, синий цвет при смещении угла в 90 градусов — filter: hue-rotate(90deg), сменится на салатовый, а при значении 180deg смениться на жёлтый.

    CSS фильтр Hue-rotate — схема смещения на 120deg,
    в результате цвет #007bff будет заменён на #7dfc04

    Пример: filter: hue-rotate(180deg);

    INVERT — Инвертирование цвета

    Возможные величины: число, проценты.

    Диапазон: 0 — 1 , 0%-100%; где 0 или 0% — оригинальное изображение.

    Описание: Инвертирование цвета (например, с чёрного в белый), 0 — оригинальное изображение, 1 или 100% полностью инвертированное. В середине процесса инвертирования (0.5 или 50%) изображение становится полностью серым.

    Пример: filter: invert(90%);

    Opacity — Прозрачность

    Возможные величины: число, проценты.

    Диапазон: 0 — 1 , 0%-100%; где 1 или 100% — оригинальное изображение.

    Описание: Прозрачность. Разница между обычным свойством ‘opacity’ в том, что фильтр можно наложить совместно с другими фильтрами при этом не получить умножение прозрачности для всего блока. Свойство opacity: 0.5 и filter: opacity(0.5) без примесей других модификаторов — равнозначны, но при этом применённые к одному блоку не дадут ему полную прозрачность. (Можете попинать в комментариях в более правильном направлении).

    Пример: filter: opacity(0.7);

    Saturate — Насыщенность

    Возможные величины: число, проценты.

    Диапазон: 0 — ∞, 0%-∞%; где 1 или 100% — оригинальное изображение.

    Описание: Увеличение и снижение насыщенности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле будут использованы только оттенки серого, равнозначно grayscale(1) ), при значениях больше единицы или 100% на изображении будет увеличиваться насыщенность цветов.

    Пример: filter: saturate(0.7);

    SEPIA — Сепия

    Возможные величины: число, проценты.

    Диапазон: 0 — 1, 0%-100%; где 0 или 0% — оригинальное изображение.

    Описание: Имитация выцветшей фотографии (эффект старины). На 100% или 1, в изображении будут использованы только оттенки коричневого (светло-коричневого) цвета.

    Пример: filter: sepia(100%);

    Фильтры в CSS: размытие, оттенки серого, яркость и много других эффектов в CSS!

    Дата публикации: 2020-08-03

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

    Для применения фильтра необходимо использовать следующий синтаксис:

    Давайте коротко пройдемся по всем фильтрам.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Яркость

    С помощью данного фильтра можно управлять яркостью изображений. В качестве параметра принимается значение, большее или равное нулю. Если задать значение 0%, то мы получим полностью черное изображение. Точно так же значение 100% даст нам исходное изображение. Для осветления изображения можно задать значение более 100%. К примеру, значение 300% сделает изображения в 3 раза светлее:

    Контраст

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

    Оттенки серого

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

    Насыщенность

    Фильтр управляет насыщенностью цветов изображений. Значение 0% уберет все цвета с изображения, а значение выше 100% добавит контрастности. На 100% мы видим оригинальное изображение. Отрицательные значения не принимаются.

    Сепия

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

    Поворот цвета

    Фильтр изменяет все цвета изображений. Угол поворота цветов зависит от заданного параметра. При значении 0deg изображение остается прежним. У данного фильтра нет максимального значения, однако выше 360deg эффект начинает повторяться. То есть значения 90deg и 450deg дадут одинаковый результат.

    Инверсия

    Фильтр инвертирует все цвета изображений. Сила инверсии зависит от параметра. Значение 0% никак не повлияет на изображение, а 100% полностью его инвертирует.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Размытие

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

    Прозрачность

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

    Отбрасываемая тень

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

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

    Объединение и анимация фильтров

    Для получения различных эффектов можно объединять несколько фильтров. В большинстве случаев порядок фильтров не имеет значения, однако применяются они в том порядке, в котором они прописаны в CSS, и некоторые фильтры переписывают другие. К примеру, если использовать фильтр sepia после grayscale, то мы получим сепию и наоборот. Фильтры поддаются анимации. Если правильно все сделать, можно добиться интересного эффекта. Разберем пример ниже:

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

    Внезапная смена яркости и контрастности с полной сепией в середине анимации придают драматизма. Лучший способ понять принцип работы – самому поэкспериментировать с анимацией фильтров!

    Замечания

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

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

    Свойство filter поддерживается во всех основных браузерах. В Chrome и Opera нужно добавлять префикс. Нет поддержки в IE, хотя Edge частично поддерживает фильтр. Частичная поддержка означает, что Edge поддерживает все фильтры, кроме url().

    Заключение

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

    Автор: Gajendar Singh

    Редакция: Команда webformyself.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    filter

    На этой странице

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

    Описание

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

    В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на элемент фильтра SVG.

    Начальное значение none
    Применяется к все элементы; в SVG, это применяется к контейнерам, исключая элемент defs и все графические элементы
    Наследуется нет
    Отображение визуальный
    Обработка значения как указано
    Animation type a filter function list
    Канонический порядок уникальный неоднозначный порядок, определённый формальной грамматикой

    Синтаксис

    С помощью функции, используйте:

    Для ссылки на SVG элемент, используйте:

    Формальный синтаксис

    Примеры

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

    Примеры использования функции URL с SVG ресурсом показаны ниже.

    Функции

    Для испольлзования CSS свойства filter , Вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает «none.» За исключением тех случаев, когда функции, которые принимают значение выраженное в процентах (34%) также принимают значение, выраженное как десятичная дробь (0.34).

    The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

    blur() [размытие]

    Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

    brightness() [яркость]

    Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the ‘amount’ parameter is missing, a value of 1 is used.

    contrast() [контраст]

    Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of 1 is used.

    drop-shadow() [тень]

    Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed. This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the parameter are as follows.

    (required) These are two values to set the shadow offset. specifies the horizontal distance. Negative values place the shadow to the left of the element. specifies the vertical distance. Negative values place the shadow above the element. See for possible units.
    If both values are 0 , the shadow is placed behind the element (and may generate a blur effect if and/or is set). (optional) This is a third value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow’s edge is sharp). (optional) This is a fourth value. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
    Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added. (optional) See values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the color property is used. On the other hand, WebKit’s shadow is transparent and therefore useless if is omitted.

    grayscale() [оттенки серого]

    Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

    hue-rotate() [изменение оттенка]

    Applies a hue rotation on the input image. The value of ‘ angle ’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘ angle ’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.

    invert() [инвертирование]

    Inverts the samples in the input image. The value of ‘ amount ’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘ amount ’ parameter is missing, a value of 0 is used.

    opacity() [непрозрачность]

    Applies transparency to the samples in the input image. The value of ‘ amount ’ defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘ amount ’ parameter is missing, a value of 1 is used. This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

    saturate() [насыщенность]

    Saturates the input image. The value of ‘ amount ’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, prov >amount ’ parameter is missing, a value of 1 is used.

    sepia() [сепия]

    Converts the input image to sepia. The value of ‘ amount ’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘ amount ’ parameter is missing, a value of 0 is used.

    Комбинирование функций

    You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.

    Спецификации

    Спецификация Статус Комментарий
    Filter Effects Module Level 1
    Определение ‘filter’ в этой спецификации.
    Рабочий черновик Первоначальное определение

    Совместимость с браузерами

    Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Базовая поддержка 18.0 -webkit [1] 35 (35) [2] Нет [3] 15.0 -webkit 6.0 -webkit
    SVG элементы Нет [4] 35 (35) Нет Нет Нет
    Особенность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Базовая поддержка 4.4 -webkit 35 (35) [2] Нет 22.0 (Да) -webkit
    SVG элементы Нет [4] 35 (35) Нет Нет Нет

    [1] In Chrome 18 to 19, saturate() function only takes integers instead of decimal or percentage values. This bug is fixed in Chrome 20 and further.

    [2] Before Firefox 34, Gecko only implemented the url() form of the filter property; as chaining was not implemented then, only one url() was allowed (or when the layout.css.filters.enabled pref is set to false ).

    The functional values of filter are controlled by the layout.css.filters.enabled pref and was available but disabled by default in Firefox 34.

    [3] Internet Explorer 4.0 to 9.0 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.

    [4] Blink does currently not implement this feature. See bug 109224.

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

    2020-12-13 / Вр:11:14 / просмотров: 2333

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

    Вот макет, по которому можно менять и добавлять фильтры к изображению:


    filter-x – сюда подставляем любой нужный фильтр (контрастность, яркость и т.д)
    xxx – здесь указываем параметры в % или px для регулировки эффекта.

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

    В итоге будет вот такой макет:

    Пропишите в HTML вот такой код:

    РАЗМЫТИЕ

    ЯРКОСТЬ

    НАСЫЩЕННОСТЬ

    ТОН

    КОНТРАСТНОСТЬ

    ИНВЕРСИЯ

    ОБЕСВЕЧИВАНИЕ (ЧЕРНО-БЕЛОЕ ИЗОБРАЖЕНИЕ)

    СЕПИЯ

    ДОПОЛНЕНИЕ:

    Фильтры можно комбинировать, и, если постараться, в итоге можно добиться классного эффекта для сайта.

    КОМБИНИРОВАНИЕ ФИЛЬТРОВ

    ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КАРТИНКУ МЫШКИ

    Вот в этой статье есть красивые эффекты для картинок, используя вот эти все фильтры.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 5347408a2f204e28 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    15 эффектов для изображений (используем только CSS3)

    Здравствуйте, уважаемые читатели XoZbloga! В этой статье подготовлены 15 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии посетите демонстрационную страницу.

    Установка

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

    * <
    -webkit-box-sizing : border-box ;
    -moz-box-sizing : border-box ;
    -ms-box-sizing : border-box ;
    box-sizing : border-box ;
    >

    body <
    background : #333 ;
    >

    .pic <
    border : 10px solid #fff ;
    float : left ;
    height : 300px ;
    width : 300px ;
    margin : 20px ;
    overflow : hidden ;

    -webkit-box-shadow : 5px 5px 5px #111 ;
    box-shadow : 5px 5px 5px #111 ;
    >

    border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden .

    Масштабирование и панорамирование

    Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.

    Увеличение

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

    Как Вы можете видеть здесь мы используем два класса pic и grow . Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.

    /*GROW*/
    .grow img <
    height : 300px ;
    width : 300px ;

    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .grow img : hover <
    width : 400px ;
    height : 400px ;
    >

    Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.

    Уменьшение

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

    /*SHRINK*/
    .shrink img <
    height : 400px ;
    width : 400px ;

    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .shrink img : hover <
    width : 300px ;
    height : 300px ;
    >

    Горизонтальное смещение

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

    Изображение имеет размер 600х300px.

    /*SIDEPAN*/
    .sidepan img <
    margin-left : 0px ;
    -webkit-transition : margin 1s ease ;
    -moz-transition : margin 1s ease ;
    -o-transition : margin 1s ease ;
    -ms-transition : margin 1s ease ;
    transition : margin 1s ease ;
    >

    .sidepan img : hover <
    margin-left : -200px ;
    >

    Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin . При наведении смещаем картинку влево на 200px.

    Вертикальное смещение

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

    Изображение имеет размер 300х600px.

    /*VERTPAN*/
    .vertpan img <
    margin-top : 0px ;
    -webkit-transition : margin 1s ease ;
    -moz-transition : margin 1s ease ;
    -o-transition : margin 1s ease ;
    -ms-transition : margin 1s ease ;
    transition : margin 1s ease ;
    >

    .vertpan img : hover <
    margin-top : -200px ;
    >

    Теперь смещаем вверх на 200px.

    Трансформация

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

    Наклон

    Замечательный эффект. Небольшой поворот изображения в результате наведения курсора мыши.

    /*TILT*/
    .tilt <
    -webkit-transition : all 0.5s ease ;
    -moz-transition : all 0.5s ease ;
    -o-transition : all 0.5s ease ;
    -ms-transition : all 0.5s ease ;
    transition : all 0.5s ease ;
    >

    .tilt : hover <
    -webkit-transform : rotate ( -10deg ) ;
    -moz-transform : rotate ( -10deg ) ;
    -o-transform : rotate ( -10deg ) ;
    -ms-transform : rotate ( -10deg ) ;
    transform : rotate ( -10deg ) ;
    >

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

    Поворот

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

    /*MORPH*/
    .morph <
    -webkit-transition : all 0.5s ease ;
    -moz-transition : all 0.5s ease ;
    -o-transition : all 0.5s ease ;
    -ms-transition : all 0.5s ease ;
    transition : all 0.5s ease ;
    >

    .morph : hover <
    border-radius : 50% ;
    -webkit-transform : rotate ( 360deg ) ;
    -moz-transform : rotate ( 360deg ) ;
    -o-transform : rotate ( 360deg ) ;
    -ms-transform : rotate ( 360deg ) ;
    transform : rotate ( 360deg ) ;
    >

    Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.

    Фокусировка

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

    /*FOCUS*/
    .focus <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .focus : hover <
    border : 70px solid #000 ;
    border-radius : 50% ;
    >

    При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.

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

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

    Размытие

    Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.

    /*BLUR*/
    .blur img <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .blur img : hover <
    -webkit-filter : blur ( 5px ) ;
    >

    Как вы можете видеть, мы используем -webKit-filter , с размытием 5px.

    Черно-белое изображение

    С помощью этого фильтра, добьемся эффекта черно-белого изображения.

    /*B&W*/
    .bw <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .bw : hover <
    -webkit-filter : grayscale ( 100% ) ;
    filter : grayscale ( 100% ) ;
    >

    Здесь я установил оттенки серого ( grayscale ) со значением 100%. Процент оттенков серого можно понизить.

    Осветление

    Теперь поиграем яркостью изображения. Сначала затемним картинку, а при наведении вернем нормальное значение для яркости.

    /*DARKEN*/
    .brighten img <
    -webkit-filter : brightness ( 65% ) ;
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .brighten img : hover <
    -webkit-filter : brightness ( 145% ) ;
    >

    Изначально яркость делаем 65%, а при наведении устанавливаем значение 145% т.е. ярче на 45% от нормального состояние картинки.

    Сепия

    Еще один ретро эффект) перевод цветного изображения в тональность сепия.

    /*SEPIA*/
    .sepia img <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .sepia img : hover <
    -webkit-filter : sepia ( 100% ) ;
    >

    Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию.

    Контрастность

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

    /*CONTRAST*/
    .contrast img <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .contrast img : hover <
    -webkit-filter : contrast ( 185% ) ;
    >

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

    Оттенок изображения

    Данный фильтр изменяет цвета картинки в зависимости от заданного угла.

    /*HUE_ROTATE*/
    .hue-rotate img <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .hue-rotate img : hover <
    -webkit-filter : hue-rotate ( 65deg ) ;
    >

    Значение оттенка изображения задается в градусах от 0-360, где 0 это нормальное значение.

    Инверсия

    Еще один Webkit фильтр изображений — это инверсия.

    /*INVERT*/
    .invert img <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .invert img : hover <
    -webkit-filter : invert ( 100% ) ;
    >

    Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

    Также мы можем объединить фильтры в одном правиле. Получается более комплексный эффект для изображения. Например сделать картинку черно-белой и добавить контрастности:

    Прозрачность

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

    /*OPACITY*/
    .opacity img <
    -webkit-transition : all 1s ease ;
    -moz-transition : all 1s ease ;
    -o-transition : all 1s ease ;
    -ms-transition : all 1s ease ;
    transition : all 1s ease ;
    >

    .opacity img : hover <
    -webkit-filter : opacity ( 25% ) ;
    >

    Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

    При таком варианте использование значение берется из интервала от 1 до 0.

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

    Илон Маск рекомендует:  Что такое код mailparse_msg_get_part
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL