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

За последние несколько лет область веб-интерфейсной разработки значительно продвинулась вперед. Однако веб-интерфейс, как его видят пользователи, остается прежним: HTML-разметка, стилизованная с помощью CSS.

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

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

1. Максимальное использование одноуровневых селекторов CSS

Проблема: вы теряете возможности оптимизации, не используя родственные селекторы.

Решение: используйте родственные селекторы всякий раз, когда это имеет смысл. Всякий раз, когда вы работаете со списком элементов и вам нужно по-разному относиться к первому или последнему элементу, вашим первым побуждением может быть использование псевдоселекторов CSS :first-child и :last-child .

Например, при создании значка меню-гамбургера только с помощью CSS:

См. Pen Maximizing CSS Sibling Selectors 1 Рико Моссесгельда (@ricotheque) на CodePen.

В этом есть смысл: у каждого бара есть margin-bottom, кроме последнего.

Тем не менее, тот же эффект возможен и через соседний родственный селектор (+):

См. Pen Maximizing CSS Sibling Selectors 2 Рико Моссесгельда (@ricotheque) на CodePen.

Это также имеет смысл: все, что находится после первого бара, имеет значение margin-top. Этот CSS-трюк не только экономит несколько дополнительных байтов (которые можно легко добавить для любого проекта среднего размера), но и открывает целый мир возможностей.

Рассмотрим этот список карт:

См. Pen Maximizing CSS Sibling Selectors 3 от Rico Mossesgeld (@ricotheque) на CodePen.

У каждого есть заголовок и текст, последний из которых скрыт по умолчанию. Если вы хотите сделать видимыми только текст активной карточки (с классом .active ) и те, что следуют за ней, вы можете сделать это быстро, используя только CSS:

См. Pen Maximizing CSS Sibling Selectors 4 от Rico Mossesgeld (@ricotheque) на CodePen.

С небольшим количеством JavaScript это также может быть интерактивным.

Однако, если полагаться только на JavaScript для всего этого, получится такой сценарий:

См. Pen Maximizing CSS Sibling Selectors 5 от Rico Mossesgeld (@ricotheque) на CodePen.

где включение jQuery в качестве зависимости позволяет вам иметь несколько короткий код.

2. Согласованный размер элемента HTML

Проблема: элементы HTML имеют несовместимые размеры в разных браузерах.

Решение: установите box-sizing для всех элементов в border-box . Долгое время являясь проклятием для веб-разработчиков, Internet Explorer сделал одну вещь правильно: правильно подогнал размеры блоков.

Другие браузеры смотрят на содержимое только при расчете ширины HTML-элемента, а все остальное рассматривается как лишнее. width: 200px пикселей div, с 20px пикселей и границей 2px , отображается как ширина 242 пикселя.

Internet Explorer считает отступы и границы частью ширины. Здесь div сверху будет иметь ширину 200 пикселей.

См. демо-версию Pen CSS Box Model 1 от Rico Mossesgeld (@ricotheque) на CodePen.

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

Если я скажу, что ширина составляет 200 пикселей, черт возьми, это будет поле шириной 200 пикселей, даже если у меня будет отступ 20 пикселей.

В любом случае следующий CSS поддерживает одинаковые размеры элементов (и, следовательно, макеты) во всех браузерах:

См. демо-версию Pen CSS Box Model 2 от Rico Mossesgeld (@ricotheque) на CodePen.

Второй набор селекторов CSS защищает HTML-элементы, стилизованные без пограничного блока, от нарушения макета.

box-sizing: border-box настолько удобен, что является частью относительно популярной структуры CSS под названием sanitize.css.

3. Динамические элементы высоты

Проблема: сохранение высоты HTML-элемента пропорциональной его ширине.

Решение: используйте вертикальный отступ вместо высоты.

Допустим, вы хотите, чтобы высота HTML-элемента всегда соответствовала его ширине в CSS. height: 100% не изменяет поведение по умолчанию элементов, соответствующих высоте его содержимого.

