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

Всплывающие подсказки

Необязательно использовать JavaScript для создания подсказок. Чтобы вывести текст в блоке, можно просто использовать атрибут data-tooltip и функцию attr().

.tooltip::after {

  content: attr(data-tooltip);

}

Описание на изображении с помощью функции attr()

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

See the Pen Thumbnail with Animated Captions by SitePoint (@SitePoint) on CodePen.

Счетчики

С помощью счетчиков можно делать непривычные для каскадных таблиц стилей вещи. Например, разметить страницы, или выводить количество элементов галереи. Или выводить количество выбранных элементов, всего в несколько строк кода и без JavaScript.

See the Pen Selection Counter by Will Boyd (@lonekorean) on CodePen.

Эффект обледенелого стекла, как у Apple

С помощью фильтров можно добиться эффекта размытости для элементов интерфейса, который появился в iOS 7.

See the Pen Frosted glass effect with CSS & SVG by Matori (@Matori) on CodePen.

Удобная сетка с помощью calc()

Flexbox в качестве сетки – отличное решение, но имеет некоторые недостатки. Например, невозможно сделать расстояние между блоками сверху и снизу таким же, как слева и справа. Однако, если использовать в качестве значений расстояния функцию calc(), можно добиться лучших результатов выравнивания. В этом небольшом туториале можно ознакомиться с данным методом ближе.

Выравнивание элементов с position: fixed с помощью calc()

Чтобы подобрать отступы для блока с фиксированным положением в контейнере с непостоянной шириной, можно потратить много времени. А можно воспользоваться функцией calc() и сочетать абсолютные и относительные величины для выравнивания по ширине.

See the Pen Aligning “position: fixed” elements with CSS calc() by SitePoint (@SitePoint) on CodePen.

Сложная анимация с помощью функции cubic-bezier()

Наиболее известные способы анимации с помощью linear и ease-in-out довольно ограничены. Однако, сложные анимации, вроде перемещения по кривой можно делать с помощью редко используемой функции cubic-bezier(). Если вы не знакомы с математической подоплекой кривых Безье, можно воспользоваться простым генератором.

Дополнительные материалы по теме

Polyscape в таблицах стилей
20 потрясающих техник, библиотек и примеров для стилей