Css Grid Layout

Еще один интересный видос обнаружил, теперь про то, как быстро накидать стандартную сетку сайта (шапка, сайдбар, контент и подвал) с помощью гридов.

Код из видео, разметка:

<main>
  <header>Header</header>
  <article>Content</article>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</main>

CSS:

main {
  display: grid;
  grid-template-areas: 
    "head head head"
    "side content content"
    "foot foot foot";
  grid-template-rows: 30px auto 30px;
  min-height: 100vh;
}
header { 
  grid-area: head; 
}
article {
  grid-area: content;
}
aside {
  grid-area: side; 
}
footer {
  grid-area: foot;
}

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

P.S. превью получилось неказистое, но если запустить видео, то вроде всё норм)

Убираем стрелочки у <input type="number">

При использовании <input type="number"> браузеры автоматом добавляют к полю стрелочки (спиннеры), которые позволяют увеличивать или уменьшать значение с помощью клика. Это удобно, но не всегда желательно с точки зрения дизайна или логики работы интерфейса.

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

/* Убирает стрелки в Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Убирает стрелки в Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

В результате, поле ввода числа без стрелочек и единый внешний вид на всех устройствах и браузерах)

Код с примером здесь, добавил туда еще кастомные кнопки для красоты)

Блок по ширине контента — width: fit-content

Если нужно, чтобы блок был ровно такой ширины, как его содержимое, но при этом не вылезал за границы родителя, то есть отличное решение — width: fit-content.

fit-content заставляет элемент:
■ Сжиматься под содержимое, если оно меньше доступной ширины.
■ Оставаться в пределах родителя, если контент слишком широкий.

Т.е. грубо говоря, width: fit-content ведет себя, как inline-block.

.fit-content {
  width: fit-content;
}

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

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

Разбиваем список на колонки с помощью columns

Иногда бывает задача взять список и разбить его на несколько колонок. Наверное, самый простой способ для этого — это использовать CSS-свойство columns.

Допустим, у нас есть обычный HTML-список:

<ul class="multi-column-list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6</li>
</ul>

Чтобы превратить его в двухколоночный список, достаточно добавить следующий CSS:

.multi-column-list {
  columns: 2;
}

Это заставит браузер автоматически распределить элементы по двум колонкам.

Так что, если нужно просто равномерно разбить список на колонки без особой логики, то columns — норм выбор)

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

Создаем стильные кастомные чекбоксы на CSS

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

HTML структура:

<div class="list">
  <input type="checkbox" name="role" id="opt1" />
  <label for="opt1">HTML, CSS</label>
  
  <input type="checkbox" name="role" id="opt2" />
  <label for="opt2">JavaScript</label>
</div>

Используем стандартные <input type="checkbox">, связываем их с <label> через атрибут for.

CSS:

.list input {
  display: none;
}

.list label {
  cursor: pointer;
  padding: 13px 34px;
  border: 0.6mm solid #000;
  border-radius: 30px;
}

.list input:checked + label {
  color: rgb(0, 120, 230);
  border-color: rgb(15, 150, 255);
  background: rgb(230, 245, 255);
}

display: none скрываем чекбоксы, стилизуем label, который становится кнопкой.
А псевдокласс :checked + соседний селектор меняет стиль при выборе.

Стильно, модно, молодёжно)

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

Бесконечная карусель без JS

Т.к. мы будем делать карусель только на HTML и CSS, то давайте сделаем это с помощью дублирования карточек + анимации translateX(-50%).

Создадим в .items два одинаковых блока изображений:

<div class="items">
  <!-- Первый набор (оригиналы) -->
  <img src="image1.jpg" class="item"> 
  <img src="image2.jpg" class="item">
  <!-- ... всего 7 изображений ... -->

  <!-- Второй набор (точные копии) -->
  <img src="image1.jpg" class="item"> 
  <img src="image2.jpg" class="item">
  <!-- ... ещё 7 таких же ... -->
</div>

Добавим в CSS анимацию:

.items {
  display: flex;
  animation: slide 50s linear infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

Когда анимация достигает -50%, она возвращается к 0% (благодаря infinite), но глаз этого не замечает, потому что дубликаты идентичны оригиналам.

Такая фишка отлично зайдет на лендингах, где есть карусель партнеров с их логотипами и т.п.)

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

Делаем отступы только между элементами списка

Простое и эффективное решение, если нужно добавить отступы между пунктами списка, но так, чтобы не было лишних отступов сверху или снизу.

Используем селектор li + li — он применяет стиль ко всем элементам li, кроме первого:

li + li {
  margin-top: 35px; /* Отступ сверху для всех, кроме первого */
}

