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

Сегодня разберём, как сделать кнопку "Наверх", добавим немного 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% и возвращаемся.

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

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%.

На этом всё)

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