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 не отображается (то есть в поле есть текст).
■ + — соседний комбинатор, выбирает следующий элемент (нашу кнопку), меняет цвет, убирает прозрачность и включает кликабельность.

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

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

Разделители между элементами списка

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

HTML:

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
  <li>Четвертый элемент</li>
</ul>

CSS:

ul {
  list-style-type: none;
  padding: 0;
}

li {
  font-size: 1.25rem;
  padding: 1rem 0;
}

li:not(:last-of-type) {
  border-bottom: 4px solid tomato;
}

■ Убираем маркеры списка и дефолтный левый отступ.
■ Указываем размер шрифта и отступы
■ Все li, кроме последнего получают нижнюю границу.

Еще можно было бы сделать так:

li {
  border-bottom: 4px solid tomato;
}

li:last-child {
  border-bottom: none;
}

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

Или через соседний селектор:

li + li {
  border-top: 4px solid tomato;
}

+ выбирает элемент, идущий сразу после указанного. То есть "каждый li, перед которым есть другой li" получает границу сверху.

А можно и через Flexbox с gap:

ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  gap: 4px;
  background: tomato;
}

li {
  background: white;
  padding: 1rem 0;
}

gap создает промежутки между flex-элементами. Цвет фона ul просвечивает через эти промежутки.

В общем есть из чего выбрать, но как по мне :not(:last-of-type) — самый читаемый вариант)

Все примеры можно посмотреть здесь.

Стильный hover cards эффект

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

HTML:

<div class="card from-bottom">
  <div class="front-content">Снизу ↑</div>
  <div class="content">
    <p class="heading">From Bottom</p>
    <p>Описание скрытого контента...</p>
  </div>
</div>

Здесь у нас двухслойная система: front-content (видимый слой) + content (скрытый контент).
Стилизуем карточки, как нам нужно.

Анимация:

/* Снизу → Вверх */
.card.from-bottom .content {
  transform: translate(0, 96%);
}

.card.from-bottom:hover .content {
  transform: translate(0, 0);
}

Скрываем контент на 96% за границу → Hover возвращает в ноль.

А пока content въезжает, front-content уезжает на 30% и исчезает:

.card.from-bottom:hover .front-content {
  transform: translate(0, -30%);
}

Простое работающее решение, которое можно кастомизировать за секунды)

Пример кода с разными направлениями здесь.

Битва Android vs iOS нервно курит в сторонке)

Инпуты в стиле Material Design

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

HTML:

<div class="mat-input">
  <label for="name">Имя Фамилия</label>
  <input id="name" type="text" placeholder="Иван Иванов">
</div>

Базовый инпут:

.mat-input {
  position: relative; /* для абсолютного позиционирования label */
}

.mat-input input {
  border: 0;
  border-bottom: 2px solid #8c8c8c;
  padding: 1.8em 0.75em 0.75em; /* место для label сверху */
  transition: 0.2s;
}

Плавающий label:

.mat-input label {
  position: absolute;
  top: 1.4em; /* по центру инпута */
  left: 0.75em;
  pointer-events: none; /* клики проходят сквозь label */
  transition: 0.2s;
}

Анимация:

.mat-input:has(input:focus) label,
.mat-input:not(:has(input:placeholder-shown)) label {
  top: 0.75em;
  font-size: 0.75em;
}

■ :has(input:focus) — label поднимается при фокусе
■ :not(:has(input:placeholder-shown)) — label остаётся вверху, когда поле заполнено

Скрытый placeholder:

.mat-input input::placeholder {
  opacity: 0;
}

.mat-input input:focus::placeholder {
  opacity: 1; /* показываем только при фокусе */
}

В итоге для этого нам понадобилось: :has() для стилизации родителя и ::placeholder-shown для определения заполненности поля)

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

Волновая анимация текста

Сегодня разберём, как создать эффектную волновую анимацию текста без JS — только HTML и CSS.

HTML:

<div class="waviy">
  <span style="--i:1">Ф</span>
  <span style="--i:2">О</span>
  <span style="--i:3">Р</span>
  <span style="--i:4">М</span>
  <span style="--i:5">О</span>
  <span style="--i:6">Ш</span>
  <span style="--i:7">Л</span>
  <span style="--i:8">Ё</span>
  <span style="--i:9">П</span>
</div>

Каждая буква обернута в <span> с CSS-переменной --i, которая определяет порядковый номер буквы.

CSS:

.waviy span {
  display: inline-block;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i));
}

■ display: inline-block — превращает строчный элемент в блочный, сохраняя поведение строки, это позволяет буквам двигаться, но оставаться в одной строке.
■ animation: waviy 1s infinite — запускает анимацию с именем waviy, длительность 1 секунда, повторяется бесконечно (infinite).
■ animation-delay: calc(.1s * var(--i)) — волна:
□ var(--i) берёт значение из HTML (style="--i:1")
□ calc() умножает: для 1-й буквы 0.1s * 1 = 0.1s, для 2-й 0.1s * 2 = 0.2s
□ Каждая следующая буква стартует на 0.1s позже предыдущей

@keyframes waviy {
  0%, 40%, 100% { transform: translateY(0) }
  20% { transform: translateY(-20px) }
}

Буква прыгает вверх на 20px в момент 20%, затем возвращается. Пауза 40-100% создаёт ритм.

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

Результат можно посмотреть здесь.

Классная коллекция градиентов

Если вы тоже много времени тратите на подбор идеального градиента для фона, то у меня есть кое что для вас)

Gradient Hunt — это коллекция красивых градиентов, которая постоянно обновляется. Тысячи трендовых цветовых переходов на любой вкус, и главное — с готовым CSS-кодом.

Там градиенты на любой случай жизни:
■ Яркие и сочные для креативных проектов.
■ Нежные пастельные для минималистичных дизайнов.
■ Темные и контрастные для современных интерфейсов.
■ Классические двухцветные переходы.
■ Сложные многоцветные композиции.

Каждый градиент — это готовый linear-gradient() с подобранными цветами и углами наклона.

В общем вот - https://gradienthunt.com/

Спойлер на CSS с эффектом размытия

Давайте сегодня разберём, как создать спойлер с размытым текстом без JS, с помощью HTML-элемента <details>.

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

HTML:

<details>
  <summary>Открыть спойлер</summary>
  <p>Разработке невозможно научиться раз и навсегда. Учиться придется всю жизнь..</p>
</details>

Стилизация контейнера:

details {
  width: 100%;
  max-width: 400px;
  background: white;
  padding: 2rem;
  border-radius: 12px;
}

Кнопка раскрытия:

summary {
  padding: 12px 16px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #f8f9fa;
  list-style: none;
}

Размытие:

details:not([open])::details-content {
  filter: blur(5px);
  content-visibility: visible;
}

::details-content {
  margin-top: 0;
  transition: filter 0.3s ease;
}

■ По умолчанию (закрыто): псевдоэлемент ::details-content получает blur(5px) и content-visibility: visible, текст виден, но размыт.
■ При клике: атрибут open добавляется к <details>, селектор :not([open]) перестаёт работать.
■ Результат: размытие исчезает с плавной анимацией благодаря transition.

И всё, получаем стильный, модный, молодежный спойлер на чистом CSS)

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