Верстка \ CSS 3

Псевдоэлементы before и after в CSS

От автора: полагаю, многим из вас знакомы псевдоэлементы, которые можно получить и стилизовать с помощью before и after в CSS. Часто их используют для оформления списков, элементов меню на списках, цитат и т.д. В этом уроке будет показан еще один интересный вариант использования псевдоэлементов, который можно применить для «битых» изображений.

Читать далее

Верстка \ CSS 3

Единицы измерения контейнерных запросов CSS

От автора: несколько дней назад я увидел твит Мириам Сюзанн о поддержке единиц измерения запросов CSS. Первоначально это было предложено Уной Кравец на Github. Я не мог не поэкспериментировать с ними и посмотреть, как мы можем получить еще больше преимуществ от контейнерных запросов CSS.

Читать далее

Верстка \ CSS 3

Функция CSS attr и tooltip без JS

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

Читать далее

Верстка \ CSS 3

Библиотека MoreToggles для Checkbox

От автора: одним из элементов форм, которые стилизовать достаточно проблематично, являются чекбоксы. В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css, которая поможет решить данную проблему. Библиотека использует только CSS и сделает ваши чекбоксы стильными, предложив более десяти вариантов самых разных оформлений.

Читать далее

Верстка \ CSS 3

Практическое использование функций CSS: calc, clamp, min, max

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

Читать далее

Верстка \ CSS 3

Инструменты CSS Grid в DevTools

От автора: CSS Grid — это очень мощная система макета CSS, которая позволяет веб-разработчикам создавать сложный двухмерный макет и устанавливать правила для каждого дочернего элемента в сетке, такие, как размер, выравнивание и упорядочение. CSS Grid был представлен после того, как стал популярным Flexbox, и вместе они могут помочь разработчикам добиться лучшего адаптивного дизайна без сложных хуков по выравниванию или разметки с помощью JavaScript.

Читать далее

Верстка \ CSS 3

Вложенность CSS, специфика и вы

От автора: вложенность CSS скоро появится в браузерах. С помощью вложенности, с которой вы, возможно, знакомы по Sass или Less, вы можете значительно сократить количество повторяющихся селекторов. Но вы также можете загнать себя в угол, если не будете осторожны. Это обзор того, как вы уже можете использовать ее сегодня, подводных камней и того, как их избежать.

Читать далее