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

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

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

Раньше для заполнения блока изображением приходилось прибегать к помощи javascript или фиксировать блок по пропорциям. Все это раздувало JS код и зачастую ломалось при ручном изменении размера окна браузера. Теперь у нас есть отличное, похожее на свойство CSS background-size, object-fit, которое можно применять к изображениям и медиа файлам. Данное свойство принимает следующие значения:
  • contain - растягивает или сжимает изображение таким образом, чтобы оно полностью поместилось в видимую область без искажения пропорций;
  • fill - растягивает изображение по видимой области, искажая пропорции;
  • cover - растягивает изображение на всю видимую область без искажения пропорций и центрирует.
  • scale-down - сжимает изображение, чтобы уместить его в видимую область без искажения пропорций. Если изображение меньше - не растягивает, а оставляет текущий размер!
  • Обработка картинки css свойствами
    Необходимо обязательно указать в CSS width:100% и height:100% для картинки! Часть изображения, не попавшая в видимую область блока будет скрыта

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

    Для получения различных эффектов фильтров на изображениях используется css свойство filter. Для кросбраузерной поддержки используются префиксы -webkit- и -moz-. CSS свойство filter может принимать следующие значения:
    1. blur(5px) - размывает изображения подобно фильтру "размытие по гаусу".  Чем больше значение, тем сильнее размытие. Начиная с определенного значения возможно выпирание эффекта размытия за границы блока, что можно исправить с помощью overflow:hidden на родительском элементе
    2. brightness(50%) - регулирует яркость изображения. По умолчанию 100%. Возможно указание значение в десятичных дробях brightness(.4)
    3. contrast(50%) - настройки контрастности изображения - разницы между самыми темными и самыми светлыми участками картинки
    4. drop-shadow(1px 1px 2px #000) - свойство аналогичное по синтаксису box-shadow и text-shadow. Если на изображении есть текст, к нему так же будет применен эффект тени
    5. grayscale(50%) - постепенно превращает изображение в черно-белое от 0% к 100%
    6. hue-rotate(50%) - изменяет цвета изображения по принципу теплее, холоднее, следуя по цветовому кругу
    7. invert(50%) - превращает изображение в негатив
    8. opacity(50%) - аналогично свойству opacity, но значительно повышает производительность браузера при обработке эффекта
    9. saturate(50%) - изменяет насыщенность цветов от 100% к 0%
    10. sepia(50%) - Имитирует эффект старины или ретро стиля. По умолчанию 0%. Чем выше значение, тем больше эффект.
    11. url() - передается расположение xml файла с фильтром svg 
    Лого https://piploid.ru
    24.05 в 17:40Как оформлять статьи. Краткий справочник по быстрому SEOВы пишете интересные тексты, но никто не читает? Вероятно вы не соблюдаете даже половины из перечисленных в статье правил!03.04 в 11:49Что такое доменное имя и где его купитьДавайте разберемся: что такое доменное имя и в чем отличие зоны RU от COM, где купить домен и как оформить его на себя26.03 в 11:44Как собрать семантическое ядро для сайтаНебольшой гайд по правильному сбору семантики для своего сайта. Полезные сервисы для упрощения работы18.03 в 22:01Работа с массивами по взросломуМой личный справочник необычных функций для работы с массивами. Как преобразовать массивы к нужному виду в одну строчку.16.03 в 21:02Выбираем лучший хостинг. Подробный обзор swebНе знаете где разместить свой сайт? В данном обзоре я расскажу об основных преимуществах хостинга, с которым я работаю уже более 5 лет27.01 в 14:05Работа с картинками в CSS. Фильтры как в InstagramПодробно о современных css свойствах используемых для работы с картинками и фоном. Как сделать фильтры из Instagram
    Оставить комментарий
    Заказать сайт
    ОТПРАВИТЬ
    +7 926 426 93 41anton.ross@yandex.ru
    ПОНЕДЕЛЬНИК-СУББОТА
    09:00 - 20:00
    ×
    Добро пожаловать

    Авторизуйтесь чтобы оставлять комментарии и добавлять фильмы в избранное

    Войти
    Войдите через:
    Создать учетную запись
    Восстановление пароля

    Укажите email указанный при регистрации, на который будет отправлена инструкция по восстановлению пароля

    Сбросить пароль
    Добро пожаловать

    Зарегистрируйтесь чтобы оставлять комментарии и добавлять фильмы в избранное

    Зарегистрироваться

    Регистрируясь на сайте Вы соглашаетесь с политикой конфиденциальности нашего сайта и даете согласие на обработку персональных данных

    Войдите через:
    У меня есть учетная запись
    Смена пароля

    Используйте код отправленный на указанную вами почту для смены пароля

    Сменить пароль
    ×