Если не любим li + li, то можно :not(:last-child):

li:not(:last-child) {
  margin-bottom: 35px;
}

Или Flexbox + gap:

ul {
  display: flex;
  flex-direction: column;
  gap: 35px; /* Отступ между элементами */
}

Но мне больше нравится первый вариант)

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

Простая кнопка "Наверх"

Сегодня разберём, как сделать кнопку "Наверх", добавим немного JS, чтобы кнопка появлялась только после прокрутки вниз.

HTM:

<a href="#" class="up-button" id="upBtn">
  <svg viewBox="0 0 24 24">
    <path d="M5 15l7-7 7 7" />
  </svg>
</a>

Плавный скролл:

html {
  scroll-behavior: smooth;
}

Сама кнопка:
position: fixed — всегда внизу справа.
opacity: 0; pointer-events: none; — по умолчанию невидима и неактивна.
display: flex + align/justify — центрируем стрелку внутри.

Добавляем класс .show, кнопка становится видимой:

.up-button.show {
  opacity: 1;
}

JS:

const btn = document.getElementById('upBtn');

window.addEventListener('scroll', () => {
  btn.classList.toggle('show', window.scrollY > 300);
});

Отслеживаем прокрутку окна. Если прокрутили больше чем на 300px — добавляем класс .show, и кнопка появляется. Если вернулись вверх — прячем.

Ну и в целом все, мы получили стильную, функциональную кнопку "наверх", как в лучших UI)

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

Делаем кастомную иконку <summary>

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

Убираем стандартный треугольник:

details summary {
  list-style: none;
}

Добавляем кастомную иконку:

details summary::before {
  content: "➜"; /* Наша кастомная иконка */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

Если надо, то добавляем анимацию поворота:

details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
}

Кстати, также можно запилить и SVG:

details summary::before {
  content: "";
  background: url("data:image/svg+xml,<svg...>") no-repeat center;
  width: 16px;
  height: 16px;
}

И всё, дизайнеры будут довольны)

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

Управляем кнопкой через чекбокс с помощью :has()

Еще одно интересное использование псевдокласса :has() — делаем кнопку активной (доступной для нажатия) только если отмечен чекбокс.

HTML:

<div class="container">
  <input type="checkbox" id="agreement">
  <label for="agreement">Согласен с условиями</label>
  <button>Отправить</button>
</div>

CSS:

/* Стили для неактивной кнопки */
button {
  opacity: 0.5;
  pointer-events: none;
}

/* Если чекбокс отмечен — делаем кнопку активной */
.container:has(input[type="checkbox"]:checked) button {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

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

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

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

Списки с автоматическими разделителями

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

Используем для этого псевдоэлемент ::after.

Стандартная HTML разметка списков:

<ul>
  <li>Flexbox</li>
  <li>Grid</li>
  <li>Позиционирование</li>
  <li>Переменные CSS</li>
</ul>

Добавляем запятые ко всем li, кроме последнего:

li:not(:last-child)::after {
  content: ",";
}

Добавляем точку в конце:

li:last-child::after {
  content: ".";
}

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

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

Стилизация плейсхолдера в полях ввода

При верстке макетов, практически всегда, плейсхолдер не стандартный, т.к. дизайнеры любят кастомизировать всё — даже подсказки в полях ввода должны выглядеть «не как у всех».

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

Используем псевдоэлемент ::placeholder, который позволяет менять внешний вид текста-подсказки внутри <input> или <textarea>.

Разметка:

<input type="text" placeholder="Введите своё имя">

Меняем цвет плейсхолдера:

input::placeholder {
  color: #8b5cf6;
}

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

input:focus::placeholder {
  opacity: 0.5;
}

Ну в целом всё)

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

Создаем видео-фон для блока

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

HTML-разметка:

<div class="container">
  <video autoplay muted loop playsinline>
    <source src="video.mp4" type="video/mp4">
  </video>
  <h1>ФОРМОШЛЁП</h1>
</div>

В контейнере разместили текст и видео.

Стилизация:

.container {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.3) contrast(1.1);
}

Контейнер на всю высоту экрана, выравниваем по центру, обрезаем лишнее.
Видео растягиваем на 100%, ставим на "на задний план" и затемняем, чтобы сделать текст более читаемым.

В принципе, это всё — небольшой набор стилей, чтобы добавить видео-фон на страницу)

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

Автоматические кавычки в CSS

А вы знали, что CSS умеет автоматически ставить правильные типографские кавычки в зависимости от языка текста?

