Тень хедера при скролле

На днях пытался запилить тень, которая появляется под хедером, при прокрутке страницы. Самое интересное из того, что перепробовал — это использование animation-timeline: scroll().

Всё получается очень классно, но есть одно "НО": пока что не работает эта история в Firefox.

animation-timeline: scroll() — эта фича позволяет привязать CSS-анимацию к прокрутке страницы.

header {
  position: sticky;
  top: 0;
  background: white;
  
  /* Изначально без тени */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  
  /* Привязываем анимацию к скроллу */
  animation: shadow-fade both linear;
  animation-timeline: scroll(root);
  animation-range: 0px 50px;
}

@keyframes shadow-fade {
  to {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

Как это работает:
■ animation-timeline: scroll(root) — анимация управляется прокруткой страницы.
■ animation-range: 0px 50px — анимация происходит в первые 50px скролла.
■ both — анимация работает в обе стороны (при скролле вверх тень исчезает).
■ linear — равномерная скорость изменения.

Всё было бы очень классно и круто, если бы это поддерживал Firefox, но пока, к сожалению это не так(

Вот, что говорит caniuse — animation-timeline: scroll().

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

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

Простой параллакс на чистом CSS

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

Основа эффекта:

.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

Здесь background-attachment: fixed — ключевой момент. Он "фиксирует" фон относительно окна, а контент прокручивается — создаётся эффект объёма.

HTML:

<section class="section-text">Текст</section>
<section class="parallax-bg bg-1"></section> 
<section class="section-text">Еще текст</section>

Чередуем текстовые блоки и параллакс-изображения.

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

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

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

Абсолютное позиционирование)

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

Эффект инвертирования цветов в CSS

Если нужно, как то заметно выделить элемент или даже блок на странице, к примеру при ховере, то можно попробовать использовать filter: invert(100%).

Делается быстро, эффект заметный)

Просто вешаем на нужный элемент ховер с фильтром:

.card:hover {
  filter: invert(100%);
  transition: filter 0.4s; /* для плавности */
}

И всё, заметный интерактив готов)

Неплохо подходит: для кнопок, монохромных иконок (соцсети, меню), галерей — эффект "негатив" на изображениях, карточки товаров/услуг.

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

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

Стилизуем разрывы текста в CSS

Если у вас есть текст с оформлением, который переносится на несколько строк. То с помощью box-decoration-break можно контролировать, как оформление будет отображаться при переносе.

Разберем на примере:

<div class="container">
  <h1><span class="clone">Привет, мир!</span></h1>
  <h1><span>Привет, мир!</span></h1>
</div>

Здесь у нас 2 текста, которые переносятся на новую строку (max-width: 200px).

CSS:

span {
  background: linear-gradient(to right, #4f46e5, #ec4899);
  color: white;
  padding: 12px;
}

.clone {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Зададим одинаковое оформление, но первому тексту добавим box-decoration-break: clone и посмотрим разницу:
■ по умолчанию box-decoration-break: slice — оформление ведёт себя как единое целое, паддинги только по бокам всего блока, фон/градиент продолжается между строками.
■ box-decoration-break: clone — каждая строка становится независимым блоком, паддинги со всех сторон у каждой строки, фон/градиент применяется к каждой строке отдельно.

Важно помнить, это работает только с inline-элементами.

Такой вот короткий лайфхак, если не знали об этом свойстве раньше)

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

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

Не совсем по теме, но блин, ору))

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

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

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

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

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Email</th> 
      <th>Город</th>
      <th>Профессия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван Петров</td>
      <td>ivan@example.com</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-атрибута и вставляет как подпись

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

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

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

Псевдобрейкпоинты для шрифта без @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.
Это убивает плавность и даёт ступенчатый рост — как будто у тебя есть брейкпоинты каждые пару сотен пикселей, но ты их не писал.

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

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

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

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

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

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

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

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

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

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

Оживляем форму с помощью :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 — весь контейнер "понимает", что внутри что-то активно, и реагирует)

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

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

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

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

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

Не давно в этом посте, мы разбирали, как делать 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%);
}

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

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

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

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 заливать не стал, вроде и так понятно)

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

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

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

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

Разберём простой способ создания рейтинга без JS.

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

<input type="radio" name="rating" value="5" id="star5">
<label for="star5" title="5 звёзд"></label>

Радиокнопки скрыты, но управляют состоянием через связь for с id.

row-reverse переворачивает порядок отображения:

.rating {
  display: flex;
  flex-direction: row-reverse;
}

Прячем исходные radio-кнопки:

.rating input { display: none; }

Псевдоэлемент заменяет пустые label на звёзды:

.rating label::before {
  content: "★"; /* создаём визуальные звёзды */
}

Селектор ~ находит все последующие label после выбранного input:

.rating input:checked ~ label {
  color: #ffc107; /* подсветка выбранных звёзд */
}

Принцип работы:
Благодаря row-reverse и селектору ~, при выборе звезды — подсвечиваются все предшествующие ей в визуальном порядке.

Возможных реализаций звездного рейтинга много, но этот вроде самый простой)

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

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

