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

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

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

Подсветка таблиц на чистом 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 центрирует ее так, чтобы она покрывала всю таблицу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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), и текст становится чётким.

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

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

Иконка в 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)

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

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

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

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, создавая эффект "рисования" линии слева направо.

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

Код здесь.

Информационные блоки с помощью 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;
}

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

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

width + max-width vs min()

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

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

Классика:

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

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

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

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

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

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

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

Не баг, а фича)

Префикс в поле ввода телефона

Давайте сегодня разберем, как можно упростить процесс ввода телефона. Вместо того, чтобы заставлять юзера вводить код страны (+7 или 8), мы можем визуально отделить его от основного поля ввода.

HTML:

<div class="card">
  <h2>Введите номер телефона</h2>
  <div class="input-box">
    <span class="prefix">+7</span>
    <input type="tel" placeholder="9871234567">
  </div>
</div>

Объединяем всё в одно "поле":

.input-box {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

Чтобы +7 и input выглядели как одно целое, делаем флекс-контейнер и оформляем его рамкой.

Убираем рамку у самого input, чтобы поле выглядело цельным:

input {
  border: none;
}

Ну и тут стоит понимать, что такой вариант подходит только для российских номеров, где код страны всегда +7. Если нужна международная форма, нужно добавить выбор страны — например, выпадающий список с кодами стран, но это уже совсем другая история)

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

Заголовок с обводкой и тенью

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

HTML:

<h1 class="outline-text">ФОРМОШЛЁП</h1>

Здесь просто заголовок.

CSS:

.outline-text {   
  color: transparent; 
  -webkit-text-stroke: 1.5px black;
  text-stroke: 1.5px black;
  text-shadow: 5px 5px #6C757D; 
}

Итого:
■ color: transparent — делаем основной цвет букв прозрачным.
■ -webkit-text-stroke: 1.5px black — добавляем чёрную обводку толщиной 1.5px.
■ text-shadow: 5px 5px #6C757D — добавляем тень, смещённую на 5px вправо и 5px вниз.

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

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

Аккордеон со скрывающимся заголовком

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

HTML:

<details name="accordion">
  <summary>Заголовок</summary>
  <div class="content">
    <p><strong>Заголовок.</strong> Подробное описание...</p>
  </div>
</details>

Для скрытия заголовка нужно только одно CSS-правило:

details[open] summary {
  display: none;
}

Просто прячем весь <summary> когда аккордеон открыт.

Но обязательно нужно использовать атрибут name:

<details name="accordion">

Он группирует все аккордеоны. Когда открываешь один — остальные автоматически закрываются.

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

Код из примера здесь.

Анимация меняющихся слов

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

Давайте разберём, как реализовать такую анимацию.

HTML:

<div class="container">
  <p>Я ❤️</p>
  <div class="words">
    <span class="word">HTML</span>
    <span class="word">CSS</span>
    <span class="word">JavaScript</span>
    <span class="word">HTML</span>
  </div>
</div>

Добавляем четвёртый элемент — дубликат первого слова. Это ключ к плавному зацикливанию анимации. Когда анимация дойдёт до последнего слова (которое выглядит как первое), она мгновенно вернётся к началу, и переход будет незаметен.

Контейнер для слов:

.words {
  overflow: hidden;
  height: 60px;
}

overflow: hidden и height — это основа эффекта. Мы создаем «окошко», через которое видно только одно слово.

Стили для слов:

.word {
  display: block;
  height: 60px;
  line-height: 60px;
  animation: animate 6s infinite;
}

■ height и line-height по 60px — каждое слово занимает ровно высоту контейнера.
■ animation: animate 6s infinite — запускаем бесконечную анимацию длительностью 6 секунд.

Keyframes:

@keyframes animate {
  0%, 25% {
    transform: translateY(0);
  }
  33%, 58% {
    transform: translateY(-100%);
  }
  66%, 91% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-300%);
  }
}

■ 0%-25% — показываем первое слово (HTML).
■ 33%-58% — сдвигаем на -100% (CSS).
■ 66%-91% — сдвигаем на -200% (JavaScript).
■ 100% — сдвигаем на -300% (HTML).
Когда анимация доходит до конца (100%), она мгновенно возвращается к 0%.
Поскольку четвёртое слово идентично первому, переход незаметен!

Классный и довольно простой способ оживить страницу)

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

Наглядная демонстрация значений width

Давайте разберём, как работают и в чём отличие четырёх значений width — auto, fit-content, max-content и min-content.

width: auto

Поведение по умолчанию. Блок всегда занимает всю доступную ширину родителя.

width: max-content

Блок расширяется до полной длины всего контента в одну строку, игнорируя границы родителя. Может вызвать горизонтальный скроллинг.

width: min-content

Блок сжимается до ширины самого длинного неразрывного элемента (обычно самого длинного слова). Весь остальной текст будет перенесен.

width: fit-content

Блок ведет себя как max-content, но не может превысить ширину родителя. Если контент слишком длинный, он переносится, а блок сжимается до ширины родителя.

Короче, max-content — элемент, который никогда не переносится, min-content — ширина самого длинного слова, а fit-content — умный блок, который занимает столько места, сколько нужно, но не выходит за рамки родителя)

Демка кода здесь.