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

27.01.201912251 мин. 59 сек.верстка css трюки

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

CSS свойство background-size - object-fit

Раньше для заполнения блока изображением приходилось прибегать к помощи javascript или фиксировать блок по пропорциям. Все это раздувало JS код и зачастую ломалось при ручном изменении размера окна браузера. Теперь у нас есть отличное, похожее на свойство CSS background-size, object-fit, которое можно применять к изображениям и медиа файлам. Данное свойство принимает следующие значения:

contain - растягивает или сжимает изображение таким образом, чтобы оно полностью поместилось в видимую область без искажения пропорций;

fill - растягивает изображение по видимой области, искажая пропорции;

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

scale-down - сжимает изображение, чтобы уместить его в видимую область без искажения пропорций. Если изображение меньше - не растягивает, а оставляет текущий размер!

Необходимо обязательно указать в CSS width:100% и height:100% для картинки! Часть изображения, не попавшая в видимую область блока будет скрыта

Накладываем на изображение CSS фильтры для получения эффектов Instagram

Для получения различных эффектов фильтров на изображениях используется css свойство filter. Для кросбраузерной поддержки используются префиксы -webkit- и -moz-. CSS свойство filter может принимать следующие значения:

blur(5px) - размывает изображения подобно фильтру "размытие по гаусу". Чем больше значение, тем сильнее размытие. Начиная с определенного значения возможно выпирание эффекта размытия за границы блока, что можно исправить с помощью overflow:hidden на родительском элементе
brightness(50%) - регулирует яркость изображения. По умолчанию 100%. Возможно указание значение в десятичных дробях brightness(.4)
contrast(50%) - настройки контрастности изображения - разницы между самыми темными и самыми светлыми участками картинки
drop-shadow(1px 1px 2px #000) - свойство аналогичное по синтаксису box-shadow и text-shadow. Если на изображении есть текст, к нему так же будет применен эффект тени
grayscale(50%) - постепенно превращает изображение в черно-белое от 0% к 100%
hue-rotate(50%) - изменяет цвета изображения по принципу теплее, холоднее, следуя по цветовому кругу
invert(50%) - превращает изображение в негатив
opacity(50%) - аналогично свойству opacity, но значительно повышает производительность браузера при обработке эффекта
saturate(50%) - изменяет насыщенность цветов от 100% к 0%
sepia(50%) - Имитирует эффект старины или ретро стиля. По умолчанию 0%. Чем выше значение, тем больше эффект.
url() - передается расположение xml файла с фильтром svg