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="http://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% и возвращаемся.

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

CSS-эффект затухания для обрезки текста

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

Причем организовать это можно без псевдоэлементов, а с помощью mask-image.

Разметка:

<div class="single-line">
  Формошлёп: блог про фронтенд — шлёпаем формы и красим кнопки
</div>

CSS:

.single-line {
  white-space: nowrap;
  overflow: hidden;
  /* Маска для затухания */
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

Как работает mask-image:
■ mask-image задаёт прозрачность по шаблону.
■ black = непрозрачно (текст виден полностью)
■ transparent = полная прозрачность (текст исчезает)
■ Градиент от чёрного к прозрачному означает, что текст будет постепенно исчезать, а не резко обрываться.

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

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

CSS-стрелки через border и transform

Нашел интересный видос, как делать стрелки с помощью border и transform, зацените, может быть, кому-нибудь пригодится)

Вот код из видео:

.arrow-right {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(-45deg);
}
.arrow-up {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(-135deg);
}
.arrow-left {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(135deg);
}
.arrow-down {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(45deg);
}

Html-разметка:

<div class="arrow-right"></div>  <!-- стрелка вправо -->

Берём div и задаём ему границы только справа и снизу (border-width: 0 5px 5px 0).
Поворачиваем элемент с помощью transform: rotate() в нужную сторону.

В codepen заливать не стал, вроде и так понятно)

Контроль изображения с Object-Fit

Как разместить картинку в контейнере, если их пропорции не совпадают? object-fit решает эту задачу довольно просто.

Свойство определяет, как изображение будет помещаться в контейнер. Аналог background-size, но для img)

Fill
Изображение растягивается или сжимается, чтобы полностью заполнить контейнер. Пропорции могут быть нарушены.

object-fit: fill;

Cover
Изображение масштабируется с сохранением пропорций, чтобы полностью покрыть контейнер. Части изображения могут быть обрезаны.

object-fit: cover;

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

object-fit: contain;

Scale-down
Ведет себя как none или contain, выбирая вариант, который дает меньший размер изображения.

object-fit: scale-down;

None
Изображение отображается в исходном размере. Если оно больше контейнера, то обрезается.

object-fit: none;

Кстати, это свойство круто комбинируется с aspect-ratio)

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

Многострочный текст с вертикальным затуханием

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

Разметка:

<div class="text-container">
  <div class="multiline">Многострочный текст...</div>
</div>

CSS:

.multiline {
  height: 4lh;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

Получается такое интересное затухание текста сверху вниз)

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

Glitch-эффект для текста на CSS

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

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

Разберем его здесь, вдруг кому пригодится.

Разметка:

<div class="glitch">ФОРМОШЛЁП</div>

CSS:

.glitch {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  animation: glitch 0.9s infinite;
}

@keyframes glitch {
  0%,
  100% {
    text-shadow: -2px -2px 0 #1f640a, 2px 2px 0 red;
  }
  25% {
    text-shadow: 2px 2px 0 #1f640a, -2px -2px 0 red;
  }
  50% {
    text-shadow: 2px -2px 0 #1f640a, -2px 2px 0 red;
  }
  75% {
    text-shadow: -2px 2px 0 #1f640a, 2px -2px 0 red;
  }
}

Используем две тени — красная и зеленая, и в анимацией двигаем эти тени в разные стороны.

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

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

Или когда решил повайбкодить и нейросеть нагенерила код)

Анимация выделения текста при наведении

Случайно наткнулся на интересный прием — эффектное выделение важных частей текста при наведении.

Он отлично подходит для подсветки ключевых фраз в статьях, акцента на важных моментах и т.п.

HTML-разметка:

<p class="animate">
  Фронтенд-разработка — это создание внешнего интерфейса. 
  <span>Для фронтенд-разработчика важно, чтобы пользователи с лёгкостью могли найти на сайте всё, что им нужно.</span>
  К примеру, прочитать подробности о товаре...
</p>

Здесь обычный параграф с классом animate, а внутри него <span> оборачивает текст, который нужно выделить.

CSS:

