7 полезных приемов с функциями на чистом CSS

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

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

Необязательно использовать 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 потрясающих техник, библиотек и примеров для стилей