8 хитрых приёмов, реализуемых с помощью одного лишь CSS

CSS может гораздо больше, чем вы от него ожидаете. С каждым годом этот язык становится всё мощнее, получая функционал, который раньше был только у JavaScript. В этой статье мы рассмотрим 8 хитрых трюков с CSS-функциями, для которых не нужен JS.

1. Подсказки (tooltips)

Многие сайты до сих пор используют JavaScript для создания подсказок, но самом деле на CSS их сделать гораздо проще. Самым лёгким решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip="…". Теперь можно использовать CSS для отображения текста подсказки в функции attr():

			.tooltip::after {
    content: attr(data-tooltip);
}
		

Всё предельно просто. Конечно, для стилизации нужно больше кода, но, к счастью, для этого есть прекрасная библиотека Hint.css.

2. Использование data-атрибутов и функции attr()

Мы уже использовали attr() для подсказок, но это не единственный способ её применения. В сочетании с data-атрибутами вы можете создать изображение-ярлык с заголовком и описанием, используя лишь одну строку HTML-кода:

			<a class="caption" href="#" data-title="Vulture" data-description="...">
    <img src="img.jpg" alt="Illustration" />
</a>
		

Теперь вы можете использовать функцию attr() для отображения заголовка и описания:

			.caption::after {
    content: attr(data-title);
    ...
}
		

Вот рабочий пример с анимацией, срабатывающей при наведении:

3. CSS-счётчики

То, что можно делать с CSS-счётчиками, похоже на магию. Это не самая известная функция языка, и многие считают, что она почти не поддерживается, но это не так:

See Can I Use css-counters? Data on support for the css-counters feature across the major browsers from caniuse.com.

Счётчики не стоит использовать для списков (<ol>), но они прекрасно подойдут для пагинации или отображения чисел в галерее. Также можно считать количество выбранных элементов, для чего нужно на удивление мало кода (а JavaScript и вовсе не нужен):

CSS-счётчики также прекрасно подходят для отображения динамически изменяющихся чисел в списках, которые можно пересортировать перетаскиванием:

4. Эффект “замерзшего стекла” при помощи CSS-фильтров

Ещё в iOS 7 Apple добавила эффект “замерзшего стекла” — полупрозрачные, размытые элементы. Этот эффект становится весьма популярным. Реализовать его раньше было не так уж и просто — до того, как появились CSS-фильтры, изображения приходилось искажать. Теперь же всё стало намного легче.

See Can I Use css-filters? Data on support for the css-filters feature across the major browsers from caniuse.com.

В будущем будет возможно создавать похожие эффекты при помощи свойства backdrop-filter и функции filter(), которые пока что поддерживаются только Safari.

5. Используем HTML-элементы в качестве фона

Обычно в качестве фона вы используете JPEG- или PNG-файл или градиент. Знали ли вы, что при помощи функции element() вы можете использовать <div> в качестве фонового изображения? В настоящее время функция element() поддерживается только Firefox:

See Can I Use css-element-function? Data on support for the css-element-function feature across the major browsers from caniuse.com.

Возможности почти безграничны, что демонстрирует пример с MDN.

6. Улучшенная сетка при помощи calc()

Гибкие сетки — это очень полезная штука, но при работе с ними возникают различные проблемы, связанные в основном с разметкой и размерами блоков. Даже flexbox не справится с этой задачей в одиночку. Но функция calc(), которую можно использовать в качестве значения, может принести много пользы. В этом руководстве приведены примеры использования этой функции. Используя препроцессор наподобие Sass и функцию calc(), создать удобную сетку будет совсем несложно. Кроме того, эта функция поддерживается почти всеми браузерами.

See Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

7. Выравнивание фиксированных элементов

Функцию calc() также можно использовать для выравнивания элементов с фиксированным положением. Например, если у вас есть обёртка с полями переменного размера слева и справа и вам нужно точно выровнять элемент внутри обёртки, то вам придётся поломать голову, выбирая правильный размер отступа. С calc() вы можете сочетать абсолютные и относительные величины для идеального выравнивания:

			.wrapper {
    max-width: 1060px;
    margin: 0 auto;
}
.floating-bubble {
    position: fixed;
    right: calc(50% - 530px); /* 50% - half your wrapper width */
}
		

Вот пример:

8. Анимации при помощи cubic-bezier()

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

cubic-bezier() можно использовать двумя способами — понять её математическую основу и написать самому или использовать генератор. Думаю, второй вариант предпочтительнее.

Заключение

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