Блог Хасанова Ильи о сайтостроении
  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты
Блог Хасанова Ильи о сайтостроении
Партнерская компания AIR для каналов видеохостинга youtube
  • База знаний
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • CSS3 фильтры для изображений
31 мая2016

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

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

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

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

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

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

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

Grayscale - черно-белый фильтр

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

<img src="/foto.jpg" style="-webkit-filter: grayscale(100%);" alt="" />

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

Sepia - сепия фильтр

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

<img src="/foto.jpg" style="-webkit-filter: sepia(100%);" alt="" />

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

Brightness - фильтр яркости

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

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

<img src="/foto.jpg" style="-webkit-filter: brightness(200%);" alt="" />

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

Contrast - фильтр контрасности

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

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

<img src="/foto.jpg" style="-webkit-filter: contrast(150%);" alt="" />

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

Saturate - фильтр насыщенности

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

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

<img src="/foto.jpg" style="-webkit-filter: saturate(200%);" alt="" />

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

Invert - фильтр инверсии цветов

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

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

<img src="/foto.jpg" style="-webkit-filter: invert(100%);" alt="" />

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

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

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

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

<img src="/foto.jpg" style="-webkit-filter: hue-rotate(300deg);" alt="" />

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

Blur - фильтр размытия

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

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

<img src="/foto.jpg" style="-webkit-filter: blur(1px);" alt="" />

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

Opacity - фильтр прозрачности

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

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

<img src="/foto.jpg" style="-webkit-filter: opacity(10%);" alt="" />

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

Все очень просто, разберем 8 пример изображения с фильтром размытия (blur).

HTML разметка

/* К изображению применяем класс blur */
<img src="/foto.jpg" class="blur" alt="" />

CSS разметка

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

img {
	transition: 0.5s all; //плавность перехода, 0.5 секунды
	}
img.blur {
	-webkit-filter:blur(1px); //размытие активно, смещение 1px
	}
img.blur:hover {
	-webkit-filter:blur(0px); //размытие деактивировано, смещение пикселей отсутствует
	}

Комментарии

  • Нет комментариев. Ваш будет первым!

Закрепленные

Понравившиеся

Чтобы оставить комментарий, необходимо авторизоваться!
Домены со скидками по супер ценам!

Авторизация

           

Последние комментарии

Илья Хасанов
Добрый день, на сайте https://yootheme.com/joomla-templates есть бесплатный шаблон https://prnt.sc/vqe77q, https://prnt.sc/vqe7rh
1 шаг к созданию собственного ...
26.11.2020
Дмитрий Филев
Добрый день!! Посоветуйте где взять хороший бесплатный шаблон, для сайта-визитка, блог? В вашем обучении на сайте yootheme.com нет бесплатных шаблонов...
1 шаг к созданию собственного ...
26.11.2020
Хасанов Илья
Здравствуйте, Олег! http://prntscr.com/hbnd1l
2 шаг к созданию собственного ...
17.11.2017
Олег Насиканов
Привет Илья, откуда на 3 минуте из папки дополнительные материалы берётся файл стилей. Где их взять? Заранее благодарен.
С уважением, Олег.
2 шаг к созданию собственного ...
17.11.2017
Роберт Сидоров
Существует ли модуль, отображения новостей как у Вас на сайте реализовано? Нужно, чтобы было разграничение новостей и дата отображалась как у Вас. Воз...
Mj Simple News - модуль вывода...
23.09.2017
Сергей Лаврик
Есть какой видосик по созданию безшовного фона?
Бесшовные фоны для сайта
17.07.2017

Полезные ссылки

  • Скачать
    • Актуальная версия CMS Joomla
    • Актуальная версия Denwer
    • Текстовый редактор Notepad++
    • FTP-менеджер Filezilla
  • Оптимизация кода сайта
    • Анализ сайта PageSpeed Insights
    • Анализ файла robots.txt
    • Проверка скорости загрузки сайта
    • Сжатие JS кода
    • Сжатие CSS кода
  • Ускорение индексации сайта
    • Ускорение индексации в Yandex
    • Ускорение индексации в Google
    • Ускорение индексации в Bing
    • Ускорение индексации в Mail.ru
  • Работа с текстом
    • Подбор ключевых слов Wordstat
    • Проверка текста на уникальность
  • Работа с графикой
    • Сжатие PNG без потерь качества
    • Сжатие JPG без потерь качества
    • Преобразовать PNG в SVG
    • Создать свой бесшовный фон
  • Прочее
    • Онлайн-конструктор карт
    • Генератор надежных паролей
    • Генератор QR-кода

Подписывайся на канал Youtube

Подписывайся на группу в ВК

 

Финансовая поддержка блога

Поддержка блога

Если Вы особо цените труд автора блога и желаете не просто отблагодарить его словестно, но еще и материально - данный раздел сайта создан специально для Вас!

  • Создать сайт на CMS Joomla
  • 1 шаг (подготовка)
  • 2 шаг (оформление)
  • 3 шаг (юзабилити)
  • 4 шаг (хостинг/домен)
  • Миграция сайта на CMS Joomla
  • С версии 2.5 на 3x
  • Расширения CMS Joomla
  • Компоненты
  • Плагины
  • Модули
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Готовые CSS3 кнопки
  • Бесшовные фоны на чистом CSS
  • Скрипты
  • Графика и текст
  • Бесшовные фоны/паттерны
  • Шрифты для сайта
  • Прочее
  • Это должен знать каждый сайтостроитель!
  • Вопросы и ответы Joomla
  • Онлайн CSS генераторы
  • Создать CSS градиент
  • Создать CSS кнопку
  • Создать тень у текста
  • Создать тень у блоков
  • Заказать создание сайта
  • Вопросы и ответы
  • Оставить заявку на разработку сайта
  • Об авторе блога
  • Отзывы
  • Контактная информация

При полном или частичном копировании материалов сайта - ссылка на данный ресурс обязательна!
Бесплатные авторские видеоуроки и статьи о CMS Joomla | Ilyakhasanov.ru © 2017

  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты