8 приемов работы с CSS: параллакс, «липкий» футер и другие



    От переводчика: перевели для вас статью Брета Кэмерона о хитростях в работе с CSS. Многие моменты пригодятся не только новичкам, но и опытным разработчикам.

    Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.

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

    Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.

    Skillbox рекомендует: Практический двухмесячный курс «Профессия Frontend-разработчик».

    Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».

    1. «Липкий» футер


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

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

    До появления CSS3 этого эффекта было сложно добиться, не зная точную высоту футера. Но сейчас это не проблема, для создания «липкого» футера лучше всего использовать Flexbox. А именно — взять свойство flex-shrink, так вы будете уверены в том, что нижний колонтитул сохранит свои размеры.

    При размере 0 он не будет сжиматься вообще.


    2. Увеличение при наведении


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

    Для того, чтобы сделать такой эффект, нам понадобится враппер div, им нужно обернуть тэг image в HTML.

    Кроме того, чтобы эффект заработал, нужно установить width и height элемента, а также убедиться, что его overflow установлен как hidden. После этого вы сможете применять любые типы трансформаций.


    3. Постоянный режим Night Mode


    Если вам необходим быстрый способ установить ночной режим для вашего сайта, то используйте фильтры invert и hue-rotate.

    filter: invert() может принимать значения от 0 до 1. 1 — это инверсия, белое становится черным.

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

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

    Вот пример:

    body {
        background: #FFF;
        filter: invert(1) hue-rotate(210deg);
    }

    Используя эти настройки можно превратить стартовую страницу Google вот в это.



    4. Кастомные буллиты


    Для создания кастомных буллитов для списка можно использовать content вместе с псевдоэлементом ::before

    В CSS, указанном ниже, я использую два класса .comlete и .incomplete, чтобы отличить два типа буллитов.



    Бонус: хлебные крошки в навигации

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

    Поскольку слеши и другие символы, используемые для разделения хлебных крошек, это стилистика, имеет смысл определить их в CSS. Как и во многих других примерах в этой статье, эффект основан на псевдоклассе — last-child. Он доступен только в CSS3:

    .breadcrumb a:first-child::before {
      content: " » ";
    }
     
    .breadcrumb a::after {
      content: " /";
    }
     
    .breadcrumb a:last-child::after {
      content: "";
    }


    5. Параллакс-изображения


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

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

    CSS-пример (только CSS)

    Здесь неотъемлемым элементом является background-attachment: fixed, он привязывает положение фонового изображения к определенной позиции. Картинка остается на месте, в то время, как окно, из которого она видна, прокручивается. Создается впечатление, что картинка находится позади всего сайта. Для того, чтобы заменить этот эффект на противоположный, указываем background-attachment: scroll.


    CSS + JavaScript


    6. Анимация с обрезанными изображениями


    Как и в случае «липкого» футера, до появления CSS3 было сложно сделать анимацию с обрезанными изображениями. Сейчас мы получили object-fit и object-position, которые вместе позволяют вам изменить размеры изображения без влияния на соотношение сторон картинки.

    Раньше нужно было использовать редактор изображений. Большим преимуществом CSS3 является возможность сделать изменение размеров изображений частью анимации.

    Вот пример с тэгом . В этом случае можно воспользоваться преимуществом псевдокласса :checked, и JavaScript не нужен.


    7. Режимы смешивания


    Если вы знакомы с Photoshop, то хорошо понимаете преимущества режимов смешивания (blend modes) для достижения различных интересных эффектов. Но знаете ли вы, что эти же режимы доступны и в CSS?

    Вот примеры использования blend modes для страниц Medium c background-color — lightblue и blend-mode — difference:



    Вы можете применять эти режимы не только для работы с фоном. Свойство mix-blend-mode позволяет смешивать элементы с фоном. Так, например, при помощи mix-blend-mode — color-dodge и фона lightsalmon можно получить такой эффект.



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

    Да, есть проблема с Chrome 58+, который неверно рендерит элементы, установленные в прозрачных тегах или . Быстрый фикс — добавить background-color — white.


    8. Pinterest style — имиджборд


    CSS Grid и Flexbox значительно упростили создание различных типов адаптивных макетов, позволив без проблем центрировать элементы на странице по вертикали.

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



    Лучший способ добиться этого — использовать набор свойств колонок CSS. Чаще всего они используются для создания нескольких колонок текста в газетном стиле, но есть и другой пример использования.

    Чтобы все заработало, нужно обернуть элементы в div и установить свойства column-width и column-gap.

    Затем, чтобы предотвратить разделение элементов между двумя колонками, добавить параметр column-break-inside:


    Пример выше — использование псевдокласса :not(). Здесь используется :hover.

    А какие приемы при работе с CSS используете вы? Укажите их в комментариях — уверен, это будет полезно для всех читателей.

    Skillbox рекомендует:

    Skillbox
    300.85
    Онлайн-университет профессий будущего
    Share post

    Comments 17

      +2
      Подглядел свойство object-fit — очень полезное, спасибо! Как-то не встречал раньше.

      Вариант с липким футером ещё можно организовать так:
      #document { 
          min-height: 100vh;
          display: flex;
          flex-direction: column;
      }
      
      footer {
          margin-top: auto;
      }
        0
        Пример с чекбоксами на MacOS в Chrome 72:
        image
          0
          Ибо всё это грязные хаки, как и почти всё во фронтенде современном(и не очень).
          +1

          С паралаксом не все так просто. Демка CSS паралакса не работает с мобильном хроме, а JS версия заметно лагает. В общем получился пример как делать не надо. Сможете сделать работу над ошибками и показать в следующей статье нормальное решение?

          –1
          1. «Липкий» футер

          До появления CSS3 этого эффекта было сложно добиться


          position: fixed; bottom: 0; width: 100%;

          height задавалась отдельно под mobile и desktop в отдельных css с помощью link media="...".
          Ничего сложного.
            0
            Ага, только при этом футер может закрывать собой часть контента. Надо еще «болванку» в контенте под него городить.
              +1
              body { padding-bottom: xxx; }
                0
                Есть другие способы, без указания высоты в пикселях, так как это грязный костыль.
                  0
                  Только не будет работать с динамической высотой футера(а она в более половины случаев такая). А тут работает.
                    0
                    Динамическая высота футера — это когда на моем мобильнике верхняя половина сайта — это прилипший хэдер с меню, разросшийся до 50%, а нижняя — «динамический футер», который разросся в 50%? Ненужно.
                      0
                      Динамический, это сколько нужно, столько и будет. Не о мобильниках речь.
              0
              На хабре опять дизайн поменяли?
              Как понять, что это перевод и где ссылка на оригинал?
              medium.com/@bretcameron/parallax-images-sticky-footers-and-more-8-useful-css-tricks-eef12418f676
                0
                Спасибо за Night Mode, object-fit и режим смешивания — не знал об этом. Теперь надо не забыть и применить где-нибудь.
                Вот поддержка object-fit, если что.
                image
                  +1
                  Параллакс-изображения на CSS обычная фиксация фонового изображения. А вот именно настоящий параллакс на чистом CSS реализуется примерно так — Performant Parallaxing
                    0

                    Это похоже первый пример который я увидел, который хорошо работает на iOS.
                    Спасибо.

                    0
                    Постоянный режим Night Mode

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


                    Я пытался разобраться почему так, но так и не получилось

                    Only users with full accounts can post comments. Log in, please.