#полезное #css #новичок #игры

Игра для изучаем гридов

Играть

#теория #html #css #новичок

Поток документа
Объяснение одной из основных концепций вёрстки и её составляющих: контекста форматирования, схлопывания отступов и выхода из потока

Ссылка

#теория #css #новичок

Блочная модель
Браузеры рисуют любой элемент на HTML-странице как прямоугольник. Как рассчитывается размер этого прямоугольника? Разберёмся с одной из основных концепций вёрстки

Ссылка

#полезное #css #html

Большой набор из 65 различных кастомных чекбоксов

Ссылка

#новичок #теория #css

Принцип каскада

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

#теория #новичок #css

Специфичность

Как браузер решает, какие стили применять к элементу? Разбираемся, почему у селектора есть вес

#html #css #новичок

Видео курс для новичков по основам HTML и CSS.
Для вашего удобства курсы доступны в двух форматах по плейлистам и цельными видео.

#полезное #css

Если вам необходим блок не стандартной формы, например скошенный край и тому подобное, то это можно сделать с помощью свойства clip-path. А поможет вам в этом инструмент - CSS clip-path maker. В нем есть уже готовые формы, а также можно сделать свою.

#полезное #html #css

Набор из 92 различных кнопок

#css

Знаете чем display: none отличается от visibility:hidden?

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

#полезное #css

nth-child генератор

Бывало у вас такое, что нужну было воспользоваться свойством nth-child, но не стандартным, а с более сложной последовательностью?
Данный генератор сильно упрощает работу с этим свойствам, выбираешь нужную последовательность элементов и генерируется 5 вариантов использования nth-child

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

В этой статье вы узнаете о интересном способе, который позволит полностью отказаться от использования контейнера и достичь того же эффекта.
#css #html

Разберем сегодня псевдокласс :is()

С его помощью можно сократить длинные селекторы, так как он позволяет выбирать несколько элементов с помощью одного правила.

Например вместо такой конструкции:

button:hover,
button:focus,
button.active {
background-color: black;
color: white;
}

Можно написать так:

button:is(:hover, :focus, .active) {
background-color: black;
color: white;
}

Согласитесь, выглядит красивее)

Также приклепляю статью, для более подробного ознакомления с псевдоклассом :is()
#css

#css
Псевдокласс :empty

Применяется для выбора элементов, которые не содержат никакого содержимого или других элементов внутри себя.

Заметьте, что он не будет выбирать элементы, которые пустые, но содержат пробельные символы (например, пробелы или переносы строк).

А если контент для элемента был добавлен с помощью псевдоэлемента ::before или ::after — он все равно считается пустым.

Выглядит интересно, но пользоваться им не приходилось. Так как на практике не встречал задач где его можно примененить.

Можно притянуть за уши несколько примеров. Например скрывать пустые теги из которых удалили содержимое. Либо как-то иначе стилизовать пустые кнопки и ссылки. Или бывают такие случаи, когда добавляешь декоративный элемент через пустой тег.

А что вы думаете на счет псевдокласс :empty? Есть идеи в каких случаях его можно использовать?

#css #игры
Flex Box Adventure

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

#css #игры
Grid Attack

Еще одна CSS игра. На этот раз для изучения гридов

#css
Псевдокласс :only-child

Выбирает элемент, который является единственным дочерним элементом. На практике крайне редко можно найти ему применение, особенно в статичных сайтах.

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

Также вместо :only-child можно использовать комбинацию :first-child:last-child. То есть элемент является первый и в тоже время последним, а значит единственным дочерним элементом.