Формошлёп

Инструменты меняются — проблема вечна)

Группировка выбранных элементов Сегодня разберем, как можно визуально группировать выбранные элементы. Если отметить несколько пунктов подряд, они "склеятся" в единый блок, потеряв скругления между собой. HTML:

    
        <div class="card">
  <label><input type="checkbox">Первый элемент</label>
  <label><input type="checkbox" checked>Второй элемент</label>
  <label><input type="checkbox" checked>Третий элемент</label>
  <label><input type="checkbox">Четвертый элемент</label>
</div>{}
    

Каждый label содержит чекбокс и текст. Кликать можно по всей области строки. Базовое выделение:

    
        label:has(input:checked) {
  background: #d4f7d4;
  border-radius: 8px;
}{}
    

Каждый отмеченный label получает зелёный фон и скругление со всех четырёх сторон. Если выбран сосед сверху:

    
        label:has(input:checked) + label:has(input:checked) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}{}
    

Если текущий label идёт сразу после другого выбранного label - убираем верхние скругления. Если выбран сосед снизу:

    
        label:has(input:checked):has(+ label input:checked) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}{}
    

Если после текущего label идёт ещё один выбранный - убираем нижние скругления. В результате несколько выбранных элементов подряд выглядят как один цельный блок) Потестить код можно здесь.

Самая полная открытая библиотека Если вы любите читать или просто иногда ищете книги для обучения и т.п., то у меня для вас есть отличная находка — Anna's Archive. Это «теневая» библиотека, цель которой — сделать знания доступными для всех. На данный момент там более 63 млн книг. Там есть все: ■ художественная литература ■ научные работы ■ учебники ■ редкие и давно изданные книги По сути, это поисковик по миллионам книг в разных форматах: PDF, EPUB, MOBI и других, подходящих для читалок и планшетов. Если не знали про это раньше (как я), то теперь знайте) Зеркала: https://annas-archive.li/ https://annas-archive.gl/

Выбор диапазона элементов в списке Иногда нужно выделить конкретный диапазон элементов — например, с 7 по 14. Без классов, без JS, только на CSS. Давайте разберем, как это можно сделать. HTML:

    
        <ol>
  <li>Элемент списка</li>
  ...
  <li>Элемент списка</li>
</ol>{}
    

Здесь у нас обычный нумерованный список. CSS:

    
        .ol li:nth-child(n + 7):nth-child(-n + 14) {
  background: lightpink;
}{}
    

Выбираем элементы с 7 по 14 включительно, разберем подробней: ■ :nth-child(n + 7) - выбирает все элементы, начиная с 7-го и до конца списка (7, 8, 9, 10... 20). ■ :nth-child(-n + 14) - выбирает все элементы от начала списка до 14-го включительно (1, 2, 3... 14). ■ Комбинация обоих - когда мы соединяем оба селектора, браузер выбирает элементы, которые подходят И первому, И второму условию. Это пересечение дает нам диапазон 7–14. В общем: ■ :nth-child(n + START) — выбирает от START до конца. ■ :nth-child(-n + END) — выбирает от начала до END. ■ Комбинация даёт диапазон START–END. Такой вот небольшой лайфхак, если нужно выделить диапазон) Пример тут.

Анимированная градиентная рамка на CSS Сегодня разберем красивый и модный визуальный эффект — анимированную градиентную рамку, которая красиво переливается. HTML:

    
        <div class="rainbow"></div>{}
    

Контейнер для карточки. CSS для карточки: .rainbow { position: relative; width: 400px; height: 300px; border-radius: 12px; overflow: hidden; } Задаем размеры и скругляем углы. overflow: hidden — обрезаем все, что выходит за пределы контейнера. Вращающийся слой:

    
        .rainbow::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(red, orange, yellow, red);
  animation: rotate 4s linear infinite;
}{}
    