p.animate span {
  background: linear-gradient(to right, #ffef7e, #b7f9e9);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background 750ms ease-in-out;
  box-decoration-break: clone;
}

.animate:hover span {
  background-size: 100% 100%;
}

Разбираем:
■ linear-gradient создаёт градиентное подчёркивание
■ background-size: 0% 100% - изначально фон невидим (0% по ширине)
■ transition обеспечивает плавную анимацию
■ box-decoration-break: clone - для многострочных выделений, чтобы фон применялся к каждой строке отдельно

:hover - триггер анимации, при наведении на весь абзац — фон растягивается на 100%.

На этом всё)

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

Оживляем форму с помощью :focus-within

Сегодня разберем, как сделать формы немного умнее и приятнее для пользователя)
Поможет нам в этом псевдокласс :focus-within

Допустим, у нас есть поле ввода с префиксом или суффиксом:

<div class="input-group">
  <span>https://</span>
  <input type="text" placeholder="domain.tld" />
</div>

Когда пользователь кликает на input, мы хотим, чтобы всё поле реагировало — включая span.
Для этого используем псевдокласс :focus-within, который применяется к родителю, если любой из его потомков находится в фокусе:

.input-group:focus-within {
  border-color: #275efe;
}
.input-group:focus-within span {
  background: #678efe;
  color: white;
}

Как только пользователь кликает на input — весь контейнер "понимает", что внутри что-то активно, и реагирует)

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

Акцент в меню с помощью :has()

Сегодня разберём мини-лайфхак: меню с эффектом "акцента" на активном пункте.
Ну, т.е. когда наводишь на один пункт — остальные слегка затемняются.

Создадим обычное меню:

<nav>
  <ul class="nav-list">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">Видео</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Добавим ховер, чтобы при наведении ссылка становилась оранжевой:

nav a:hover {
  color: #ff7a18;
}

И теперь заюзаем :has:

nav ul:has(a:hover) a:not(:hover) {
  opacity: 0.3;
}

Что мы получаем в итоге:
■ nav ul:has(a:hover) — если внутри списка есть ссылка в состоянии hover
■ a:not(:hover) — то все ссылки, которые НЕ в состоянии hover
■ opacity: 0.3 — сделать полупрозрачными

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

Такой вот эффект фокусировки внимания)

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

Футер выезжающий из-под контента

Сегодня разберём один из тех визуальных приёмов, который вы 100% видели на модных лендингах — "Sticky Footer Reveal", или по-русски — футер, который выезжает из-под контента при прокрутке)

HTML-разметка:

<div class="container">
  <!-- контент -->
</div>
<footer>
  <!-- футер -->
</footer>

CSS:

.container {
  position: relative;
  z-index: 1;
  background: #fff;
}

z-index: 1 и position: relative — это делает контейнер "выше" по слоям, чем футер. Поэтому он будет перекрывать футер при прокрутке.

footer {
  position: sticky;
  bottom: 0;
  background: #0b0b0b;
  z-index: 0;
}

Футер позиционируем через position: sticky и bottom: 0, чтобы закрепить на нижней границе страницы, а z-index: 0 — делает его "ниже" контента.

Теперь, когда заказчик говорит: "Сделайте что-то модное" — ты просто вставляешь этот футер и уходишь в отпуск)

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

Раскрывающаяся панель поиска

Сегодня разберем классную штуку — раскрывающуюся панель поиска. Такую часто можно встретить в хедерах сайтов.

Создадим контейнер с инпутом и кнопкой:

<div class="search-bar">
  <input type="search" class="search-input" placeholder="Искать...">
  <button class="search-btn">
    <i class="fa-solid fa-magnifying-glass"></i>
  </button>
</div>

Иконку возьмем из font-awesome, предварительно подключив его к странице.

CSS контейнера:

.search-bar {
  display: flex;
  justify-content: flex-end;
  background: white;
  border-radius: 50px;
  width: 70px;
  transition: width 0.4s ease;
  overflow: hidden; 
}

Теперь с помощью :focus-within расширяемся при фокусе на любом дочернем элементе:

