Шпаргалка по Flexbox

Если все никак не получается запомнить принцип работы и основные свойства Flexbox, то вот вам годная шпаргалка - https://darekkay.com/flexbox-cheatsheet/flexbox-cheatsheet.pdf

Можно даже распечатать, чтоб под рукой всегда была и не гуглить каждый раз)

Ну а тем, кто хочет более подробно — https://yoksel.github.io/flex-cheatsheet/
Это интерактивная шпаргалка, можно кликать, экспериментировать и сразу видеть, как меняется поведение элементов. Отлично подходит для визуалов и тех, кто учится на практике.

Пользуйтесь на здоровье)

Когда сделал небольшие изменения в CSS)

Эффект подсветки ссылок

Давайте разберём интересный hover-эффект для ссылок, при наведении на ссылку текст плавно заполняется золотым фоном, создавая эффект маркера-выделителя.

HTML:

<p>
  Lorem Ipsum is simply <a href="#">dummy text</a> of the printing 
  and typesetting industry.
</p>

Стилизация ссылок:

a {
  color: black;
  text-decoration: none;
  background: linear-gradient(to bottom, white 50%, gold 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position 400ms ease;
  border-bottom: 2px solid gold;
  font-weight: 500;
}

■ text-decoration: none — убираем стандартное подчёркивание.
■ linear-gradient(to bottom, white 50%, gold 50%) — создаем градиент, где верхняя половина белая, а нижняя золотая.
■ background-size: 100% 200% — растягиваем фон в два раза по высоте.
■ background-position: 0 0 — изначально показываем только верхнюю (белую) половину.
■ border-bottom: 2px solid gold — золотая линия снизу как индикатор ссылки.

Анимация при наведении:

a:hover {
  background-position: 0 100%;
}

При наведении мы сдвигаем фон так, чтобы показывалась золотая половина. Благодаря transition это происходит плавно.

Теперь даже простые ссылки засияют новыми красками)

Пример кода здесь.

Основные способы скрыть элемент в CSS

Иногда при верстке нужно скрыть элемент на странице. В CSS существует несколько способов это сделать — каждый из них имеет свои особенности и сценарии применения. Давайте разберём самые популярные способы.

1. display: none
Самый радикальный способ — элемент полностью удаляется из потока документа.

.hidden {
  display: none;
}

■ Элемент не занимает места на странице.
■ Не доступен для скринридеров.
■ Не учитывается в layout.
■ Используется для полного скрытия элементов.

2. visibility: hidden
Элемент становится невидимым, но продолжает занимать место.

.invisible {
  visibility: hidden;
}

■ Резервирует пространство в layout
■ Не доступен для взаимодействия.
■ Полезен, когда нужно сохранить размеры блока.

3. opacity: 0
Делает элемент прозрачным через управление непрозрачностью.

.transparent {
  opacity: 0;
}

■ Элемент остается в потоке и занимает место.
■ Доступен для взаимодействия.

4. position: absolute с выносом за экран
Физически перемещает элемент за пределы видимой области.

.offscreen {
  position: absolute;
  left: -9999px;
}

■ Доступен для скринридеров.
■ Не влияет на layout.

5. clip-path
Обрезает видимую область элемента до нуля.

.clipped {
  clip-path: inset(100%);
}

■ Элемент остается в DOM
■ Доступен для скринридеров.

6. width и height = 0
Схлопывает размеры элемента.

.collapsed {
  width: 0;
  height: 0;
  overflow: hidden;
}

■ Не занимает места.
■ Содержимое скрыто через overflow.

7. transform: scale(0)
Масштабирует элемент до нулевого размера.

.scaled {
  transform: scale(0);
}

■ Отлично анимируется.
■ Резервирует исходное пространство.

Выбирайте способ в зависимости от задачи: нужна ли вам анимация, сохранение места или полное исчезновение элемента)

Отображаем структуру файлов на веб-странице

Если вам вдруг когда-нибудь понадобится показать структуру проекта на сайте — есть простое и элегантное решение: ASCII-графика.

Всего три символа позволяют построить визуальное дерево файлов:

├── — ответвление (не последний элемент)
└── — последнее ответвление
│ — вертикальная линия (связь с родителем)

Оборачиваем всё в тег <pre> — и готово.

HTML:

<div class="card">
  <pre>
project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
  </pre>
</div>

CSS:

pre {
  font-family: monospace;
  font-size: 18px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  color: #2d3748;
}

Добавляем моноширинный шрифт + немного стилизации и все, нормальная наглядная структура проекта готова)

Пример можно глянуть здесь.

Расширяющийся сайдбар с помощью :has() и Grid

Давайте сегодня разберем еще один интересный пример использования псевдокласса :has(), сделаем сайдбар с плавным раскрытием.

HTML:

<div class="grid">
  <nav class="sidebar">…</nav>
  <div class="content">…</div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  transition: grid-template-columns 400ms;
}

Контейнер изначально имеет две колонки: 60px (узкий сайдбар) и 1fr (основной контент).

Ключевая фишка — селектор :has():

.grid:has(.sidebar:hover) {
  grid-template-columns: clamp(250px, 25%, 400px) 1fr;
}

При наведении курсора на сайдбар срабатывает :has(), который меняет ширину колонки с помощью функции clamp() - минимум 250px, максимум 400px, но не более 25% от ширины окна.

Добавляем плавность и появление текста:

.sidebar .text {
  opacity: 0;
  transition: opacity 200ms;
}

.grid:has(.sidebar:hover) .sidebar .text {
  opacity: 1;
  transition-delay: 100ms;
}

Отличный пример того возможностей современного CSS)

Код, как всегда здесь.

Крутой учебник по JS

Нашел книгу "JavaScript для тупых", необычное название, конечно)

Но суть в том, что это не про IQ, а про то, что стандартная академическая подача материала работает далеко не для всех.

Вот выдержка с первой страницы:

Материал будет подаваться жестко.

Знаешь почему?

Потому что ты пришёл на курс "JavaScript для тупых", следовательно, обычная подача материала тебе не подходит по одной из нижеприведенных причин:

1. ты реально тупой, как угол в 179°, что не вывозишь то, что вывозит большинство адекватных людей;
2. для тебя обычная подача скучна и от этого материал не усваивается, либо усваивается на весьма короткий срок;
3. при обычной подаче не понимаешь, что происходит, и что от тебя требуется и зачем;
4. тебе просто-напросто лень читать огромные мануалы.

В общем, если вы:
■ только начинаете и засыпаете над толстыми талмудами;
■ уже что-то знаете, но чувствуете, что в голове каша;
■ просто цените неформальный и живой подход в обучении;

то попробуйте — этот учебник может стать для вас отличным глотком свежего воздуха)

Книга бесплатная и лежит здесь.

Магия CSS)

Flexbox Defense

Нашел еще одну классную игру-тренажер, похожа на Flexbox Froggy, но эта отлично зайдет тем, кто любит игры в жанре Tower Defense)

Нужно с помощью свойств flexbox правильно располагать башни, чтобы успешно отражать атаки.

Ссылка на игру - http://www.flexboxdefense.com/

Проводим выходные с пользой)

Скрытая кнопка поиска

Давайте сегодня разберем интересный прием с псевдоклассом :placeholder-shown — анимированную кнопку поиска, которая появляется только когда пользователь начинает вводить текст.

HTML:

<form>
  <input type="text" placeholder="Поиск...">
  <input type="submit" value="Поиск">
</form>

CSS:

input[type="submit"] {
  opacity: 0;
  pointer-events: none;
  transition: .3s;
}

input:not(:placeholder-shown) + input[type="submit"] {
  opacity: 1;
  pointer-events: auto;
}

Изначально:
■ Кнопка скрыта opacity: 0
■ Не реагирует на клики pointer-events: none

При вводе текста:
■ Псевдокласс :not(:placeholder-shown) определяет, что поле не пустое
■ Кнопка плавно появляется transition: .3s
■ Становится кликабельной pointer-events: auto

Теперь кнопка будет появляться, когда она действительно нужна)

Затестить код можно здесь.

Заголовок с анимированным градиентом

Мы уже разбирали, как сделать заголовок с градиентом, давайте теперь разберем, как сделать заголовок с анимированным градиентом.

HTML:

<h1>Формошлёп</h1>

CSS:

h1 {
  background: linear-gradient(90deg, #00f5a0, #00d2ff, #7b61ff, #ff4d6d);
  background-size: 200% 100%;
  background-clip: text;
  color: transparent;
  animation: glide 2s linear infinite alternate;
}

@keyframes glide {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

■ Создаем линейный градиент с четырьмя цветами.
■ background-size: 200% растягивает градиент в два раза, чтобы цвета могли "скользить" по тексту.
■ background-clip: text обрезает фон по контуру текста, а color: transparent делает сам текст прозрачным.

С помощью @keyframes мы анимируем background-position, перемещая градиент слева направо и обратно. infinite делает цикл бесконечным, alternate заставляет анимацию воспроизводиться в обратном порядке.

Как говорится — простенько, но со вкусом)

Код можно посмотреть здесь.

Перемещаем выбранный тег в начало списка без JS

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

Ключ к этому эффекту — свойство order внутри Flexbox-контейнера, но давайте по порядку)

HTML:

<label class="tag">
  <input type="checkbox">
  HTML5/CSS3
</label>
<label class="tag">
  <input type="checkbox">
  JavaScript
</label>

Чекбокс спрятан внутри <label>, что позволяет кликать по всему тегу.

Скрываем чекбокс:

.tag input {
  display: none;
}

Располагаем теги в ряд:

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Динамическое изменение порядка:

.tag:has(:checked) {
  background: #007bff;
  color: white;
  order: -1;
}

Селектор :has(:checked) определяет, отмечен ли чекбокс внутри тега. Свойство order: -1 перемещает элемент в начало.

Так просто с помощью :has() и Flexbox мы получаем крутой интерактивный интерфейс)

Пример кода здесь.

Сказал Стетхэм)

Анимация ::marker в списке

Нашел интересный способ анимации маркеров списка. Разберем, как сделать, чтобы при наведении на элемент списка плавно появлялся наш кастомный маркер.

HTML:

<ul>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
  <li>Четвертый</li>
  <li>Пятый</li>
</ul>

Делаем обычный список.

CSS:

li::marker {
  content: "🔥 ";
  color: transparent;
  transition: color 200ms;
}
li:hover::marker {
  color: black;
}

■ content: "🔥 "; — ставим наш кастомный маркер.
■ color: transparent; — скрываем его, делая прозрачным.
■ transition: color 300ms; — обеспечиваем плавное появление.
■ color: black; — при ховере, меняем цвет и делаем маркер видимым.

Главная фишка: в контексте ::marker браузеры по умолчанию используют текстовый режим рендеринга emoji. Поэтому color: black сработает, и наш маркер будет виден, даже если сам emoji цветной)

Код можно посмотреть здесь.

Приводим логотипы к единому стилю

Частая задача в верстке: нужно разместить логотипы партнёров или клиентов, но все они приходят с разными фонами — где-то белый, где-то цветной и т.п. Разберем, как можно быстро привести их к единообразному виду.

Всего две CSS-строки превращают разношёрстную коллекцию в стильную монохромную галерею:

filter: grayscale(100%);
mix-blend-mode: multiply;

■ filter: grayscale(100%) — преобразует изображение в чёрно-белое. Цветные логотипы становятся серыми, но фон остаётся.
■ mix-blend-mode: multiply — этот режим наложения работает по принципу умножения цветов. Белые области становятся прозрачными, а тёмные части логотипа остаются видимыми. Фон страницы просвечивает сквозь изображение.

Остается подогнать размеры:

.brands__item img {
  width: 200px;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

■ aspect-ratio: 2 / 1; — задаёт пропорции 2:1.
■ object-fit: contain; — логотип вписывается в область без обрезки и искажений.

Идеально для секций "Наши клиенты" или "Партнёры")

Глянуть код можно тут.

Анимированный гамбургер для меню

Давайте сегодня разберем, как сделать простую, но доступную и красивую кнопку для мобильного меню.

HTML:

<button type="button" class="hamburger" aria-label="Открыть меню" aria-expanded="false">
  <span class="hamburger__line"></span>
  <span class="hamburger__line"></span>
  <span class="hamburger__line"></span>
</button>

Используем <button>, а не <div> для семантики. ARIA-атрибуты помогают скринридерам понять назначение кнопки.

Базовая стилизация:

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
}

.hamburger__line {
  width: 28px;
  height: 3px;
  background: #000;
  transition: transform 0.3s, opacity 0.2s;
}

Flexbox для вертикального выстраивания линий, плавные переходы для анимации.

Анимация:

.hamburger.active .hamburger__line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

Верхняя и нижняя линии поворачиваются, средняя исчезает.

JS:

const hamburger = document.querySelector('.hamburger');
let isOpen = false;

hamburger.addEventListener('click', () => {
  isOpen = !isOpen;
  hamburger.classList.toggle('active');
  hamburger.setAttribute('aria-expanded', isOpen);
  hamburger.setAttribute('aria-label', isOpen ? 'Закрыть меню' : 'Открыть меню');
});

Переключаем класс и обновляем ARIA для доступности.

В итоге получаем семантичный, доступный и красиво анимированный гамбургер)

Затестить код можно здесь.

Стилизация select option

Бывает необходимость добавить для select кастомные стили, чтобы он не выбивался из дизайна. Давайте разберем, как в целом это можно сделать.

HTML:

<div class="select">
  <select name="slct" id="slct">
    <option>-- Выберите вариант --</option>
    <option value="1">Вариант 1</option>
    <!-- остальные options -->
  </select>
