Чистые стили намного более функциональны, чем может казаться. Давайте разберем несколько полезных примеров использования функций каскадных таблиц стилей.
Необязательно использовать JavaScript для создания подсказок. Чтобы вывести текст в блоке, можно просто использовать атрибут data-tooltip и функцию attr().
Функция attr() подходит не только для вывода коротких всплывающих подсказок. С ее помощью всего в несколько строк можно создать анимированное описание для изображений.
С помощью счетчиков можно делать непривычные для каскадных таблиц стилей вещи. Например, разметить страницы, или выводить количество элементов галереи. Или выводить количество выбранных элементов, всего в несколько строк кода и без JavaScript.
С помощью фильтров можно добиться эффекта размытости для элементов интерфейса, который появился в iOS 7.
Flexbox в качестве сетки – отличное решение, но имеет некоторые недостатки. Например, невозможно сделать расстояние между блоками сверху и снизу таким же, как слева и справа. Однако, если использовать в качестве значений расстояния функцию calc(), можно добиться лучших результатов выравнивания. В этом небольшом туториале можно ознакомиться с данным методом ближе.
Чтобы подобрать отступы для блока с фиксированным положением в контейнере с непостоянной шириной, можно потратить много времени. А можно воспользоваться функцией calc() и сочетать абсолютные и относительные величины для выравнивания по ширине.
Наиболее известные способы анимации с помощью linear и ease-in-out довольно ограничены. Однако, сложные анимации, вроде перемещения по кривой можно делать с помощью редко используемой функции cubic-bezier(). Если вы не знакомы с математической подоплекой кривых Безье, можно воспользоваться простым генератором.