Генератор бесшовных паттернов

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

Есть простой и бесплатный инструмент Patternico, который генерирует бесшовные паттерны онлайн прямо в браузере.

Принцип работы очень прост:
■ выбираем фон и элементы;
■ настраиваем размеры, прозрачность, цвета;
■ загружаем свои изображения, иконки или Emoji;
■ получаем готовый паттерн в формате изображения.

После генерации скачиваем паттерн и добавляем его как фон через CSS:

body {
  background-image: url("pattern.png");
  background-repeat: repeat;
}

В общем, если что, вот — https://patternico.com/, вдруг пригодится)

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

Стилизация списка точками с линией

Всем привет! Надеюсь, удалось хорошенько отдохнуть на праздниках) Будем потихоньку возвращаться в рабочий режим.

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

HTML:

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

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

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

li {
  padding-left: 2em;
  padding-bottom: 1em;
  position: relative;
}

Заменим стандартные маркеры списка на два псевдоэлемента:
:before — для цветных точек:

li:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background: #f09;
  border-radius: 50%;
}

:after — для вертикальных соединительных линий между пунктами:

li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  width: 2px;
  height: 100%;
  background: #f09;
  transform: translateX(4px);
}

■ Центрирование линии: transform: translateX(4px) смещает линию шириной 2px на 4px вправо, чтобы она прошла точно по центру точки 10px. Формула: (10 - 2) / 2 = 4.
■ Скрытие стыка: Линия начинается с top: 0.5em (как и точка), но визуально точка перекрывает её начало. Поэтому кажется, что линия выходит из-под точки.
■ Последний элемент: :not(:last-child) убирает линию у последнего пункта.

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

Пример можно посмотреть тут.

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

Декоративные линии в заголовках на CSS

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

HTML:

<h1>Title #1</h1>
<p>Lorem ipsum dolor sit amet</p>

<h1>Title #2</h1>
<p>Lorem ipsum dolor sit amet</p>

<h1>Title #3</h1>
<p>Lorem ipsum dolor sit amet</p>

CSS:

h1 {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

h1::before,
h1::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #000;
}

■ display: flex превращает заголовок в flex-контейнер.
■ gap: 0.5em создаёт отступ между текстом и линиями.
■ Псевдоэлементы ::before и ::after создают линии.
■ flex: 1 растягивает линии на всё доступное пространство.

Таким образом мы получаем заголовок по центру и линии с обеих сторон.

Управление видимостью:

/* Линия только справа */
h1:first-of-type::before {
  display: none;
}

/* Линия только слева */
h1:nth-of-type(2)::after {
  display: none;
}

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

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

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

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

Переключатель размера шрифта на CSS

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

HTML:

<input id="size-small" type="radio" name="size">
<label for="size-small">Small</label>
<!-- + medium, large... -->
<section>
  <p>Ваш текст...</p>
</section>

Чтобы переключатель выглядел как меню, а не как формы для опроса, скрываем сами радиокнопки:

input[name="size"] {
  display: none;
}

input[name="size"]:checked + label {
  border-bottom: 2px solid #3498db;
}

Переключение:

#size-small:checked ~ section {
  font-size: 0.9rem;
}

#size-large:checked ~ section {
  font-size: 1.1rem;
}

Это самая суть нашего метода. Мы говорим браузеру: "Если выбрана радиокнопка с таким-то ID, найди любой следующий соседний элемент section и измени его шрифт".

Такое вот CSS-only решение)

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

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

Так вот кто забирает все офферы)

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

Градиентная тень для текста

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

HTML:

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

CSS:

h1 {
  font-family: sans-serif;
  font-size: 10vw;
  background: linear-gradient(4deg, #548cff 10%, #f900bf 90%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: -0.08em -0.08em #fff;
}

■ background: linear-gradient() — создаём градиент.
■ -webkit-text-fill-color: transparent — делаем заливку текста прозрачной.
■ background-clip: text — обрезаем фон по форме букв.
■ text-shadow: -0.08em -0.08em #fff; — добавляем белую тень, смещённую влево-вверх с помощью отрицательных значений.

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

Но на самом деле:
■ Белый "текст" — это text-shadow тень.
■ Градиентная "тень" — это настоящий текст с background-clip.

Такие вот фокусы)

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

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

Счетчик отмеченных чекбоксов на CSS

Сегодня давайте рассмотрим, как сделать визуальный счетчик отмеченных чекбоксов вообще без JS — на чистом CSS.

HTML:

<div class="wrapper">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <span>=</span>
  <output></output>
</div>

Здесь у нас пять чекбоксов, знак равенства и пустой <output>, куда будем выводить число.

Создаем счетчик:

.wrapper {
  counter-reset: total;
}

counter-reset: total создает переменную-счетчик с именем total.

Увеличиваем при отметке:

input:checked {
  counter-increment: total;
}

Каждый отмеченный чекбокс :checked увеличивает счетчик total на единицу.

Выводим результат:

output::before {
  content: counter(total);
}

Псевдоэлемент ::before вставляет содержимое перед <output>. Функция counter(total) возвращает текущее значение счетчика — и оно автоматически обновляется при изменении.