Достаточно прописать в CSS правила для разных языков:

:lang(ru) {
  quotes: "«" "»";
}
:lang(en) {
  quotes: "“" "”";
}

А в HTML просто оборачиваем цитату в <q> и указываем язык:

<!-- «Быть или не быть» -->
<p lang="ru">
  Цитата на русском: <q>Быть или не быть</q>.
</p>

<!-- “To be or not to be” -->
<p lang="en">
  Quote in English: <q>To be or not to be</q>.
</p>

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

<html lang="ru">

Теперь все <q> автоматически будут с «ёлочками».

Вроде мелочь, но приятно, сам недавно узнал об этом)

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

Когда вставил кусок кода со Stack Overflow в свой проект.

Где твой проект — это колёса)

Маркеры списков, зависящие от содержимого элемента

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

HTML-разметка:

<ul class="emoji-list">
  <li data-icon="🚀">Запуск нового проекта</li>
  <li data-icon="✅">Завершенная задача</li>
  <li data-icon="⚠️">Требует внимания</li>
  <li data-icon="🎯">Приоритетная цель</li>
</ul>

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

CSS:

.emoji-list li::marker {
  content: attr(data-icon) " ";
}

С помощью attr() извлекаем эти данные и отображаем через ::marker.

Такой вот метод сделать списки еще интереснее)

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

Shorthand-свойства в CSS

Нашел классный видос с сокращёнными свойствами в CSS, решил вам тоже показать)
Чтобы было удобнее, добавил код из видео в пост:

Padding

/* long-hand */
padding-top: 1em;
padding-right: 3px;
padding-bottom: 30px;
padding-left: 5px;
/* short-hand */
padding: 1em 3px 30px 5px;

Margin

/* long-hand */
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
/* short-hand */
margin: 10px 5px 10px 5px;

Border

/* long-hand */
border-width: 1px;
border-style: solid;
border-color: #000;
/* short-hand */
border: 1px solid #000;

Font

/* long-hand */
font-style: italic;
font-weight: bold;
font-size: 15px;
line-height: 1.2;
font-family: Arial, sans-serif;
/* short-hand */
font: italic bold 15px/1.2 Arial, sans-serif;

Background

/* long-hand */
background-color: #000;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: left top;
/* short-hand */
background: #000 url(image.png) no-repeat left top;

Animation

/* long-hand */
animation-name: crazy;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 12;
animation-direction: backwards;
/* short-hand */
animation: crazy 4s ease-in-out 0.5s 12 backwards;

List

/* long-hand */
list-style-type: disc;
list-style-position: outside;
list-style-image: url('image.png');
/* short-hand */
list-style: disc outside url('image.png');

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

Добавляем svg-иконку в кнопку

Часто требуется добавлять в кнопку иконку, давайте здесь разберем простой способ для создания такой кнопки)

HTML-разметка:

<button class="btn">
  <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <!-- SVG content -->
  </svg>
  Кнопка
</button>

Просто вставляем SVG в кнопку, добавляем текст.

CSS:

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn svg {
  width: 20px;
  height: 20px;
}

С помощью flex выравниваем иконку и текст, gap задает расстояние между иконкой и текстом.
Также через CSS управляем размером иконки, а благодаря currentColor иконка будет одного цвета с текстом кнопки.

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

Overlay с помощью border-image

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

Свойство border-image, позволяет заменять стандартные границы элемента на произвольное изображение или CSS-градиент. Но можно использовать его не совсем стандартно)

HTML-разметка:

<div class="container overlay">
  <h1>С затемнением</h1>
</div>

CSS:

.container {
  height: 250px;
  margin: 10px auto;
  background: url(image.jpg) center/cover;
  display: grid;
  place-items: center;
  color: #fff;
}

.overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}

С помощью border-image мы:
■ fill — растягиваем градиент на всю область элемента.
■ 0 — отключаем "нарезку" границы (градиент заполняет всё).
■ linear-gradient(#0003, #000) — создаем полупрозрачный чёрный градиент.

Такой вот интересный и необычный способ)

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

Анимируем градиентный фон

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

HTML-разметка:

<div class="hero">
  <h1>формошлёп</h1>
</div>

Тут у нас один элемент — контейнер .hero с заголовком.

Секция .hero:

.hero {
  height: 100vh;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 800% 800%;
  animation: gradientMove 15s ease-in-out infinite;
}

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

Анимация:

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Сдвигаем фон по горизонтали, начинаем с 0%, доходим до 100% и возвращаемся.

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