.search-bar:focus-within {
  width: 500px;
}

Анимация появления инпута:

.search-input {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.search-bar:focus-within .search-input {
  opacity: 1;
}

Вкратце это все, полностью посмотреть код можно здесь.

По аккуратней с легаси)

Sticky заголовки

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

Разберем, как это сделать с помощью position: sticky.

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

<div class="content-block">
  <h2>Шаг 1</h2>
  <p>Контент...</p>

  <h2>Шаг 2</h2>
  <p>Контент...</p>

  <h2>Шаг 3</h2>
  <p>Контент...</p>
</div>

CSS:

h2 {
  position: sticky;
  top: 0;
  background: #6200ee;
  color: white;
  padding: 12px 20px;
  margin: 0;
  z-index: 1;
}

Что мы получаем:
■ position: sticky + top: 0 — заголовок прилипает к верхней границе контейнера
■ background нужен, чтобы перекрывать контент снизу
■ z-index: 1 — поднимаем заголовок над остальным контентом

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

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

Псевдобрейкпоинты для шрифта без @media

Все мы знаем про fluid typography с clamp() — шрифт плавно меняется в зависимости от ширины окна.

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

Для этого даже не нужны @media — достаточно одной строчки в CSS и round().

Реализация:

html {
  font-size: clamp(
    1em, 
    round(0.8em + 1.5vw, 0.5em), 
    2.5em
  );
}

Как это работает
1) clamp(min, preferred, max)
■ Минимум: 1em
■ Максимум: 2.5em
■ Желательное значение: результат функции round().

2) 0.8em + 1.5vw
■ 0.8em — стартовый размер
■ 1.5vw — прибавка, зависящая от ширины окна

3) round(..., 0.5em)
■ Округление результата до ближайшего кратного 0.5em.
Это убивает плавность и даёт ступенчатый рост — как будто у тебя есть брейкпоинты каждые пару сотен пикселей, но ты их не писал.

Вот такой хак еще в нашу копилку добавим, мало ли, вдруг пригодится)

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

Toggle Switch на CSS

Разберем, как сделать модный переключатель, вместо обычного чекбокса.

HTML структура:

<label class="toggle-switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

Внутри <label> лежит скрытый <input type="checkbox"> и стилизованный <span class="slider">, который и выглядит как переключатель.

Теперь прячем чекбокс:

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

Стилизуем ползунок:

.slider {
  background: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}

Добавляем бегунок (:before):

.slider:before {
  content: "";
  background: white;
  border-radius: 50%;
  transition: 0.4s;
}

Меняем стили при включении:

input:checked + .slider {
  background: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px); 
}

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

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

Адаптивная таблица без JS

Таблицы на мобильных — это боль. Помните те времена, когда приходилось скроллить влево-вправо, чтобы увидеть все колонки? Или когда текст был настолько мелким, что нужна была лупа? Сегодня разберем, как можно решить эту проблему)

Наша таблица:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Email</th> 
      <th>Город</th>
      <th>Профессия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван Петров</td>
      <td>[email protected]</td>
      <td>Москва</td>
      <td>Frontend-разработчик</td>
    </tr>
  </tbody>
</table>

На десктопе всё ок, а для мобильных превращаем таблицу в карточки:

@media (max-width: 640px) {
  /* Делаем все элементы таблицы блочными */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  /* Прячем заголовки */
  thead {
    display: none;
  }
  
  /* Каждая строка становится карточкой */
  tr {
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Ячейки превращаются в пары ключ-значение */
  td {
    display: flex;
    justify-content: space-between;
  }
  
  /* Добавляем подписи из data-атрибутов */
  td::before {
    content: attr(data-label) ":";
    font-weight: 600;
  }
}

В итоге, на мобильном:
■ display: block превращает все элементы таблицы в обычные блоки
■ Заголовки прячутся (они больше не нужны)
■ Каждая строка становится отдельной карточкой
■ attr(data-label) берет текст из HTML-атрибута и вставляет как подпись

Согласитесь, выглядит круто)

Код положил сюда.