Можно использовать для ситуаций, когда нужны визуальные подсчеты, без логики на JS)

Пример лежит здесь.

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

Добавляем иконку к внешним ссылкам с помощью CSS

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

HTML:

<a href="https://example.com" target="_blank">Эта ссылка открывается в новой вкладке</a>
<a href="https://example.com">А эта ссылка нет</a>

CSS:

a[target="_blank"]::after {
  content: url(external-link.svg);
  display: inline-block;
  margin-left: 0.2em;
  width: 1em;
  height: 1em;
}

Селектор a[target="_blank"]::after:
■ Выбираем только ссылки с атрибутом target="_blank".
■ ::after создает псевдоэлемент после содержимого ссылки.
Загрузка SVG через URL:
■ content: url(external-link.svg) — загружаем SVG-иконку.
Далее задаем размеры и отступы.

Теперь ссылки с атрибутом target="_blank" будут автоматически получать иконку внешней ссылки)

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

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

Библиотека готовых UI-компонентов

На днях наткнулся на очень годную штуку, которой прям грех не поделиться.

Uiverse.io - огромная, постоянно пополняемая, коллекция готовых UI-элементов:
■ Кнопки
■ Чекбоксы
■ Карточки
■ Формы
■ Лоадеры
И многое другое, в самых разных стилях: от минимализма до неоморфизма.

Причем это не просто статичные блоки, а полноценные компоненты с анимациями и hover-эффектами.

Всё под лицензией MIT, так что можно использовать хоть в личных проектах, хоть в коммерческих.

В общем, uiverse.io - отличный ресурс для тех, кто хочет вдохновиться, научиться чему-то новому или ускорить процесс разработки)

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

Спойлер на 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)

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

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

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

Сегодня разберём, как создать эффектную волновую анимацию текста без 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% создаёт ритм.

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

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

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

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

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

Стильный 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%);
}

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

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

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

Интерактивная кнопка поиска

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

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

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

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

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

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

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

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

Эффектное выделение слов в тексте

Иногда нужно сделать акцент на каком-нибудь слове. Давайте разберём технику с декоративным SVG-подчеркиванием.

HTML:

<p>Эффектное <span class="fancy">выделение</span> слов</p>

Позиционирование:

.fancy {
  position: relative;
  white-space: nowrap;
}

position: relative привязывает подчёркивание к слову, white-space: nowrap запрещает перенос.

Псевдоэлемент с декором:

.fancy::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.2em;
  height: 0.3125em;
  background: url("data:image/svg+xml,%3Csvg...") 0 / auto 100% round;
}

■ inset: auto 0 -0.2em — растягивает подчёркивание на всю ширину и опускает ниже текста.
■ height: 0.3125em — высота линии в em, масштабируется с текстом.
■ SVG-подчёркивание: берем волнистую кривую Безье в SVG, цвет задаём в stroke='%2300FDCF'. Можно использовать и другие формы — волны, зигзаги, пунктиры.

Неплохо подойдет, для акцентов в заголовках)

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

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

Друзья, год подходит к концу, и хочу сказать спасибо, что вы здесь. Спасибо за ваши вопросы, обсуждения и поддержку)

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

Отличных праздников и до встречи в 2026-м!

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

Монументальный учебник по фронтенду и не только

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

Очень крутой учебник от Дмитрия Трепачёва — https://code.mu/ru/

Не просто ещё один сайт с уроками. Это структурированный учебный портал, от самых основ вёрстки до фреймворков React, Vue и Angular.

Весь материал разделён на учебники, справочники и задачники, можно изучать теорию и сразу закреплять её на практике.

В общем — крайне советую)

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

Адаптивные разделители для меню

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

HTML:

<div class="demo-container">
  <nav>
    <ul>
      <li>Первый</li>
      <li>Второй</li>
      <li>Третий</li>
      <li>Четвертый</li>
    </ul>
  </nav>
</div>

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

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
}

■ Убираем маркеры списка и сбрасываем стандартные отступы.
■ По умолчанию элементы располагаются вертикально.

Вертикальное меню (по умолчанию):

nav li:not(:first-child) {
  border-top: 1px solid white;
}

Добавляем границу сверху всем элементам, кроме первого.

Горизонтальное меню (при широком контейнере):

@container (width > 600px) {
  nav ul {
    grid-auto-flow: column;
  }
  
  nav li:not(:first-child) {
    border-top: none;
    border-left: 1px solid white;
  }
}

■ Меняем направление Grid, элементы выстраиваются в ряд.
■ Убираем горизонтальную границу.
■ Добавляем вертикальную границу, у всех элементов кроме первого.

В целом всё, получаем то, что нам требовалось — адаптивные разделители)

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

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

Frontend roadmap на русском

Думаю многие знают про https://roadmap.sh/frontend, но мало кто знает, что есть и неплохой frontend roadmap на русском языке.

Собственно вот — https://vallek.github.io/frontend-roadmap-ru/

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

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

Показываем URL рядом со ссылкой

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

HTML:

