Статьи

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

Сентябрь 10, 2018

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

1. Чистые подсказки CSS

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

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

Совершенно очевидно, верно? Конечно, для создания стиля всплывающих подсказок требуется больше кода, но не бойтесь, для этой цели есть замечательная , чистая библиотека CSS, называемая Hint.css .

2. (Ab) использование пользовательских атрибутов данных и функции attr()

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

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

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

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

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

Примечание. Созданный контент может быть проблематичным с точки зрения доступности. Эта статья о поддержке доступности для сгенерированного CSS контента является полезным чтением на эту тему.

3. Счетчики CSS

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

Хотя вы не должны использовать счетчики CSS для упорядоченных списков ( <ol> Вы также можете подсчитать количество проверенных элементов, что весьма впечатляет, учитывая, насколько мало кода вам нужно (и нет JavaScript):

Счетчики CSS также отлично подходят для динамического изменения чисел в списке элементов, которые можно переупорядочить путем перетаскивания:

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

4. Матовое стекло с фильтрами CSS

С iOS 7 Apple принесла нам эффект «матового стекла» — полупрозрачные размытые элементы, которые выглядят как окно из матового стекла. Этот эффект начинает появляться во многих местах, вдохновленных реализацией Apple. Воссоздать этот эффект немного сложно — до появления CSS-фильтров вы должны были создать эффект матового стекла с размытыми изображениями . Теперь, когда CSS-фильтры полностью поддерживаются практически всеми основными браузерами, гораздо проще воссоздать этот эффект .

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

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

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

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

6. Более умные Сетки с calc()

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

7. Выравнивание position:fixedcalc()

Другой вариант использования функции 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()понимание математики, стоящей за ней, и создание ее самостоятельно, или использование генератора cubic-bezier .

Честно говоря, я бы пошел с последним.

Вывод

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

34
Share: