По аккуратней с легаси)

Sticky заголовки

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

Разберем, как это сделать с помощью position: sticky.

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

<div class="content-block">
  <h2>Шаг 1</h2>
  <p>Контент...</p>

  <h2>Шаг 2</h2>
  <p>Контент...</p>

  <h2>Шаг 3</h2>
  <p>Контент...</p>
</div>

CSS:

h2 {
  position: sticky;
  top: 0;
  background: #6200ee;
  color: white;
  padding: 12px 20px;
  margin: 0;
  z-index: 1;
}

Что мы получаем:
■ position: sticky + top: 0 — заголовок прилипает к верхней границе контейнера
■ background нужен, чтобы перекрывать контент снизу
■ z-index: 1 — поднимаем заголовок над остальным контентом

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

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

Псевдобрейкпоинты для шрифта без @media

Все мы знаем про fluid typography с clamp() — шрифт плавно меняется в зависимости от ширины окна.

Но если вас напрягает эта плавность и хочется, чтобы размер шрифта не плавал, а менялся чёткими скачками, как при брейкпоинтах, то оказывается, способ есть)

Для этого даже не нужны @media — достаточно одной строчки в CSS и round().

Реализация:

html {
  font-size: clamp(
    1em, 
    round(0.8em + 1.5vw, 0.5em), 
    2.5em
  );
}

Как это работает
1) clamp(min, preferred, max)
■ Минимум: 1em
■ Максимум: 2.5em
■ Желательное значение: результат функции round().

2) 0.8em + 1.5vw
■ 0.8em — стартовый размер
■ 1.5vw — прибавка, зависящая от ширины окна

3) round(..., 0.5em)
■ Округление результата до ближайшего кратного 0.5em.
Это убивает плавность и даёт ступенчатый рост — как будто у тебя есть брейкпоинты каждые пару сотен пикселей, но ты их не писал.

Вот такой хак еще в нашу копилку добавим, мало ли, вдруг пригодится)

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

Toggle Switch на CSS

Разберем, как сделать модный переключатель, вместо обычного чекбокса.

HTML структура:

<label class="toggle-switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

Внутри <label> лежит скрытый <input type="checkbox"> и стилизованный <span class="slider">, который и выглядит как переключатель.

Теперь прячем чекбокс:

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

Стилизуем ползунок:

.slider {
  background: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}

Добавляем бегунок (:before):

.slider:before {
  content: "";
  background: white;
  border-radius: 50%;
  transition: 0.4s;
}

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

input:checked + .slider {
  background: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px); 
}

Получился классный выключатель, который легко кастомизировать)

Код можно найти здесь.

Адаптивная таблица без JS

Таблицы на мобильных — это боль. Помните те времена, когда приходилось скроллить влево-вправо, чтобы увидеть все колонки? Или когда текст был настолько мелким, что нужна была лупа? Сегодня разберем, как можно решить эту проблему)

Наша таблица:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Email</th> 
      <th>Город</th>
      <th>Профессия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван Петров</td>
      <td>[email protected]</td>
      <td>Москва</td>
      <td>Frontend-разработчик</td>
    </tr>
  </tbody>
</table>

На десктопе всё ок, а для мобильных превращаем таблицу в карточки:

@media (max-width: 640px) {
  /* Делаем все элементы таблицы блочными */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  /* Прячем заголовки */
  thead {
    display: none;
  }
  
  /* Каждая строка становится карточкой */
  tr {
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Ячейки превращаются в пары ключ-значение */
  td {
    display: flex;
    justify-content: space-between;
  }
  
  /* Добавляем подписи из data-атрибутов */
  td::before {
    content: attr(data-label) ":";
    font-weight: 600;
  }
}

В итоге, на мобильном:
■ display: block превращает все элементы таблицы в обычные блоки
■ Заголовки прячутся (они больше не нужны)
■ Каждая строка становится отдельной карточкой
■ attr(data-label) берет текст из HTML-атрибута и вставляет как подпись

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

Код положил сюда.

Градиентная обводка текста

Сегодня давайте разберем один из эффектных трюков — текст с градиентной обводкой на чистом CSS.

HTML:

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

Основные настройки вынесем в переменные:

:root {
  --color-background: #000119;
  --stroke-width: 12px;
  --font-size: 150px;
  --font-weight: 700;
}

Основной эффект:

h1 {
  background-clip: text;
  background-image: linear-gradient(
    to right,
    #09f1b8,
    #00a2ff,
    #ff00d2,
    #fed90f
  );
  color: var(--color-background);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: var(--stroke-width);
}

Как это работает:

■ Создаём линейный градиент с четырьмя цветами.
■ background-clip: text — обрезаем фон по форме текста.
■ Устанавливаем цвет текста, который совпадает с фоном страницы.
■ stroke эффект:
-webkit-text-stroke-width задаёт толщину обводки (12px).
-webkit-text-stroke-color: transparent делает внутреннюю часть обводки прозрачной.

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

Это, конечно, не особо часто используется в работе, но вдруг когда-нибудь нужно будет сделать такой крутой эффект)

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

Не совсем по теме, но блин, ору))

Эффект "появления текста при наведении"

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

HTML:

<h1>Наведи<span class="hide">, чтобы увидеть весь текст</span>!</h1>

Здесь заголовок, но span с классом .hide изначально скрыт, он будет "появляться" при наведении.

Скрываем текст:

.hide {
  display: inline-block;
  max-width: 0%;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 1s ease-in-out;
}

■ display: inline-block — превращаем span в inline-block, для управления его шириной.
■ max-width: 0 — ограничиваем максимальную ширину до 0.
■ overflow: hidden — обрезаем всё, что выходит за пределы блока.
■ transition: max-width 1s ease-in-out — анимация изменения ширины.

Эффект появления при наведении:

h1:hover .hide {
  max-width: 100%;
}

При наведении на <h1> мы увеличиваем max-width до 100%, и текст плавно "раскрывается" слева направо.

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

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

Стилизуем разрывы текста в CSS

Если у вас есть текст с оформлением, который переносится на несколько строк. То с помощью box-decoration-break можно контролировать, как оформление будет отображаться при переносе.

Разберем на примере:

<div class="container">
  <h1><span class="clone">Привет, мир!</span></h1>
  <h1><span>Привет, мир!</span></h1>
</div>

Здесь у нас 2 текста, которые переносятся на новую строку (max-width: 200px).

CSS:

span {
  background: linear-gradient(to right, #4f46e5, #ec4899);
  color: white;
  padding: 12px;
}

.clone {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Зададим одинаковое оформление, но первому тексту добавим box-decoration-break: clone и посмотрим разницу:
■ по умолчанию box-decoration-break: slice — оформление ведёт себя как единое целое, паддинги только по бокам всего блока, фон/градиент продолжается между строками.
■ box-decoration-break: clone — каждая строка становится независимым блоком, паддинги со всех сторон у каждой строки, фон/градиент применяется к каждой строке отдельно.

Важно помнить, это работает только с inline-элементами.

Такой вот короткий лайфхак, если не знали об этом свойстве раньше)

Пример здесь.

Бургер-меню без JS

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

Нам нужно:
■ Скрытый checkbox для хранения состояния.
■ Label, как переключатель (кнопка бургера).
■ Меню изначально скрыто через opacity: 0.
■ При клике на label — чекбокс переключается и показывает меню.

HTML:

<input type="checkbox" id="menu-toggle">
<div class="menu">
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
  </nav>
</div>
<label for="menu-toggle" class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</label>

CSS:

#menu-toggle {
  display: none;
}
.menu {
  opacity: 0;
  visibility: hidden;
}
#menu-toggle:checked ~ .menu {
  opacity: 1;
  visibility: visible;
}

Как работает:
■ Checkbox скрыт — display: none, но состояние сохраняется.
■ Label связан с input через for="menu-toggle".
■ Клик на label = клик на checkbox — браузер автоматически переключает состояние.
■ Селектор ~ — находит элементы .menu после чекбокса.
■ :checked — псевдокласс активен только при отмеченном checkbox.
■ Результат — меню появляется/исчезает при каждом клике.

Такая вот нехитрая, но рабочая схема)

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

Эффект инвертирования цветов в CSS

Если нужно, как то заметно выделить элемент или даже блок на странице, к примеру при ховере, то можно попробовать использовать filter: invert(100%).

Делается быстро, эффект заметный)

Просто вешаем на нужный элемент ховер с фильтром:

.card:hover {
  filter: invert(100%);
  transition: filter 0.4s; /* для плавности */
}

И всё, заметный интерактив готов)

Неплохо подходит: для кнопок, монохромных иконок (соцсети, меню), галерей — эффект "негатив" на изображениях, карточки товаров/услуг.

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

"Липкий" хедер с эффектом размытия

Сегодня разберём, как сделать стильный фиксированный хедер с полупрозрачным фоном и размытием — прям, как у Apple)

Сделаем обычную разметку:

<header class="header"></header>
<main class="main">
  <section class="section">
    <h2></h2>
    <p></p>
  </section>
</main>

Тут просто, для примера хедер, и несколько секций.

Стилизуем хедер:

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 100;
}

Делаем фиксированное позиционирование, ставим его поверх конента z-index: 100.
Задаем фон с прозрачностью и с помощью backdrop-filter получаем эффект размытия фона под элементом.

Можно поиграться с backdrop-filter и background, чтобы получилось еще интереснее)

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

Абсолютное позиционирование)

Основные способы центрирования колонки

Допустим, у нас есть колонка с максимальной шириной 1024px, и нам нужно ее отцентровать. Разберем самые основные способы.

Классический способ

.container {
  max-width: 1024px;
  margin: 0 auto;
}

Автоматические отступы слева и справа заставляют элемент центрироваться. Работает абсолютно везде и понятен любому разработчику, нестареющая классика)

CSS Grid

.wrapper {
  display: grid;
  place-items: center;
}
.container {
  width: 100%;
  max-width: 1024px;
}

place-items: center центрирует содержимое как по горизонтали, так и по вертикали. Родитель активно управляет позиционированием дочерних элементов.

Flexbox

.wrapper {
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  max-width: 1024px;
}

Flexbox превращает родитель в гибкий контейнер, а justify-content: center выравнивает содержимое по центру главной оси.

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

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

Простой параллакс на чистом CSS

Разберем, как сделать простейший параллакс эффект, который есть практически на всех модных лендингах)

Основа эффекта:

.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

Здесь background-attachment: fixed — ключевой момент. Он "фиксирует" фон относительно окна, а контент прокручивается — создаётся эффект объёма.

HTML:

<section class="section-text">Текст</section>
<section class="parallax-bg bg-1"></section> 
<section class="section-text">Еще текст</section>

Чередуем текстовые блоки и параллакс-изображения.

Все довольно просто, но красиво)

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

Звездный рейтинг на CSS

Разберём простой способ создания рейтинга без JS.

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

<input type="radio" name="rating" value="5" id="star5">
<label for="star5" title="5 звёзд"></label>

Радиокнопки скрыты, но управляют состоянием через связь for с id.

row-reverse переворачивает порядок отображения:

.rating {
  display: flex;
  flex-direction: row-reverse;
}

Прячем исходные radio-кнопки:

.rating input { display: none; }

Псевдоэлемент заменяет пустые label на звёзды:

.rating label::before {
  content: "★"; /* создаём визуальные звёзды */
}

Селектор ~ находит все последующие label после выбранного input:

.rating input:checked ~ label {
  color: #ffc107; /* подсветка выбранных звёзд */
}

Принцип работы:
Благодаря row-reverse и селектору ~, при выборе звезды — подсвечиваются все предшествующие ей в визуальном порядке.

Возможных реализаций звездного рейтинга много, но этот вроде самый простой)

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

Тень хедера при скролле

На днях пытался запилить тень, которая появляется под хедером, при прокрутке страницы. Самое интересное из того, что перепробовал — это использование animation-timeline: scroll().

Всё получается очень классно, но есть одно "НО": пока что не работает эта история в Firefox.

animation-timeline: scroll() — эта фича позволяет привязать CSS-анимацию к прокрутке страницы.

header {
  position: sticky;
  top: 0;
  background: white;
  
  /* Изначально без тени */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  
  /* Привязываем анимацию к скроллу */
  animation: shadow-fade both linear;
  animation-timeline: scroll(root);
  animation-range: 0px 50px;
}

@keyframes shadow-fade {
  to {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

Как это работает:
■ animation-timeline: scroll(root) — анимация управляется прокруткой страницы.
■ animation-range: 0px 50px — анимация происходит в первые 50px скролла.
■ both — анимация работает в обе стороны (при скролле вверх тень исчезает).
■ linear — равномерная скорость изменения.

Всё было бы очень классно и круто, если бы это поддерживал Firefox, но пока, к сожалению это не так(

Вот, что говорит caniuse — animation-timeline: scroll().

Ну, а пример можно глянуть здесь.

Смешивание цветов с mix-blend-mode

Давайте сегодня разберём mix-blend-mode: difference — эффект, при котором текст сам становится читаемым, инвертируясь на контрастном фоне.

HTML-разметка:

<div class="container">
  <div class="text">ФОРМОШЛЁП</div>
</div>

Фон — диагональный градиент:

.container {
  height: 100vh;
  background: linear-gradient(45deg, #000 50%, #fff 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

Текст:

.text {
  color: #fff;
  font-size: 120px;
  font-weight: bold;
  mix-blend-mode: difference;
}

Благодаря mix-blend-mode: difference мы получаем инвертированный цвет текста: на чёрном фоне - текст остаётся белым, на белом фоне - текст становится чёрным.

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

Код можно найти здесь.

Твои коллеги-разрабы пилят фичи пока ты ушел в отпуск)

Блок на всю ширину с помощью 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 заставляет элемент растягиваться на все три колонки, "вырывая" его из ограничений контейнера.

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

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