<p>
  Идите в <a href="https://www.google.com/">Google</a>, 
  если вам нужно найти какую-либо информацию😎
</p>

Показываем URL:

a::after {
  content: ' → ' attr(href);
  opacity: 0.8;
  font-size: 20px;
}

■ a::after — создаем псевдоэлемент после содержимого ссылки.
■ content: ' → ' attr(href) — добавляем стрелку → для визуального разделения.
■ attr(href) — функция CSS, которая вытаскивает значение атрибута href.
■ Браузер автоматически подставляет URL вместо attr(href).

Если ссылка будет слишком длинная, то можно добавить word-break: break-all; для нормального переноса.

Еще один простой CSS-трюк, в нашу коллекцию, который не требует JS)

Пример, как всегда, здесь.

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

Интересная обнова на Хабре

Заглянул на досуге на Хабр, полистать статьи. Сижу, значит, листаю-читаю и вижу в блоках с кодом кнопку "Объяснить код с SourceCraft". Раньше вроде не замечал её. Ради интереса кликнул — интересная фича, должен заметить)

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

Я немного потестил, довольно годные объяснения получаются.

Так что, если давно не были на Хабре или не в курсе новинки, то можете зайти и заценить)

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

Утро вечера мудренее)

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

Gooey-эффект: плавное слияние текста на CSS

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

HTML:

<section>
  <h1>HTML</h1>
  <h1>CSS</h1>
</section>

Накладываем элементы друг на друга:

section {
  display: grid;
  place-items: center;
}

section > * {
  grid-area: 1 / 1;
}

Оба h1 занимают одну и ту же ячейку грида (1 / 1).

Анимация появления и исчезания:

h1 {
  font-size: 13vw;
  animation: fade 4s infinite;
  animation-timing-function: linear(1 45%, 0 55% 90%, 1);
}

h1:nth-child(2) {
  animation-timing-function: linear(0 45%, 1 55% 90%, 0);
}

@keyframes fade {
  from { opacity: 0 }
  to { opacity: 1 }
}

Первый заголовок:
■ 1 45% — полностью видим до 45% анимации.
■ 0 55% 90% — исчезает к 55% и остаётся невидимым до 90%.
■ 1 — появляется обратно к концу.

Второй заголовок (зеркально):
■ 0 45% — скрыт до 45%.
■ 1 55% 90% — появляется к 55% и держится до 90%.
■ 0 — исчезает к концу.

blur + contrast:

section {
  background: white; 
  animation: gooey 4s infinite;
  animation-timing-function: linear(0, 0 45%, 1 50%, 0 55% 90%, 1 95%, 0);
}

@keyframes gooey {
  to { filter: blur(10px) contrast(30); }
}

Сердце gooey-эффекта:
■ Белый фон обязателен — contrast работает с цветовыми границами.
■ blur(10px) — размывает границы букв.
■ contrast(30) — резко повышает контраст, превращая размытые края в чёткие.

Отлично подойдет для hero-секций, заголовков и привлечения внимания

Полный код можно глянуть здесь.

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

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

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

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

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

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

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

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

Инпуты в стиле 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 для определения заполненности поля)

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

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

Видео-шпаргалка по основам Flexbox

Нашел еще одну приколдесную шпаргалку, очень наглядно и понятно, разбираются основные свойства:
■ flex-direction
■ flex-wrap
■ justify-content
■ align-items
■ align-content
■ order
■ flex-grow
■ flex-shrink
■ flex-basis
■ align-self

Сохраняем в коллекцию)

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

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

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

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) — самый читаемый вариант)

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

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

Круговые диаграммы на чистом 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%
);

Просто указываем диапазон для каждого цвета и все, получаем рабочую диаграмму)

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

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

Стилизация select option

Бывает необходимость добавить для select кастомные стили, чтобы он не выбивался из дизайна. Давайте разберем, как в целом это можно сделать.

HTML:

<div class="select">
  <select name="slct" id="slct">
    <option>-- Выберите вариант --</option>
    <option value="1">Вариант 1</option>
    <!-- остальные options -->
  </select>
</div>

Обертываем select в div для дополнительного контроля над стилями.

Сбрасываем стандартные стили:

select {
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
}

Создаем wrapper-контейнер:

.select {
  position: relative;
  overflow: hidden;
  background: #2c3e50;
  border-radius: 0.25em;
}

Он нужен для добавления кастомной стрелки, а overflow: hidden обрезает стандартную стрелку браузера.

Добавляем стрелку:

.select::after {
  content: "▼";
  position: absolute;
  right: 0;
  pointer-events: none;  /* Клики проходят сквозь стрелку */
  background: #34495e;
}

pointer-events: none позволяет кликать "сквозь" псевдоэлемент на сам селект.

Стилизуем select:

select {
  width: 100%;
  padding: 0 3em 0 1em;  /* Отступ справа под стрелку */
  cursor: pointer;
}

Правый padding (3em) освобождает место для нашей кастомной стрелки.

Стилизуем опции:

select option {
  background-color: #2c3e50;
  color: white;
}

В итоге wrapper + псевдоэлемент дают нам возможность кастомизировать select)

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

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