Верстка \ CSS 3

Макет CSS Flexbox против  макета CSS Grid

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

Продолжить чтение

Верстка \ CSS 3

В добрый путь, Tailwind CSS

От автора: с годами CSS-фреймворки стали невероятно распространенными в веб-дизайне: эстетика Google Material Design постепенно проявляется в Сети, а библиотека плагинов и тем Bootstrap становится популярной по умолчанию.

Продолжить чтение

Верстка \ CSS 3

Понимание gap в CSS

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

Продолжить чтение

Верстка \ CSS 3

Меньше абсолютного позиционирования с современным CSS

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

Продолжить чтение

Верстка \ 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

7 полезных советов по CSS для улучшения ваших навыков

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

Продолжить чтение