​Интерактивная шпаргалка по CSS Grid Layout

CSS Grid Layout — это способ двумерной раскладки. Flexbox позволяет полноценно управлять элементами только по одной оси и чем-то похож на display: table.

Grid даёт возможность контролировать одновременно и строки, и столбцы, в которых располагаются элементы. Эти элементы можно двигать внутри Grid-сетки практически как вздумается.

И вот отличная шпаргалка, которую можно не только почитать, но и посмотреть, что будет, если изменить некоторые параметры. Есть подробности о том, как формировать сетки, изменять расположение элементов, делать выравнивание и интервалы.

#css #фронтенд

​Игры для освоения CSS

Представляем вам 10 захватывающих игр, которые превратят процесс изучения CSS в увлекательное приключение.

От «Flexbox froggy», где вы помогаете лягушке найти свой путь, до «CSS Diner», где вы учитесь применять селекторы.

#задачи #css

​Четыре новые функции CSS

Вы умеете создавать красивые анимации на сайтах? Хотите, чтобы пользователи оставались на ваших страницах подольше? Тогда эта статья для вас!

Автор расскажет, как при помощи 4 новых функций CSS сделать плавные переходы и анимированные эффекты появления и исчезновения элементов.

#статья #css

​Доводы в пользу REM в CSS

Размеры экранов постоянно меняются, и статичные px уже не подходят. Клиенты настраивают браузеры под свои нужды, и сайты должны к ним адаптироваться.

Единицы rem позволяют создать масштабируемый дизайн, который сохраняет пропорции. В этой статье вы узнаете, почему лучше использовать rem вместо px и зачем соблюдать этот тренд.

#статья #css

​​Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

#основы #собеседование #css

Учимся анимировать в CSS за 20 минут

CSS предлагает два метода анимирования: переходы (transitions) и анимации (animations). Переходы плавно изменяют свойства, а анимации контролируются по ключевым кадрам.

Для создания перехода используются свойства transition: duration, timing function, delay. Анимации создаются с помощью @keyframes и параметров, таких как имя и длительность.

Также есть утилитарные классы, которые упрощают использование анимаций: slideInLeft, slideInRight, rotate и bounce.

Держите статью, где подробно разбирают процесс создания различных анимаций и объясняют принцип их работы.

#css #frontend