Основные способы центрирования колонки

Допустим, у нас есть колонка с максимальной шириной 1024px, и нам нужно ее отцентровать. Разберем самые основные способы.

Классический способ

.container {
  max-width: 1024px;
  margin: 0 auto;
}

Автоматические отступы слева и справа заставляют элемент центрироваться. Работает абсолютно везде и понятен любому разработчику, нестареющая классика)

CSS Grid

.wrapper {
  display: grid;
  place-items: center;
}
.container {
  width: 100%;
  max-width: 1024px;
}

place-items: center центрирует содержимое как по горизонтали, так и по вертикали. Родитель активно управляет позиционированием дочерних элементов.

Flexbox

.wrapper {
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  max-width: 1024px;
}

Flexbox превращает родитель в гибкий контейнер, а justify-content: center выравнивает содержимое по центру главной оси.

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

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

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

"Липкий" хедер с эффектом размытия

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

Сделаем обычную разметку:

<header class="header"></header>
<main class="main">
  <section class="section">
    <h2></h2>
    <p></p>
  </section>
</main>

Тут просто, для примера хедер, и несколько секций.

Стилизуем хедер:

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 100;
}

Делаем фиксированное позиционирование, ставим его поверх конента z-index: 100.
Задаем фон с прозрачностью и с помощью backdrop-filter получаем эффект размытия фона под элементом.

Можно поиграться с backdrop-filter и background, чтобы получилось еще интереснее)

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

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

Бургер-меню без JS

Давайте разберем, как сделать адаптивное меню для сайта, используя только HTML и CSS.

Нам нужно:
■ Скрытый checkbox для хранения состояния.
■ Label, как переключатель (кнопка бургера).
■ Меню изначально скрыто через opacity: 0.
■ При клике на label — чекбокс переключается и показывает меню.

HTML:

<input type="checkbox" id="menu-toggle">
<div class="menu">
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
  </nav>
</div>
<label for="menu-toggle" class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</label>

CSS:

#menu-toggle {
  display: none;
}
.menu {
  opacity: 0;
  visibility: hidden;
}
#menu-toggle:checked ~ .menu {
  opacity: 1;
  visibility: visible;
}

Как работает:
■ Checkbox скрыт — display: none, но состояние сохраняется.
■ Label связан с input через for="menu-toggle".
■ Клик на label = клик на checkbox — браузер автоматически переключает состояние.
■ Селектор ~ — находит элементы .menu после чекбокса.
■ :checked — псевдокласс активен только при отмеченном checkbox.
■ Результат — меню появляется/исчезает при каждом клике.

Такая вот нехитрая, но рабочая схема)

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

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

Эффект "появления текста при наведении"

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

HTML:

<h1>Наведи<span class="hide">, чтобы увидеть весь текст</span>!</h1>

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

Скрываем текст:

.hide {
  display: inline-block;
  max-width: 0%;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 1s ease-in-out;
}

■ display: inline-block — превращаем span в inline-block, для управления его шириной.
■ max-width: 0 — ограничиваем максимальную ширину до 0.
■ overflow: hidden — обрезаем всё, что выходит за пределы блока.
■ transition: max-width 1s ease-in-out — анимация изменения ширины.

Эффект появления при наведении:

h1:hover .hide {
  max-width: 100%;
}

При наведении на <h1> мы увеличиваем max-width до 100%, и текст плавно "раскрывается" слева направо.

Такой вот прикольный эффект получается)

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

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

Градиентная обводка текста

Сегодня давайте разберем один из эффектных трюков — текст с градиентной обводкой на чистом CSS.

HTML:

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

Основные настройки вынесем в переменные:

:root {
  --color-background: #000119;
  --stroke-width: 12px;
  --font-size: 150px;
  --font-weight: 700;
}

Основной эффект:

h1 {
  background-clip: text;
  background-image: linear-gradient(
    to right,
    #09f1b8,
    #00a2ff,
    #ff00d2,
    #fed90f
  );
  color: var(--color-background);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: var(--stroke-width);
}

Как это работает:

■ Создаём линейный градиент с четырьмя цветами.
■ background-clip: text — обрезаем фон по форме текста.
■ Устанавливаем цвет текста, который совпадает с фоном страницы.
■ stroke эффект:
-webkit-text-stroke-width задаёт толщину обводки (12px).
-webkit-text-stroke-color: transparent делает внутреннюю часть обводки прозрачной.

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

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

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

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

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); 
}

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

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

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

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 — поднимаем заголовок над остальным контентом

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

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

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

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

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

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

<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;
}

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

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

Акцент в меню с помощью :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 — сделать полупрозрачными

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

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

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

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

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

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

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

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

На этом всё)

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

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

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;
  }
}

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

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

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

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

Контроль изображения с 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-эффект затухания для обрезки текста

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

Причем организовать это можно без псевдоэлементов, а с помощью 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 = полная прозрачность (текст исчезает)
■ Градиент от чёрного к прозрачному означает, что текст будет постепенно исчезать, а не резко обрываться.

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

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

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

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) — создаем полупрозрачный чёрный градиент.

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

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

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