Создаем градиент, который в 2 раза шире и выше самого родителя. Сдвигая его на top: -50%; left: -50%;, мы центрируем его относительно нашего .rainbow, а animation заставляет этот слой бесконечно вращаться. Белый внутренний слой:

    
        .rainbow::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: white;
  border-radius: 8px;
}{}
    

Накрываем вращающийся градиент почти полностью, оставляем видимыми только 10 пикселей по периметру — это и есть наша рамка. Анимация:

    
        @keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}{}
    

Простая анимация, которая вращает ::before на 360 градусов. Такой эффект отлично подойдет для привлечения внимания к важным элементам на странице) Результат, как всегда, здесь.

Интерактивная карта с 500 000+ телеграм-каналов На днях товарищ скинул интересную карту телеграм-каналов, которую создали ребята из TGPages. Я конечно, сразу пошел проверять,есть там наш "Формошлёп" или нет) Все в порядке, канал на месте. Правда, его почему-то отнесли к тематике «Дизайн и креатив», странновато, конечно, но мб из-за того, что в описании указано, что мы здесь "шлёпаем формы и красим кнопки") Ну да ладно. В общем, карта интересная и залипательная, выполнена в виде звездного неба, со своими галактиками и созвездиями, разбитыми по тематикам. Каждая звезда — отдельный канал с описанием и т.п. Если интересно посмотреть на масштабы телеграм-каналов и найти что-нибудь новое — вот ссылка: https://tgpages.com/atlas/map/

Hover-эффект карточек с выезжающим контентом Сегодня разберем, как создать стильную карточку с контентом, который проявляется при наведении. Главная фишка здесь — игра с позиционированием и трансформацией. HTML:

    
        <div class="card">
  <div class="img-box"><img src="..."></div>
  <div class="content">
    <h2>Leafs</h2>
    <p>Lorem ipsum...</p>
    <a href="#">Read More</a>
  </div>
</div>{}
    

Карточка содержит блок с изображением и блок с контентом. Базовые стили карточки:

    
        .card {
  position: relative;
  width: 350px;
  height: 300px;
  transition: 0.5s;
}

.card:hover {
  height: 400px;
}{}
    

■ position: relative нужен, чтобы абсолютно позиционировать картинку и контент внутри карточки. ■ При ховере карточка увеличивается на 100px, освобождая место под текст. Блок с изображением:

    
        .img-box {
  position: absolute;
  top: 20px;
  width: 300px;
  height: 220px;
  overflow: hidden;
  transition: 0.5s;
}
.card:hover .img-box {
  top: -100px;
  scale: 0.75;
}{}
    

■ Картинка вынесена в position: absolute, чтобы она могла выходить за границы карточки. ■ При наведении - картинка уезжает вверх за границы карточки и уменьшается до 75% размера. Контент карточки:

    
        .content {
  position: absolute;
  top: 252px;
  overflow: hidden;
  transition: 0.5s;
}

.card:hover .content {
  top: 130px;
  height: 250px;
}{}
    

Контент изначально обрезан overflow: hidden. При наведении поднимается вверх и раскрывается на полную высоту. Весь эффект получается за счет абсолютного позиционирования блоков внутри карточки, изменения top и scale при наведении и плавный transition: 0.5s для анимации. Простой, но эффектный способ оживить карточки на сайте) Результат можно посмотреть здесь.

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

    
        <input type="radio" name="slider" id="c1" checked>
<label class="card" for="c1"></label>{}
    

Основа галереи — группа радиокнопок, где каждая кнопка соответствует своему изображению. Атрибут name="slider" объединяет их в группу, позволяя выбрать только один элемент. CSS:

    
        input {
  display: none; 
}

.card {
  width: 90px;
  height: 420px;
  transition: 0.6s cubic-bezier(.25,.8,.25,1); 
}{}
    

■ Скрываем сами радиокнопки. ■ Задаем базовые размеры. ■ Применяем transition для плавности. Изменение состояния:

    
        input:checked + .card {
  width: 520px;
  filter: grayscale(0);
}{}
    

Когда радиокнопка активна, соседний лейбл (+) расширяется до 520px и становится цветным. Остальные карточки автоматически сжимаются. Фоновые изображения:

    
        [for="c1"] { background-image: url("..."); }{}
    

Селектор по атрибуту назначает каждой карточке своё изображение. В итоге, радиокнопки управляют состоянием, псевдокласс :checked применяет стили, а transition делает всё плавным. Пример можно найти здесь.

Необычный hover-эффект для изображений Нашел один любопытный ховер-эффект для карточек с изображениями — раньше вроде бы не встречал. Выглядит так, будто картинка начинает «рассыпаться» в стороны при наведении. Делается это, конечно, немного геморно и не сказать, что код самый изящный, но если нужен нестандартный визуальный эффект, то можно попробовать) HTML:

    
        <div class="card">
  <img class="card-front-image" src="..." />
  <div class="card-faders">
    <img class="card-fader" src="..." />
    <!-- ещё 7 копий -->
  </div>
</div>{}
    

card-front-image — основная картинка (всегда видна). card-faders — контейнер со скрытыми копиями, которые активируются при :hover. CSS:

    
        .card-faders {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0;
  transition: opacity 1500ms;
}{}
    

Контейнер .card-faders растянут на всю карточку, копии изначально невидимы. Активация при наведении:

    
        .card:hover .card-faders {
  opacity: 1;
}{}
    

При наведении на .card контейнер с копиями плавно проявляется за 1.5 секунды. Распределение анимаций:

    
        .card-fader:nth-child(odd) {
  animation: fade-left 3s linear infinite;
}
.card-fader:nth-child(even) {
  animation: fade-right 3s linear infinite;
}{}
    

Разделяем копии на две группы: ■ Нечётные (1-я, 3-я, 5-я, 7-я) получают анимацию fade-left — будут уходить влево. ■ Чётные (2-я, 4-я, 6-я, 8-я) получают анимацию fade-right — будут уходить вправо. Волновой эффект:

    
        .card-fader:is(:nth-child(3), :nth-child(4)) {
  animation-delay: 750ms;
}
.card-fader:is(:nth-child(5), :nth-child(6)) {
  animation-delay: 1500ms;
}
.card-fader:is(:nth-child(7), :nth-child(8)) {
  animation-delay: 2250ms;
}{}
    

1-я и 2-я копии — стартуют сразу (задержки нет). 1-я идёт влево, 2-я вправо. 3-я и 4-я копии — стартуют через 750ms. 5-я и 6-я копии — стартуют через 1500ms. 7-я и 8-я копии — стартуют через 2250ms. Анимация:

    
        @keyframes fade-left {
  from {
    scale: 1;
    translate: 0%;
    opacity: 1;
  }
  to {
    scale: 0.8;
    translate: -30%;
    opacity: 0;
  }
}{}
    

И тоже самое для fade-right, только translate: 30%; В итоге мы получаем эффект, который сложно назвать «чистым» или универсальным, но он точно выглядит необычно) Упростить его можно с помощью JS, чтобы генерировать копии динамически и гибко настраивать параметры. Результат можно найти здесь.

Библиотека иконок на чистом CSS Если вы ищете легкие и кастомизируемые решения для иконок, то обратите внимание на CSS＊GG. Это библиотека иконок (open-source), в которой более 700 иконок реализованных в основном на чистом CSS. Иконки доступны в нескольких форматах: чистый CSS, SVG и даже готовые пакеты для React. Простое подключение, для конкретной иконки (например search) копируем CSS:

    
        .gg-search {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-radius: 100%;
  margin-left: -4px;
  margin-top: -4px;
}
.gg-search::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 2px;
  height: 8px;
  background: currentColor;
  transform: rotate(-45deg);
  top: 10px;
  left: 12px;
}{}
    

В HTML используем:

    
        <i class="gg-search"></i>{}
    

Можно легко менять цвет, размер и т. п. Неплохая альтернатива тяжёлым шрифтам вроде Font Awesome)