См. «Элементы динамической высоты пера 1» Рико Моссесгельда (@ricotheque) на CodePen.

Ответ заключается в том, чтобы установить высоту на 0 и использовать padding-top или padding-bottom вместо фактической высоты .container . Любое свойство может быть процентом от ширины элемента:

См. Pen Dynamic Height Elements 2 от Rico Mossesgeld (@ricotheque) на CodePen.

Теперь .container останется квадратом независимо от того, какой ширины он станет. overflow: hidden не позволяет длинному содержимому нарушать это соотношение.

Этот метод с некоторыми изменениями отлично подходит для создания встроенных видео, которые сохраняют соотношение сторон при любом размере. Просто выровняйте вставку с .container top и left through position: absolute , установите оба размера вставки на 100%, чтобы она «заполнила» .container , и измените padding-bottom .container чтобы он соответствовал формату видео. соотношение.

См. Pen Dynamic Height Elements 3 от Rico Mossesgeld (@ricotheque) на CodePen.

position: relative для .container гарантирует, что абсолютное позиционирование iframe работает правильно. Новый padding-bottom — это просто соотношение высоты, деленное на его ширину, умноженное на 100. Например, если соотношение сторон встраиваемого видео составляет 16:9, процентное соотношение padding-bottom должно быть 9, деленное на 16 (0,5625). и умножается на 100 (56,25).

4. Динамические элементы ширины

Проблема: сохранение пропорциональности ширины HTML-элемента его высоте.

Решение: используйте размер шрифта в качестве основы для размеров элемента.

А как насчет обратного или контейнеров, ширина которых меняется вместе с высотой? На этот раз на помощь приходит font-size . Помните, что ширина и высота могут быть в em , что означает, что они могут быть отношением font-size элемента.

Элемент с размером font-size 40px, шириной 2em и высотой 1em будет иметь ширину 80 пикселей (40 x 2) и высоту 40 пикселей (40 x 1).

См. «Элементы динамической ширины пера» Рико Моссесгельда (@ricotheque) на CodePen.

Хотите изменить высоту .container ? Изменить размер шрифта.

Единственное предостережение заключается в том, что невозможно заставить размер шрифта элемента автоматически совпадать с высотой его родителя только с помощью CSS. Тем не менее, этот метод позволяет сократить сценарий изменения размера Javascript из:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

к:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Вертикальное центрирование динамического контента

Проблема: Сохранение элемента HTML (с неизвестной высотой) вертикально по центру внутри другого.

Решение: установите для внешнего элемента значение display: table , а затем преобразуйте внутренний элемент в CSS table-cell . Или просто используйте CSS Flexbox.

Вертикально центрировать одну строку текста можно с помощью line-height :

См. «Вертикальное центрирование динамического содержимого пером 1» Рико Моссесгельда (@ricotheque) на CodePen.

Для нескольких строк текста или нетекстового содержимого ответом являются таблицы CSS. Установите для .container display значение table , затем используйте display: table-cell и vertical-align: middle для .text :

См. «Вертикальное центрирование динамического содержимого пером 2» Рико Моссесгельда (@ricotheque) на CodePen.

Думайте об этом CSS-трюке как о вертикальном эквиваленте margin: 0 auto . Flexbox в CSS3 — отличная альтернатива этому методу, если приемлема поддержка ошибок в Internet Explorer:

См. «Вертикальное центрирование динамического содержимого пером 3» Рико Моссесгельда (@ricotheque) на CodePen.

6. Столбцы одинаковой высоты

Проблема: поддержание столбцов одинаковой высоты.

Решение: для каждого столбца используйте большое отрицательное значение margin-bottom и компенсируйте его равным значением padding-bottom . Таблицы CSS и Flexbox также работают.

Используя float или display: inline-block , можно создавать параллельные столбцы с помощью CSS.

См. Столбцы одинаковой высоты пера 1 Рико Моссесгельда (@ricotheque) на CodePen.

Обратите внимание на использование box-sizing: border-box для правильного размера .cols . См. «Постоянный размер HTML-элемента» выше.

