8 трюков с функциями в CSS

8 трюков с функциями в CSS

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

Тултипы на чистом CSS

Множество веб-сайтов до сих пор используют JS для создания тултипов, однако сейчас их намного проще сделать через CSS. Самый простой способ – это добавить текст тултипа в data-атрибут в HTML коде. Например, data-tooltip=»…». Для отображения текста тултипа внутри функции attr() вам необходимо добавить следующий код CSS к уже имеющейся разметке:

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

Пояснений не нужно ведь, правда? Конечно, необходимо добавить кода и нормально стилизовать тултип, но не беспокойтесь. Чисто для этих целей есть специальная библиотека, написанная на CSS, Hint.css.

Использование пользовательских 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);
    ...
}

Ниже показан пример превью изображения с всплывающим заголовком по событию hover:

Обратите внимание: у генерируемого контента могут возникнуть проблемы с доступностью. Тут вам поможет статья на тему доступности генерируемого CSS контента.

CSS Счетчики

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

Не стоит использовать CSS счетчики на нумерованных списках (ol). Однако они отлично подходят для постраничной навигации или для отображения чисел под элементами галереи. Вы даже можете посчитать количество выбранных элементов, что не может не впечатлить, учитывая тот крошечный код, который за это отвечает (и совсем без JS).

CSS счетчики также отлично подходят для динамической смены номеров в списке элементов, которые можно перетасовать при помощи мыши:

Как и с предыдущим примером, помните, что с генерируемым контентом возникают проблемы с доступностью.

Эффект матового стекла при помощи CSS фильтров

С выходом iOS 7 Apple подарили нам эффект матового стекла – полупрозрачный, размытый элемент, который похож на матовое стекло. Благодаря Apple, этот эффект стал появляться во многих местах. Воссоздать эффект довольно сложно. До появления CSS фильтров эффект матового стекла приходилось имитировать через размытые изображения. На данный момент CSS фильтры полностью поддерживаются почти во всех браузерах, воссоздать этот эффект намного проще.

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

Использование HTML тегов в качестве фоновых изображений

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

Возможности функции почти бесконечны, вот пример с MDN.

Умные сетки при помощи calc()

Жидкие сетки – отличный инструмент, однако есть несколько серьезных проблем. К примеру, нельзя сделать разделители сверху и снизу одного размера с разделителями слева и справа. Кроме того, в зависимости от используемой системы сеток, разметка просто захламлена. Даже flexbox нельзя назвать лучшим решением, однако с функцией calc(), которую можно использовать в качестве значения в CSS, сетки могут стать гораздо лучше. В этом уроке на SitePoint Джордж Марцукос показывает несколько практических примеров, среди которых сетка-галерея с идеальными отступами. С CSS препроцессорами создание системы сеток может стать невероятно простым занятием, а сама сетка будет очень проста в обслуживании. Поддержка функции очень хорошая, обязательно используйте функцию calc().

Выравнивание элементов со свойством position: fixed при помощи CSS функции calc()

Еще один пример использования функции calc() – выравнивание элементов с фиксированным позиционированием. К примеру, у вас есть блок-обертка для контента с жидкими отступами слева и справа, и вы хотите точно выровнять фиксированный элемент внутри контейнера. Вам нужно было бы потратить кучу времени на вычисление точных значений для свойств right или left. Однако с calc() вы можете комбинировать относительные и абсолютные значения для идеального выравнивания:

.wrapper {
  max-width: 1060px;
  margin: 0 auto;
}
.floating-bubble {
  position: fixed;
  right: calc(50% - 530px); /* 50% - половина ширины контейнера */
}

Анимация при помощи функции cubic-bezier()

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

Использовать cubic-bezier() можно двумя способами. Первый – понять математику и создать свою функцию. Второй – воспользоваться генератором cubic-bezier. Если честно, я предпочел бы второй вариант.

Заключение

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

Автор: Anselm Urban

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree