width + max-width vs min()

При создании адаптивных компонентов часто возникает задача: сделать элемент, который занимает определенную долю от родителя, но не превышает максимальное значение.

И для этого есть два основных подхода:

Классика:

.container {
    width: 50%;
    max-width: 10rem;
}

■ Элемент занимает 50% от ширины родителя.
■ Но никогда не становится шире 10rem.

Современный подход:

.container {
    width: min(50%, 10rem);
}

Функция min() выбирает наименьшее значение из двух значений.

Оба варианта делают одно и то же, но width: min(50%, 10rem) выглядит более семантично и элегантно)

Поддержку браузерами можно посмотреть здесь.

Читать полностью…

Анимированная ссылка

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

HTML:

<p>Lorem ipsum dolor <a class="fancy-link" href="#">sit amet consectetur...</a>...</p>

CSS:

.fancy-link {
  color: #6366f1;
  text-decoration: none;
  background-image: linear-gradient(#6366f1, #6366f1);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0% 2px;
  transition: background-size 0.4s ease;
}

■ Убираем стандартное подчеркивание: text-decoration: none.
■ Создаем "поддельное" подчеркивание:
background-image: linear-gradient(#6366f1, #6366f1) — сплошная линия того же цвета.
background-position: bottom left — позиционируем внизу слева.
background-size: 0% 2px — изначально ширина 0%, высота 2px.
background-repeat: no-repeat — не повторяем фон.
■ Анимация: transition: background-size 0.4s ease — плавное изменение размера за 0.4 секунды.

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

.fancy-link:hover {
  background-size: 100% 2px;
}

При наведении курсора размер фона меняется с 0% 2px на 100% 2px, создавая эффект "рисования" линии слева направо.

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

Код здесь.

Читать полностью…

Интерактивное размытие текста

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

HTML:

<p><span>Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <span>labore et dolore</span> magna aliqua. </p>

Те фразы, которые хотим заблюрить оборачиваем в <span>.

CSS:

span {
  filter: blur(3px);
  transition: filter 0.3s ease;
}

span:hover {
  filter: blur(0px);
  cursor: pointer;
}

■ Все <span> получают filter: blur(3px), что делает их нечитаемыми.
■ При наведении span:hover фильтр сбрасывается до blur(0px), и текст становится чётким.

Можно использовать в разных интерактивных упражнениях, тестах, да и просто для акцентирования внимания)

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

Читать полностью…

Новый синтаксис медиазапросов Media Queries Range

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

Раньше нужно было делать так:

@media (max-width: 1000px) {
    /* ... */
}

@media (min-width: 1000px) and (max-width: 1400px) {
    /* ... */
}

Теперь можно так:

@media (width <= 1000px) {
    /* ... */
}

@media (1000px <= width <= 1400px) {
    /* ... */
}

В целом доступны такие операторы сравнения:
■ < — меньше;
■ > — больше;
■ = — равно;
■ <= — меньше или равно;
■ >= — больше или равно.

Так что теперь писать медиазапросы не так больно, как раньше)

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

Читать полностью…

Оживление форм с помощью 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;
}

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

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

Читать полностью…

Циклические 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: " " — суффикс после маркера (чтобы был пробел после каждого эмодзи).

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

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

Читать полностью…

Краткая видео-шпаргалка по 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;
}

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

Читать полностью…

ContentEditable и списки

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

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

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

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

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

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

Читать полностью…

Чередование элементов с 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-контейнера для каждой четной карточки, перемещая цветной блок в противоположную сторону.

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

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

Читать полностью…

Интерактивный список покупок с :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 может даже в логику)

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

Читать полностью…

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;
}

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

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

Читать полностью…

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

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

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

Давайте посмотрим, как реализовать это с помощью :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 (шестой элемент) и т.д.

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

Пример тут.

Читать полностью…

Прозрачный заголовок с 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 Toggle

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

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

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

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

Читать полностью…

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

Читать полностью…

Информационные блоки с помощью fieldset

Недавно наткнулся на интересный способ создавать стильные информационные блоки без лишних div'ов и классов. Оказывается, старый добрый <fieldset> можно использовать не только для форм)

HTML:

<fieldset>
  <legend>💡 Совет</legend>
  <p>Используйте сочетание клавиш Ctrl+S для быстрого сохранения документа.</p>
</fieldset>

CSS:

fieldset {
  border: 2px solid #4a90e2;
  border-radius: 8px;
  padding: 6px 20px 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 30em;
}

legend {
  font-weight: bold;
  padding: 4px 12px;
  background-color: white;
  color: #4a90e2;
  border: 2px solid #4a90e2;
  border-radius: 4px;
}

Получается чистый блок без лишних элементов)

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

Читать полностью…

Иконка в input с выравниванием

Давайте разберем еще один, довольно простой, способ добавления иконки и её выравнивания в input.

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

<input type="text" placeholder="Поиск">

CSS:

input {
  font-size: 1rem;
  height: 2.5rem; /* 40px */
  padding-left: 2.5rem; /* 40px */
  background-image: url(search_24x24.svg);
  background-position-y: center;
  background-position-x: 0.5rem; /* 8px */
  background-repeat: no-repeat;
}

background-image — вставляем ссылку на иконку или svg-иконку напрямую через Data URL.

Отступы:
■ padding-left: 2.5rem — освобождаем место для иконки.
■ background-position-x: 0.5rem — отступ иконки от края.

Центрирование по вертикали:
■ background-position-y: center — иконка всегда по центру.

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

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

Читать полностью…

Вайб-кодеры встретились на корпоративе)

Читать полностью…

Подсветка таблиц на чистом CSS

Сегодня разберем крутой трюк для создания интерактивной подсветки строк и столбцов в HTML-таблицах без JS. Типа как в Excel)

На html создадим обычную таблицу.

Базовые стили:

.highlight-table {
  overflow: hidden;    /* Важно для обрезки псевдоэлементов */
}

Подсветка строки:

.highlight-table tbody tr:hover td,
.highlight-table tbody tr:hover th {
  background: #fffe96;
}

При hover на строку подсвечиваем все ее ячейки.

Подсветка столбца:

.highlight-table td:hover::after,
.highlight-table thead th:hover::after {
  content: "";
  position: absolute;
  z-index: -1; 
  top: -50vh;
  left: 0;
  width: 100%; 
  height: 100vh; 
  background: #fffe96;
}

vh позволяют создавать элементы размером с экран. В нашем случае 100vh дает полосу на всю высоту, а top: -50vh центрирует ее так, чтобы она покрывала всю таблицу.

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

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

Читать полностью…

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

Давайте сегодня разберем, как с помощью одного <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: "Закрыть";
}

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

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

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

Читать полностью…

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

Читать полностью…

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

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

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

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

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 раз и заливает всю карточку.

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

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

Читать полностью…

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

Наткнулся на интересный эффект для текста, делается буквально в несколько строк 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%, создавая эффект пробегающего света.

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

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

Читать полностью…

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

Читать полностью…

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

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

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 обеспечивает плавную анимацию этого сдвига.

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

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

Читать полностью…

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

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

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 — создаем градиент.

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

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

Читать полностью…

Интерактивная шпаргалка по 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

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

Читать полностью…

Эффект тетради в линейку с помощью 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) — это обеспечивает совпадение текста с линиями.

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

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

Читать полностью…

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

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

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

Читать полностью…

Смешивание цветов с 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 мы получаем инвертированный цвет текста: на чёрном фоне - текст остаётся белым, на белом фоне - текст становится чёрным.

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

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

Читать полностью…