Как стать автором
Обновить
2898.8
Рейтинг
Маклауд
Облачные серверы на базе AMD EPYC

Трюки CSS, которые сделают из вас ниндзя верстки

Блог компании МаклаудРазработка веб-сайтовCSSСовершенный код

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


Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").


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


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


Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.


grid + place-items


Здесь вы найдете полное визуальное руководство по Grid и Flexbox.


Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.


.parent {
  display: grid;
  place-items: center;
}

place-items является сокращением для justify-items и align-items.


Это свойство может использоваться как в отношении одной, так и в отношении сразу нескольких (дочерних) ячеек.


.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center
}

flex + margin


Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto.


.parent {
  display: flex;
}

.child {
  margin: auto;
}

Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:


.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex + gap


Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):


.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

inline-flex


Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox. Лучше один раз увидеть:



columns


Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки.


Свойство columns является сокращением для column-count и column-width.



background-repeat


Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ:



background-blend-mode


Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.


Возможные значения:


  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • overlay
  • saturation
  • screen
  • soft-light

Когда-нибудь работали с Photoshop? Тогда, думаю, вы понимаете, о чем идет речь.


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



background-clip


Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text:



filter


Свойство filter позволяет применять к элементам некоторые художественные эффекты.


Возможные значения-функции:


  • url() — svg-фильтр
  • blur() — размытие
  • brightness() — яркость
  • contrast() — контрастность
  • drop-shadow() — об этой функции поговорим отдельно
  • grayscale() — обесцвечивание
  • hue-rotate() — оттенок
  • invert() — инверсия
  • opacity() — прозрачность
  • saturate() — насыщенность
  • sepia() — сепия

Изменение цветовой темы (или схемы) сайта для ленивых:



Здесь вы найдете пример использования filter для реализации фильтров Instagram.


drop-shadow


Свойство filter со значением drop-shadow(), в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно размещается.



object-fit


Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования.


Значение scale-down, например, позволяет сохранять пропорции изображения независимо от размеров блока:



Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока.


cursor


Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer), мы имеем возможность определять собственные изображения и svg?



scroll-behavior


Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы:



text-overflow


Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера.


p {
  text-overflow: ellipsis;
}

caret-color


Свойство caret-color позволяет определять цвет каретки — видимого маркера (|), указывающего на место вставки следующего символа.


textarea {
  caret-color: #00b74a;
}

scroll-snap


Группа свойств scroll-snap (scroll-span-type, scroll-snap-align и scroll-snap-stop) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:



Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS.


supports


Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.


/* проверяем поддержку свойств `grid` и `image-rendering` */
@supports (display: grid) {
  section {
    display: grid;
  }
}

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

var()


Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение.


/* определяем пользовательскую переменную - основной цвет фона */
:root {
  --primary-bg-color: #1266f1;
}

/* и используем ее */
button {
  background-color: var(--primary-bg-color)
}

calc()


Функция calc() используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время или число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений.


Обычно, абсолютно позиционируемый элемент выравнивается по горизонтали и вертикали следующим образом:


.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Если нам известны размеры такого элемента, мы можем сделать следующее:


/* допустим, высота элемента составляет 100px, ширина - 200px */
.modal {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 100px);
}

attr()


С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях.


Реализация всплывающей подсказки средствами CSS:



:target


Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript:



::marker


Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after. Сейчас существует более простой способ — псевдоэлемент ::marker.



::selection


Псевдоэлемент ::selection позволяет стилизовать выделение текста.


p::selection {
  background-color: #262626;
  color: #fbfbfb;
}

Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:



Благодарю за внимание и хорошего дня!




Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту.


Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!


Теги:cssразработка сайтовверсткаvdsvpsдешевый vpsбыстрый vds
Хабы: Блог компании Маклауд Разработка веб-сайтов CSS Совершенный код
Всего голосов 37: ↑35 и ↓2 +33
Просмотры25.7K

Похожие публикации

Лучшие публикации за сутки

Информация

Дата основания
Местоположение
Россия
Сайт
macloud.ru
Численность
11–30 человек
Дата регистрации
Представитель
Mikhail

Блог на Хабре