Нажмите "Enter" для перехода к содержанию

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

0

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *