Блок на всю ширину с помощью CSS Grid

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

HTML:

<main>
  <!-- Обычный контент внутри сетки -->
  <h1>Full-Bleed Layout</h1>
  <h2>Break elements out of their containers</h2>
  <p>Lorem ipsum dolor sit amet...</p>

  <!-- Full-Bleed элемент -->
  <div class="full-bleed-banner">
    <img src="banner.jpg" alt="">
  </div>

  <!-- Продолжение обычного контента -->
  <p>Lorem ipsum dolor sit amet consectetur...</p>
</main>

Здесь всё просто: контент идёт последовательно, а баннер обернут в full-bleed-banner.

Базовая сетка контейнера:

main {
  display: grid;
  grid-template-columns: 1fr 50% 1fr; 
  grid-column-gap: 3rem;
}

main > * {
  grid-column: 2;
}

Мы создаем сетку с тремя колонками, где центральная занимает 50% ширины, а боковые — по 1fr. Все дочерние элементы помещаются во вторую колонку.

Баннер:

.full-bleed-banner {
  grid-column: span 3;
  height: 300px;
  margin-block-end: 2rem;
}

Вот эта самая фишка) Свойство grid-column: span 3 заставляет элемент растягиваться на все три колонки, "вырывая" его из ограничений контейнера.

Очень интересный эффект, разумеется, работает не только с баннерами)

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

Большая подборка CSS Toggle

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

Там их больше 100 штук, удобно, что можно можно посмотреть, как выглядит переключатель, выбрать то, что больше нравится и сразу скопировать код, а там уже при необходимости допилить его под себя)

В общем вот — https://csstoggles.github.io/

Переключатели на любой вкус и цвет)

Эффект тетради в линейку с помощью CSS

Если вам вдруг нужно будет сверстать тетрадный лист в линейку, то надеюсь, этот пост поможет двигаться в правильную сторону) Разберем один из вариантов, как это можно реализовать с минимальными напрягами.

HTML:

<div class="notebook">
  <div class="lined-paper">
    <h1>Labore et tempor</h1>
    <p>Sit incididunt labore...</p>
    <h2>Elit dolore lorem</h2>
    <p>Dolore dolore sit...</p>
  </div>
</div>

Простая разметка, самое интересное здесь в CSS)

Вынесем настройки шрифтов и отступов в переменные:

:root {
  --base-font-size: 16px;
  --h1-font-size: 24px;
  --h2-font-size: 20px;
  --line-height: 24px;
  --margin-left: 70px;
  --red-line-pos: 59px;
}

Запиливаем разлиновку:

background: 
  /* Красная линия */
  linear-gradient(
    to right,
    transparent var(--red-line-pos),
    #ff6b6b var(--red-line-pos),
    #ff6b6b calc(var(--red-line-pos) + 1px),
    transparent calc(var(--red-line-pos) + 1px)
  ),
  /* Линии */
  repeating-linear-gradient(
    transparent,
    transparent calc(var(--line-height) - 1px),
    #ddd calc(var(--line-height) - 1px),
    #ddd var(--line-height)
  );

Первый градиент создает красную вертикальную линию для полей.
Второй — создает повторяющиеся горизонтальные линии.

Типографика и отступы:

.lined-paper {
  font-size: var(--base-font-size);
  line-height: var(--line-height);
  padding: var(--line-height) 20px var(--line-height) var(--margin-left);
}

Вертикальные отступы равны высоте линии var(--line-height) — это обеспечивает совпадение текста с линиями.

Самое ценное, я считаю, что изменение размера шрифта или высоты линии автоматически влияют на всю композицию)

Потестить можно здесь.

Прозрачный заголовок с mix-blend-mode

Нашел еще одно интересное применение свойства mix-blend-mode, на этот раз со значением lighten. Можно сделать классное выделение заголовка, например, на первом экране лендинга, ну или в каком-нить другом блоке)

HTML:

<header class="header">
  <h1>формошлёп</h1>
</header>

Для блока header зададим фон:

.header {
  width: 100vw;
  height: 100vh;
  background: url(image.jpg);
}

Стилизуем заголовок:

.header h1 {
  font-size: 8vw;
  padding: 4rem 8rem;
  background-color: #fff;
  color: #000000;
  mix-blend-mode: lighten;
}

Создаем белый прямоугольник с заголовком черного цвета, но благодаря mix-blend-mode: lighten цвет фона заменяется цветом элемента там, где элемент светлее, а т.к. цвет заголовка черный, то "побеждает" и проступает фоновое изображение.

Вот так просто можно получить классный эффект)

Посмотреть код можно здесь.

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

Сегодня хочу поделиться с вами крутой шпаргалкой по CSS Transform, которая поможет быстро освежить в памяти все основные трансформации или изучить их с нуля)

Полный набор демок всех важных CSS Transform функций:
■ Поворот: rotate(), rotateX(), rotateY(), rotateZ().
■ Масштаб: scale(), scaleX(), scaleY().
■ Наклон: skew(), skewX(), skewY().
■ Перемещение: translate(), translateX(), translateY().
■ Матрица: matrix().
■ 3D трансформации: translate3d(), scale3d(), rotate3d().
■ Перспектива: perspective().
■ Комбинированные трансформации.

В общем вот — https://codepen.io/frontbox/pen/NPGOaBr

Всё довольно удобно и наглядно, пользуйтесь на здоровье)

Еще бы ИИ добавить)

Цветной цикл для списков

Все знают, как сделать «зебру» для списка, чтобы строки были попеременно окрашены в два цвета. Мы даже рассматривали это здесь.

А что, если дизайнер зашел дальше и хочет не двухцветный паттерн, а трехцветный?

Давайте посмотрим, как реализовать это с помощью :nth-child.

HTML:

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  <li>Пять</li>
</ul>

CSS:

li:nth-child(3n + 1) {
  background-color: rebeccapurple;
}

li:nth-child(3n + 2) {
  background-color: darkcyan;
}

li:nth-child(3n + 3) {
  background-color: lightskyblue;
}

Вся фишка в формуле An + B внутри :nth-child().
A — длина нашего цикла (сколько элементов в паттерне).
n — счетчик (начинается с 0: 0, 1, 2, 3...).
B — смещение (с какого элемента начать).

Получается такая история:
3n + 1
■ n=0: 3*0 + 1 = 1 (первый элемент)
■ n=1: 3*1 + 1 = 4 (четвертый элемент) и т.д.

3n + 2
■ n=0: 3*0 + 2 = 2 (второй элемент)
■ n=1: 3*1 + 2 = 5 (пятый элемент) и т.д.

3n + 3
■ n=0: 3*0 + 3 = 3 (третий элемент)
■ n=1: 3*1 + 3 = 6 (шестой элемент) и т.д.

Вот так вот получаем бесконечно повторяющийся трехцветный паттерн. Если нужно больше вариаций, то на изи добавляем еще формулу со своим цветом и всё)

Пример тут.

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

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

HTML:

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

CSS:

h1 {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(165deg, yellowgreen, cyan, mediumpurple);
}

Разберем, что для чего:

■ -webkit-text-fill-color: transparent — делаем текст прозрачным.
■ -webkit-background-clip: text — обрезаем фон по форме текста.
■ background-image — создаем градиент.

Довольно просто и лаконично, но эффект получается классный)

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

Hover для чекбоксов

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

HTML-структура:

<label>
  <input type="checkbox">
  <span>Уведомления по email</span>
</label>
<label>
  <input type="checkbox">
  <span>СМС-оповещения</span>
</label>

Кастомный чекбокс:

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.2s ease;
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "✓";
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

Состояние "выбрано":

input[type="checkbox"]:checked {
  background: #007bff;
  border-color: #007bff;
}

input[type="checkbox"]:checked::before {
  opacity: 1;
}

input[type="checkbox"]:checked + span {
  color: #007bff;
  font-weight: 500;
}

:checked — псевдокласс для отмеченного состояния. Меняем фон, рамку и показываем галочку.

Запиливаем hover:

/* Меняем цвет текста при hover на чекбокс */
label:has(input[type="checkbox"]:hover) span {
  color: #007bff;
}

/* Меняем рамку самого чекбокса при hover */
label:has(input[type="checkbox"]:hover) input[type="checkbox"] {
  border-color: #007bff;
}

Таким образом получаем еще более живые и красивые формы для наших сайтов)

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

Эффект заполняющегося текста при наведении

Сегодня давайте разберем еще один эффектный прием — анимированное изменение цвета текста при наведении.

HTML:

<a href="#" class="hover-link">Формошлёп</a>

CSS:

.hover-link {
  color: transparent; /* Прозрачный текст */
  text-decoration: none; /* Без подчеркивания */
  -webkit-text-stroke: 2px #000; /* Черный контур */
  
  /* Градиент: половина черная, половина белая */
  background: linear-gradient(90deg, #000 50%, #fff 50%);
  background-size: 200% 100%;  /* Фон в 2 раза шире */
  background-position: 100%;  /* Показываем правую (белую) часть */
  background-clip: text; /* Обрезаем фон по тексту */
  
  transition: background-position 0.5s ease; /* Плавный сдвиг */
}

.hover-link:hover {
  background-position: 0; /* Показываем левую (черную) часть */
}

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

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

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

Интерактивный список покупок с :has()

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

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

HTML структура:

<ul class="shopping-list">
  <li>
    <input type="checkbox" id="milk">
    <label for="milk">Молоко</label>
  </li>
  <li>
    <input type="checkbox" id="bread">
    <label for="bread">Хлеб</label>
  </li>
</ul>

Ключевой CSS:

li:has(input:checked) label {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

Как это работает:
■ li:has(input:checked) — выбираем <li>, который содержит отмеченный чекбокс
■ label — применяем стили к лейблу внутри такого <li>
■ Получаем зачеркивание и изменение цвета

Теперь CSS может даже в логику)

Код лежит здесь.

Ох уж этот коварный JS)

Чередование элементов с nth-child

Есть довольно популярная задача — создание чередующегося макета, где элементы меняют своё расположение через один.

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

Давайте разберем простое решение с использованием Flexbox и псевдокласса :nth-child().

HTML:

<div class="card">
  <div class="text-content">
   Текст...
  </div>
  <div class="color-block"></div>
</div>
<div class="card">
  <div class="text-content">
   Текст...
  </div>
  <div class="color-block"></div>
</div>

CSS:

.card:nth-child(even) {
  flex-direction: row-reverse;
}

Это правило меняет направление flex-контейнера для каждой четной карточки, перемещая цветной блок в противоположную сторону.

Такая вот мелочь, которая превращает скучный список в продуманный интерфейс)

Полный код можно посмотреть здесь.

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

Наткнулся на интересный эффект для текста, делается буквально в несколько строк CSS, а выглядит классно. Неплохо подойдет для заголовков лендингов на первых экранах)

HTML:

<p>Шлёпаем формы и красим кнопки...</p>

CSS:

p {
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 80%;
  animation: animate 4s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animate {
  0% { background-position: -500%; }
  100% { background-position: 500%; }
}

Весь фокус в том, что мы создаем градиент из трех цветов (черный → белый → черный) и анимируем его позицию:

■ Градиент (#000 → #fff → #000) — создаем полосу света на темном фоне.
■ background-size: 80% — делаем градиент уже самого текста, чтобы свет не покрывал всю ширину сразу.
■ background-clip: text — обрезаем градиент по форме букв.
■ text-fill-color: transparent — делаем сам текст прозрачным, видим только фон.
■ Анимация — двигаем градиент от -500% до 500%, создавая эффект пробегающего света.

Так что если заказчик попросить "оживить лендос", запилите ему этот эффект)

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

ContentEditable и списки

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

Но только сегодня я попробовал применить его к упорядоченному списку)

Получается интересная вещь, при Enter автоматом создается новый <li>, нумерация сама проставляется:

<ol contenteditable>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
  <li>Четвертый пункт</li>
</ol>

Пока не придумал, где это можно применить, но будем держать в уме)

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

Цветной цикл для карточек

Здесь мы с вами разбирали, как делать цветной цикл для списков. Но эту фишку, как понимаете, можно использовать не только в списках, но и в целом на любых элементах.

Можно сделать классный список одинаковых блоков, но со своей изюминкой)

Создадим сетку карточек на гридах и добавим каждой свой цвет.

HTML:

<div class="card-container">
  <div class="card-grid">
    <div class="card">
      <a href="#" class="card__link">
        <div class="card__decoration"></div>
        <h3 class="card__title">Первая карточка</h3>
      </a>
    </div>
    <!-- и так далее -->
  </div>
</div>

Запилим гриды для карточек:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

Автоматическое назначение цветов через :nth-child():

.card:nth-child(6n+1) .card__decoration { background-color: #f9b234; }
.card:nth-child(6n+2) .card__decoration { background-color: #3ecd5e; }
.card:nth-child(6n+3) .card__decoration { background-color: #e44002; }
.card:nth-child(6n+4) .card__decoration { background-color: #952aff; }
.card:nth-child(6n+5) .card__decoration { background-color: #cd3e94; }
.card:nth-child(6n+6) .card__decoration { background-color: #4c49ea; }

Формула 6n+1:
■ 6n — это кратность (каждый 6-й элемент)
■ +1 — это смещение (начинаем с 1-го элемента)

То есть 6n+1 выберет элементы: 1, 7, 13, 19... и так далее.
А 6n+2 выберет: 2, 8, 14, 20...

Добавляем ховер:

.card__decoration {
  height: 130px;
  width: 130px;
  position: absolute;
  top: -75px;
  right: -75px;
  border-radius: 50%;
  transition: transform 0.5s ease;
  z-index: 1;
}

.card:hover .card__decoration {
  transform: scale(8);
}

Цветной кружок изначально частично скрыт за границами карточки overflow: hidden, а при hover увеличивается в 8 раз и заливает всю карточку.

Получаем классное чередование цветов со стильным ховером)

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

Краткая видео-шпаргалка по gap в grid css

Наткнулся на наглядный видос по работе gap в grid, решил с вами тоже поделиться.

row-gap и column-gap задают отступы между рядами или колонками:

.container {
  display: grid;
  /* Отступы между рядами */
  row-gap: 50px;
  /* Отступы между колонками */
  column-gap: 20px;
}

Ну, а gap это шорткат для записи значений свойств row-gap и column-gap. Значения разделяются пробелом:

.container {
  display: grid;
  gap: 50px 20px;
}

В общем, сохраняем в коллекцию и забываем)

Только смелым покоряется фронтенд)

Циклические CSS-счетчики

Иногда нужно сделать так, чтобы список выглядел нестандартно, т.е. не просто «точки» или «дефисы».

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

HTML:

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

CSS:

@counter-style thumbs {
  system: cyclic;
  symbols: 😀 😡 😍;
  suffix: " ";
}

li {
  list-style-type: thumbs;
}

■ @counter-style — определяем свой стиль счетчика.
■ system: cyclic — система чередования (маркеры должны циклически повторяться).
■ symbols: 😀 😡 😍 — последовательность эмодзи, которые будут использоваться как маркеры.
■ suffix: " " — суффикс после маркера (чтобы был пробел после каждого эмодзи).

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

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

Кнопка-переключатель с меняющимся текстом

Давайте сегодня разберем, как с помощью одного <input type="checkbox"> и немного CSS можно создать красивую, анимированную кнопку-переключатель.

HTML:

<input type="checkbox">

В html у нас будет простой чекбокс.

Превращаем его в кнопку:

input {
  appearance: none; 
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  color: #333;
}

Добавляем текст через псевдоэлемент:

input::before {
  content: "Открыть";
}

Состояние "нажато":

input:checked {
  background: #ff6b6b;
  color: white;
}

Когда чекбокс отмечен, мы меняем фон на красный, текст — на белый.

Меняем текст при переключении:

input:checked::before {
  content: "Закрыть";
}

Когда чекбокс отмечен — меняем текст с "Открыть" на "Закрыть".

Собственно всё, получаем крутую кнопку, которую не стыдно повесить на самое заметное место)

Код, как всегда лежит здесь.

Оживление форм с помощью accent-color

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

Для того, чтобы создать хоть какую-то минимальную интерактивность можно использовать accent-color с псевдоклассом :hover, чтобы при наведении менялся цвет.

Базовая реализация:

/* Базовые стили - серый цвет */
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: #888;
  cursor: pointer;
}

/* При наведении - меняем цвет */
input[type="range"]:hover,
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  accent-color: #ff1493;
}

Всего несколько строк кода — и формы уже выглядят интересней. Но конечно, использовать это нужно там, где это уместно)

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