CSS-приемов, которые сэкономят вам часы работы
Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:
- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.
#css | #полезности
Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:
- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.
#css | #полезности
👍9
Subgrid: расширенные возможности Grid для вложенных сеток
CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.
Когда это полезно
- Карточки внутри сетки должны выравниваться по тем же колонкам, что и заголовки/текст снаружи.
- Вложенные компоненты (например, таблицы или галереи) должны соблюдать общий ритм колонок.
- Когда нужен единый вертикальный ритм по всей странице.
Пример кода
В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.
Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.
#css
CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.
Когда это полезно
- Карточки внутри сетки должны выравниваться по тем же колонкам, что и заголовки/текст снаружи.
- Вложенные компоненты (например, таблицы или галереи) должны соблюдать общий ритм колонок.
- Когда нужен единый вертикальный ритм по всей странице.
Пример кода
<div class="wrapper">
<header>Заголовок</header>
<section class="content">
<article>
<h2>Карточка 1</h2>
<p>Описание...</p>
</article>
<article>
<h2>Карточка 2</h2>
<p>Описание...</p>
</article>
</section>
</div>
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* три колонки */
gap: 1rem;
}
.content {
display: grid;
grid-template-columns: subgrid; /* наследуем родительскую сетку */
grid-column: 1 / -1; /* растягиваемся на всю ширину */
gap: 1rem;
}
.content article {
background: #f3f3f3;
padding: 1rem;
}В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.
Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.
#css
👍4
Цветовые функции в CSS: от RGB до color-mix()
Цвета в вебе — это не только red, #000 или blue. В современном CSS есть целый набор цветовых функций, которые дают гибкость и позволяют делать красивые эффекты без графики.
1. rgb() и rgba()
Классика. Цвет задаётся через компоненты красный, зелёный, синий (0–255).
rgb(255, 0, 0) → ярко-красный
rgba(0, 0, 255, 0.5) → полупрозрачный синий
📌 a (alpha) отвечает за прозрачность от 0 до 1.
2. hsl() и hsla()
Более “человеческий” способ. Цвет задаётся через:
h — оттенок (0–360° по цветовому кругу)
s — насыщенность (%)
l — светлота (%)
Пример:
color: hsl(200, 100%, 50%); /* ярко-голубой */
Фишка: легко делать вариации цвета. Например:
hsl(200, 100%, 70%) → светлее
hsl(200, 100%, 30%) → темнее
3. color-mix()
Позволяет смешивать два цвета прямо в CSS.
Здесь берём 40% красного и 60% синего → получится фиолетовый.
Синтаксис:
color-mix(in <цветовое пространство>, <цвет1> <процент>, <цвет2> <процент>)
Можно использовать для плавных переходов, hover-эффектов и генерации палитры без дизайнера.
4. Градиенты
Градиенты — это тоже функции!
Линейный:
background: linear-gradient(90deg, red, blue);
Радиальный:
background: radial-gradient(circle, yellow, green);
Конический (новее):
background: conic-gradient(from 0deg, red, yellow, blue);
Их можно комбинировать и накладывать друг на друга для сложных эффектов.
Где это полезно
Создание цветовых схем, которые легко адаптировать под тёмную/светлую тему.
Смешивание корпоративных цветов под разные состояния UI.
Градиентные кнопки, бордеры, иконки без Photoshop.
Поддержка браузеров
rgb() и hsl() поддерживаются давно.
color-mix() — работает в Chrome, Safari и Firefox (новые версии).
Градиенты — тоже везде, включая мобильные.
#css | #полезности
Цвета в вебе — это не только red, #000 или blue. В современном CSS есть целый набор цветовых функций, которые дают гибкость и позволяют делать красивые эффекты без графики.
1. rgb() и rgba()
Классика. Цвет задаётся через компоненты красный, зелёный, синий (0–255).
rgb(255, 0, 0) → ярко-красный
rgba(0, 0, 255, 0.5) → полупрозрачный синий
📌 a (alpha) отвечает за прозрачность от 0 до 1.
2. hsl() и hsla()
Более “человеческий” способ. Цвет задаётся через:
h — оттенок (0–360° по цветовому кругу)
s — насыщенность (%)
l — светлота (%)
Пример:
color: hsl(200, 100%, 50%); /* ярко-голубой */
Фишка: легко делать вариации цвета. Например:
hsl(200, 100%, 70%) → светлее
hsl(200, 100%, 30%) → темнее
3. color-mix()
Позволяет смешивать два цвета прямо в CSS.
color: color-mix(in srgb, red 40%, blue);
Здесь берём 40% красного и 60% синего → получится фиолетовый.
Синтаксис:
color-mix(in <цветовое пространство>, <цвет1> <процент>, <цвет2> <процент>)
Можно использовать для плавных переходов, hover-эффектов и генерации палитры без дизайнера.
4. Градиенты
Градиенты — это тоже функции!
Линейный:
background: linear-gradient(90deg, red, blue);
Радиальный:
background: radial-gradient(circle, yellow, green);
Конический (новее):
background: conic-gradient(from 0deg, red, yellow, blue);
Их можно комбинировать и накладывать друг на друга для сложных эффектов.
Где это полезно
Создание цветовых схем, которые легко адаптировать под тёмную/светлую тему.
Смешивание корпоративных цветов под разные состояния UI.
Градиентные кнопки, бордеры, иконки без Photoshop.
Поддержка браузеров
rgb() и hsl() поддерживаются давно.
color-mix() — работает в Chrome, Safari и Firefox (новые версии).
Градиенты — тоже везде, включая мобильные.
#css | #полезности
👍5