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

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

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

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

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

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

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

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

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