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

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

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

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

Тренинг по вёрстке сайта на HTML5 и CSS3

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Посмотреть ДЕМО

Скачать файл-заготовку можно по этой ссылке.

Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут!!!

1. Фильтр размытие - blur

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

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

<img src="fox.jpg" style="filter: blur(2px); -webkit-filter: blur(2px);" alt="Лисичка">

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

Лисичка без фильтра

Лисичка c фильтром blur

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость — brightness

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

<img src="horse.jpg" style="-webkit-filter: brightness(2);filter: brightness(2);" alt="Коник">

А вот и наш подопытный конь:

Конь без фильтра

Конь c фильтром brightness

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% - оригинальным, а при 200% - станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

  1. целые числа
  2. дробные числа
  3. проценты

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность — contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% - это значение по умолчанию. 0% - черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

<img src="cat.jpg" style="-webkit-filter: contrast(1.5);filter: contrast(1.5);" alt="Котик">

Вот результат:

Кот без фильтра

Кот c фильтром contrast

Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. grin Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.

4. Фильтр насыщенность — saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение - 200%. Повысим насыщенность нашей картиночки в 2 раза.

<img src="see.jpg" style="-webkit-filter: saturate(200%); filter: saturate(200%);" alt="Бережок">

Море стало заметно приятнее:

Кот без фильтра

Кот c фильтром saturate

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем?? smile

5. Фильтр прозрачность — opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

<img src="fontan.jpg" style="-webkit-filter: opacity(50%);filter: opacity(50%);" alt="Фонтанчик">

Посмотрите, что вышло:

Фонтан без фильтра

Фонтан c фильтром opacity

6. Фильтр Инверсия - invert

Он позволяет вам "переворачивать" цвета. На значения данного фильтра также вводятся ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

В нашем случае установим максимальное значение - 100 %:

<img src="car.jpg" style="-webkit-filter: invert(100%);filter: invert(100%);" alt="Машинка">

И красивая спортивная машина лёгким движением руки превращается в...

Машина без фильтра

Машина c фильтром invert

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия — sepia

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

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Ну что? Попробуемс?

<img src="flower.jpg" style="-webkit-filter: sepia(0.7);filter: sepia(0.7);" alt="Цветочек">

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет cool hmm Кажется, у меня крыша потекла с этими примерами.

Машина без фильтра

Машина c фильтром sepia

В нашем случае мы указали дробное значение - 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого — grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 - к 100%.

Зададим значение - 0.7 (или 70%):

<img src="tree.jpg" style="-webkit-filter: grayscale(0.7);filter: grayscale(0.7);" alt="Деревце">

Дерево без фильтра

Дерево c фильтром grayscale

9. Фильтр оттенок освещения — hue-rotate

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

Мы зададим значение - 300 градусов:

<img src="monkey.jpg" style="-webkit-filter: hue-rotate(300deg);filter: hue-rotate(300deg);" alt="Обезьянка">

Обезьяна без фильтра

Обезьяна c фильтром hue-rotate

Ну и кто здесь говорил, что розовых обезьян не бывает? cool smile

10. Фильтр тень - drop-shadow

Фильтр задается сразу несколькими значениями. Сначала мы задаем значение по оси X, потом - по оси Y. Так мы обозначаем смещение тени по оси X и Y. Далее указывается радиус нашей тени и последним атрибутом - ее цвет.

В нашем случае укажем смещение тени на 3 пикселя, размер 5 и цвет тёмно-серый.

<img src="city.jpg" style="-webkit-filter: drop-shadow(2px 2px 5px #333); filter: drop-shadow(2px 2px 5px #333);" alt="Городишко">

Обратите внимание, за счёт тени создается впечатление, будто вторая картинка приподнята.

Город без фильтра

Город c фильтром drop-shadow

Кстати, в самом видео-уроке мы не только разбирали все эти свойства, но и учились делать анимацию. И в нём создавали эффект поднятия картины при наведении. В Демо есть пример wink



PS: Друзья, если Вы хотите полностью изучить HTML5 и CSS3, и научиться верстать классные сайты – записывайтесь на тренинг Верстаем на 5+

тренинг Верстаем на 5+

Там вас ждем много интересных фишек и секретов по созданию сайтов. Будет интересно!

Комментариев: 10 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 10
  •  Вадим | 4 февраля 2015 в 18:44:20

    Супер статья. Я думал, что много знаю о CSS, но эта статья вдохновила на столько идей !!!!

    Огромнейшее спасибо.

  •  Александр | 4 февраля 2015 в 19:59:43

    Клево!

  •  SanShu | 4 февраля 2015 в 20:48:01

    Ниче себе! Спасибо Серж!)

  •  Natalia Papilina | 5 февраля 2015 в 00:38:40

    класс!!!

  •  Павел | 5 февраля 2015 в 07:07:55

    Как всегда - круто! Очень полезно! Спасибо!

  •  Timur | 5 февраля 2015 в 21:05:51

    Классный урок!

    И тут же я решил проверить действие фильтра в разных браузерах.

    Подопытными кроликами стали:

    Pale Moon (Версия 25.2.1 (x64))

    Comodo Dragon (Версия 36.1.1.21)

    Opera (Версия 27.0)

    Vivaldi (Версия 1.0.83.38)

    и Internet Explorer (Версия 11 не обновлял давно).

    Разочаровал мой любимый Pale Moon. Кроме drop-shadow не работала ни одна картинка. Да и то без отбрасывания тени. И это учитывая, что Pale Moon разработан на основе FireFox. Может с настройками у меня что-то не в порядке ?

    Comodo Dragon все показал как надо - чем и порадовал.

    Opera тоже блестнула. Всё абсолютно без нареканий.

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

    Internet Explorer отработал полностью Pale Moon --но подобным образом. Т.е. почти никак.

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

    За сим разрешите мне завершить свой пост.

    Всем Удачи!

  •  Владимир Поляков | 7 февраля 2015 в 15:24:53

    Спасибо Серёга.За время знакомства с тобой, я получил действительно много полезного контента. Но самое главное, что в наше быстротечное время, с кучей информации, твоя полезна своей новизной и важностью.Если ты предлагаешь обратить на, что то внимание, значит это самая современная тенденция.Не исключение изучение РЕЬД-5 и CSS-3 Спасибо.

  •  Аноним | 15 февраля 2015 в 00:03:37

    Провёл проверку в Safari браузере(IPad 2). Всё прекрасно работает! Версия браузера последняя на данный момент

  •  Доброжелатель. | 3 июля 2016 в 14:18:04

    "Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. grin Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно. ". Ага будем использовать методы которые жрут cpu, и оперативку(а если акселерация у браузера то оперативку x2)

    •  Серёга | 25 августа 2016 в 07:03:27

      Ага будем сидеть в каменном веке и работать только на калькуляторах. Мамонты вымирают, знаете ли smile Технологии придумывают для того, что бы их использовали. Одна картинка с анимацией на страницу - ничего не сделает.