</div>

Обертываем select в div для дополнительного контроля над стилями.

Сбрасываем стандартные стили:

select {
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
}

Создаем wrapper-контейнер:

.select {
  position: relative;
  overflow: hidden;
  background: #2c3e50;
  border-radius: 0.25em;
}

Он нужен для добавления кастомной стрелки, а overflow: hidden обрезает стандартную стрелку браузера.

Добавляем стрелку:

.select::after {
  content: "▼";
  position: absolute;
  right: 0;
  pointer-events: none;  /* Клики проходят сквозь стрелку */
  background: #34495e;
}

pointer-events: none позволяет кликать "сквозь" псевдоэлемент на сам селект.

Стилизуем select:

select {
  width: 100%;
  padding: 0 3em 0 1em;  /* Отступ справа под стрелку */
  cursor: pointer;
}

Правый padding (3em) освобождает место для нашей кастомной стрелки.

Стилизуем опции:

select option {
  background-color: #2c3e50;
  color: white;
}

В итоге wrapper + псевдоэлемент дают нам возможность кастомизировать select)

Пример кода, как всегда, здесь.

Shortcut-домены с .new

Если вы часто тестируете код в CodePen или CodeSandbox, создаете заметки в Google Документах или фиксируете данные в Google Таблицах, то для этого дела удобно использовать специальные домены .new.

.new — домен верхнего уровня для быстрого создания нового контента. По сути, это аналог комбинации Ctrl+N или меню "File → New" в офлайн-приложениях, но для веба.

Принцип простой: набираем короткий адрес, моментально попадаете в редактор или форму создания.

Для разработки:
■ pen.new → Пустой CodePen
■ js.new → JavaScript-окружение в CodeSandbox
■ react.new → React-проект в CodeSandbox
■ vue.new → Vue-проект в CodeSandbox
■ nodejs.new → Node.js-окружение в CodeSandbox

Документы Google:
■ docs.new → Новый Google Документ
■ sheets.new → Новая Google Таблица
■ slides.new → Новая Google Презентация

Полный список всех доступных сокращений можно найти здесь: whats.new/shortcuts

Маленькая, но приятная оптимизация, экономим секунды, которые за год складываются в часы чистого времени)

Выглядит надёжно)

Круговые диаграммы на чистом CSS

Если на странице нужно сверстать простенькую круговую диаграмму, то можно не спешить запиливать спец. библиотеки и т.п. Можно попробовать решить это с помощью conic-gradient().

conic-gradient() — CSS-функция, которая создаёт градиент, который вращается вокруг центральной точки (как циферблат часов).

Диаграмму на 30% / 40% / 30% можно нарисовать так:

Через градусы:

background: conic-gradient(
  #ff6384 0deg 108deg,    /* 30% = 108° */
  #36a2eb 108deg 252deg,  /* 40% = 144° */
  #ffce56 252deg 360deg   /* 30% = 108° */
);

Или проценты:

background: conic-gradient(
  #ff6384 0% 30%,
  #36a2eb 30% 70%,
  #ffce56 70% 100%
);

Просто указываем диапазон для каждого цвета и все, получаем рабочую диаграмму)

Пример можно глянуть здесь.

Интерактивная кнопка поиска

Недавно, в этом посте, мы разбирали, как делать скрытую кнопку поиска, которая появляется только когда юзер начинает вводить текст. Но есть и другой подход: кнопка видна изначально, но если текста нет — она просто неактивна. Давайте разберем, как это реализовать.

HTML:

<div class="input-container">
  <input type="search" required placeholder="Введите запрос">
  <input type="submit" value="Поиск" class="search-btn">
</div>

Сделаем контейнер для инпута и кнопки:

.input-container {
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 100%;
  max-width: 20rem;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 0.35rem;
}

Теперь это выглядит, как одно целое.

Настраиваем состояния кнопки:

/* Исходное состояние - неактивная кнопка */
.search-btn {
  background-color: gray;
  opacity: 0.5;
  pointer-events: none;
}

/* Активное состояние, когда в поле есть текст */
.input-container input[type="search"]:not(:placeholder-shown) + .search-btn {
  background-color: #483D8B;
  opacity: 1;
  pointer-events: auto;
}

■ Изначально кнопка серая и неактивна.
■ :not(:placeholder-shown) срабатывает, когда placeholder не отображается (то есть в поле есть текст).
■ + — соседний комбинатор, выбирает следующий элемент (нашу кнопку), меняет цвет, убирает прозрачность и включает кликабельность.

В результате получаем интерактивное поле поиска с автоматической активацией кнопки)

Код можно глянуть здесь.