От автора: каждый раз, когда я работаю над компонентом, которому требуется абсолютное позиционирование, я спрашиваю себя: действительно ли это необходимо? Я заметил несколько вариантов использования, в которых нет необходимости в position:absolute. Мне показалось это интересным, и захотел, задокументировать варианты использования, с которыми я обычно сталкивался, работая над проектами. В этой статье я рассмотрю несколько вариантов использования, в которых абсолютное позиционирование ...

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

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

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

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

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

От автора: в последнее время я заметил некую проблему при использовании пользовательских свойств, которая сбивает людей с толку, включая и меня, поэтому я постараюсь описать ее. Добавим в CSS пару пользовательских свойств: html { --color-1: red; --color-2: blue; } Давайте сразу воспользуемся ими, чтобы сделать фоновый градиент: html { --color-1: red; --color-2: blue; --bg: linear-gradient(to right, var(--color-1), var(--color-2)); } Теперь ...

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

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

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