Границы первой и последней колонки не опускаются до конца; они не соответствуют высоте более высокого второго столбца. Чтобы это исправить, просто добавьте overflow: hidden в .row . Затем установите для каждого .col margin-bottom значение 99999px, а padding-bottom — 100009px (99999px + отступ 10px, применяемый к другим сторонам .col ).

См. Колонки одинаковой высоты пера 2 Рико Моссесгельда (@ricotheque) на CodePen.

Более простой альтернативой является Flexbox. Опять же, используйте это только в том случае, если поддержка Internet Explorer не является обязательной.

См. Колонки одинаковой высоты пера 3 Рико Моссесгельда (@ricotheque) на CodePen.

Еще одна альтернатива с лучшей поддержкой браузера: таблицы CSS (без vertical-align: middle ).

См. Колонки одинаковой высоты пера 4 Рико Моссесгельда (@ricotheque) на CodePen.

7. Выход за рамки

Проблема: прямоугольники и прямые линии настолько клишированы.

Решение: используйте transform: rotate(x) или border-radius .

Возьмите типичную серию панелей с рекламного сайта или брошюры: вертикальная стопка слайдов с единственной точкой. Его разметка и CSS могут выглядеть примерно так:

См. Pen Going Beyond the Box 1 Рико Моссесгельда (@ricotheque) на CodePen.

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

См. Pen Going Beyond the Box 2 Рико Моссесгельда (@ricotheque) на CodePen.

Здесь много всего происходит:

Высота каждой панели контролируется .pane-container. Отрицательное значение margin-bottom гарантирует, что панели плотно прилегают друг к другу.

• .pane-background , его дочерний .mask-box и его внук .image установлены в position: absolute . Каждый элемент имеет разные top , left , bottom и right значения. Это устраняет любые интервалы, создаваемые вращениями, описанными ниже.
• .mask-box поворачивается на 2 градуса (против часовой стрелки).
• .image поворачивается на -2 градуса, чтобы противодействовать .mask-box .
• .mask-box скрыто, так что его повернутые верхняя и нижняя стороны обрезают элемент .image .

Кстати, превратить изображение в круг или овал очень просто. Просто примените border-radius: 100% к элементу img .

См. Pen Going Beyond the Box 3 Рико Моссесгельда (@ricotheque) на CodePen.

Подобные модификации CSS в реальном времени уменьшают необходимость подготовки контента перед его публикацией на веб-сайте. Вместо того, чтобы применять маску круга к фотографии в Photoshop, веб-разработчик может просто применить тот же эффект с помощью CSS, не изменяя исходную фотографию.

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

8. Ночной режим

Проблема: реализовать ночной режим без создания новой таблицы стилей.

Решение: используйте фильтры CSS.

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

Полезным фильтром CSS является invert , который (неудивительно) инвертирует цвета всего внутри элемента. Это делает ненужным создание и применение нового набора стилей.

См. «Ночной режим пера 1» Рико Моссесгельда (@ricotheque) на CodePen.

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

См. Pen Night Mode 2 от Rico Mossesgeld (@ricotheque) на CodePen.

К сожалению, изображение выглядит странно, потому что его цвета были инвертированы со всем остальным. Хорошей новостью является то, что несколько фильтров могут применяться одновременно. Добавление фильтра hue-rotate возвращает изображения и другой визуальный контент в нормальное состояние:

См. Pen Night Mode 3 от Rico Mossesgeld (@ricotheque) на CodePen.

Почему это работает? hue-rotate(180deg) просто создает тот же эффект, что и invert(1) . Вот демонстрация того, как ночной режим CSS будет работать при переключении с помощью кнопки на основе JavaScript.

Получите максимум от CSS

Если в будущем браузер или способ создания веб-сайтов кардинально не изменятся, хорошее знание CSS останется фундаментальным навыком в сфере веб-разработки.

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

Дайте нам знать, если у вас есть какой-либо CSS-трюк, который вы считаете интересным и полезным, в разделе комментариев ниже.