3061
Шлёпаем формы и красим кнопки... Блог про фронтенд — просто, понятно и с юмором. Всех обнял, приподнял, пошел пилить для вас годноту) Связь: @advertos
3D-эффект карточки персонажа на CSS
Наткнулся на интересный эффект с карточками в стиле Diablo. Персонаж при наведении, как бы встаёт на пьедестал. Никакого JS — только HTML и CSS. Разбираем)
HTML:
<figure class="card">
<img src="necro.webp">
<figcaption>The Necromancer</figcaption>
</figure>
::before.card:hover::before {
filter: brightness(0.3);
transform: perspective(500px) rotateX(60deg);
}transform-origin: bottom — складывается от нижнего края, как крышка стола.imgplace-self: end center. При ховере растет вверх:.card img {
place-self: end center;
height: 100%;
}
.card:hover img {
height: 270%;
}object-position: top гарантирует что обрезка идёт снизу, а не сверху.figcaptionfigcaption {
transform: perspective(500px) translateY(100%) rotateX(-90deg);
transform-origin: top;
}.card:hover figcaption {
transform: perspective(500px) translateY(100%) rotateX(-30deg);
}
Эффект «наезжающего» футера на CSS
Видели такой прием на современных лендингах, когда футер плавно «наползает» на контент, постепенно размывая его? Давайте разберем как это работает.
HTML:
<section class="hero">
<div class="card">...</div>
</section>
<footer>...</footer>
.hero {
height: 100vh;
display: grid;
place-items: center;
position: sticky;
top: 0;
}sticky держит секцию на месте пока скроллишь, но при этом элемент остаётся в потоке документа. Footer просто идет следом и физически наезжает сверху.::before и ::after:footer::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
transparent 10%,
rgba(0,0,0,0.8) 40%,
#000
);
z-index: -2;
}::before — градиент от прозрачного к черному. Создает ощущение что карточка «уходит» под темную поверхность.footer::after {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(40px);
mask-image: linear-gradient(
rgba(0,0,0,0),
rgba(0,0,0,0.8) 20%,
black 30%
);
z-index: -1;
}::after — backdrop-filter: blur() размывает все что находится позади футера. Но блюр применяется не сразу — mask-image делает его постепенным, от прозрачного сверху к полному снизу. Это и создает плавный переход.z-index: -2 и -1 работают относительно футера, у которого position: relative — так псевдоэлементы уходят за контент, но остаются поверх карточки.
Интересный вариант CSS-аккордеона
Давайте разберем еще один способ необычной стилизации аккордеона на <details>.
HTML:
<details name="accordion" open style="--bg:#620808; --color:#f4ce74;">
<summary>
<span>Location</span>
<svg class="arrow" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"/>
</svg>
</summary>
<p>Контент...</p>
</details>
<details> — контейнер аккордеона.<summary> — всегда видимый заголовок, по клику открывает/закрывает блок.name="accordion" — заставляет работать группу как настоящий аккордеон (открывается только один).open — по умолчанию блок развёрнут.--bg:#620808; --color:#f4ce74; - стилизация через CSS-переменные.summary {
display: flex;
align-items: center;
list-style: none;
background: var(--bg);
color: var(--color);
}
.arrow { transition: 0.2s; }
details[open] .arrow { transform: rotate(180deg); }
p { background: var(--bg); color: var(--color); }display: flex + align-items: center — иконка, текст и стрелка выстраиваются в ряд и выравниваются по вертикали.list-style: none — убирает стандартный треугольник браузера у <summary>.background: var(--bg) и color: var(--color) — берут цвета из переменных, которые мы задали прямо в style на каждом <details>. Одно правило работает для всех пунктов сразу.details[open] .arrow — селектор срабатывает когда блок раскрыт. Браузер автоматически добавляет атрибут open на <details> при клике и убирает при закрытии. Мы просто вешаем на него стиль. transition: 0.2s на .arrow делает поворот плавным.
Gooey-эффект для бургер-меню на CSS+SVG
Анимация кнопки меню — это мелочь, которая сразу бросается в глаза. Сегодня разберем, как сделать эффект "слипания" элементов без canvas и без JS-библиотек.
HTML:
<div class="burger" id="burger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<filter id="g">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="g" />
<feComposite in="SourceGraphic" in2="g" operator="atop" />
</filter>
feGaussianBlur — размывает элементы.feColorMatrix — усиливает контраст (делает "слипание").feComposite — накладывает результат обратно..burger.active .bar:nth-child(1) {
transform: rotate(-45deg) translate(-50px, 50px);
}
.burger.active .bar:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .bar:nth-child(3) {
transform: rotate(-45deg) translate(50px, -50px);
}.bar:nth-child(2),
.bar:nth-child(3) {
transition-delay: 100ms;
}
const burger = document.getElementById('burger');
burger.onclick = () => burger.classList.toggle('active');
Эффект темной сетки с виньеткой на чистом CSS
Видели такой фон на современных лендингах и SaaS-продуктах? Тёмный фон, тонкая сетка, виньетка по краям. Давайте разберем, как это можно реализовать.
HTML:
<div class="vignette"></div>
<div class="grid-content">
<h2>Grid Template</h2>
<p>Ваш текст здесь...</p>
</div>
background-image:body {
background-image:
linear-gradient(var(--grid) var(--line), transparent var(--line)),
linear-gradient(90deg, var(--grid) var(--line), transparent var(--line));
background-size: var(--size) var(--size);
}background-size задаёт размер ячейки..vignette {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}div поверх фона. fixed + inset: 0 — растягивается на весь экран и не влияет на высоту страницы. pointer-events: none — клики проходят насквозь. Радиальный градиент затемняет края, центр остаётся чистым.:root::root {
--bg: #0a0a0a;
--grid: rgba(255, 255, 255, 0.08);
--size: 40px;
--line: 1px;
}
Масштабное обновление — CodePen 2.0
Популярная «песочница» выкатила масштабное обновление (пока в бете), которое превращает сервис из блокнота в полноценную IDE.
Что изменилось?
■ Файловая система: теперь можно создавать папки, кучу файлов и импортировать их друг в друга. Любой пен — это теперь мини-проект.
■ Система блоков: больше не нужно копаться в настройках, чтобы включить Sass или Tailwind. Просто добавляешь нужный «блок» в проект. Можно комбинировать несколько препроцессоров сразу.
■ Мульти-таскинг: вкладки можно группировать, перетаскивать и открывать несколько редакторов одновременно. Удобно, если верстаешь и правишь JS в разных углах экрана.
■ Движок: редактор стал быстрее, доступнее и обзавелся кучей новых шрифтов и тем.
Если еще не пробовали, попробуйте - https://codepen.io/beta
Анимированное волнистое подчёркивание ссылок на CSS
Нашел еще один интересный трюк - при наведении на ссылку обычная линия превращается в живую волну. Это, конечно, используется нечасто) но все равно, давайте разберем, как это работает.
HTML:
<p>Lorem <a href="#">ipsum dolor</a> sit amet.</p>
a {
background: linear-gradient(to bottom, #ff9800 0%, #ff9800 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 3px 3px;
color: #000;
text-decoration: none;
}
a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 6px;
background-repeat: repeat-x;
}background — тонкая полоска снизу вместо стандартного text-decoration. При hover меняем оранжевую заливку на анимированный SVG-рисунок волнистой линии.<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'>
<style>
.squiggle {
animation: shift .3s linear infinite;
}
@keyframes shift {
from { transform: translateX(0); }
to { transform: translateX(-20px); }
}
</style>
<path fill='none' stroke='#ff9800' stroke-width='2' class='squiggle'
d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3' />
</svg>
<path> с кривыми Безье и CSS-анимация, которая сдвигает волну влево ровно на 20px. В момент, когда одна копия уходит влево, следующая уже стоит на её месте. Стык невидим, потому что волна симметрична — и получается бесшовный бесконечный поток.
Самая полная открытая библиотека
Если вы любите читать или просто иногда ищете книги для обучения и т.п., то у меня для вас есть отличная находка — Anna's Archive.
Это «теневая» библиотека, цель которой — сделать знания доступными для всех. На данный момент там более 63 млн книг.
Там есть все:
■ художественная литература
■ научные работы
■ учебники
■ редкие и давно изданные книги
По сути, это поисковик по миллионам книг в разных форматах: PDF, EPUB, MOBI и других, подходящих для читалок и планшетов.
Если не знали про это раньше (как я), то теперь знайте)
Зеркала:
https://annas-archive.li/
https://annas-archive.gl/
Анимированная градиентная рамка на CSS
Сегодня разберем красивый и модный визуальный эффект — анимированную градиентную рамку, которая красиво переливается.
HTML:
<div class="rainbow"></div>
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;
}top: -50%; left: -50%;, мы центрируем его относительно нашего .rainbow, а animation заставляет этот слой бесконечно вращаться..rainbow::after {
content: "";
position: absolute;
inset: 10px;
background: white;
border-radius: 8px;
}@keyframes rotate {
to {
transform: rotate(360deg);
}
}
::before на 360 градусов.
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 нужен, чтобы абсолютно позиционировать картинку и контент внутри карточки..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, чтобы она могла выходить за границы карточки..content {
position: absolute;
top: 252px;
overflow: hidden;
transition: 0.5s;
}
.card:hover .content {
top: 130px;
height: 250px;
}overflow: hidden. При наведении поднимается вверх и раскрывается на полную высоту.top и scale при наведении и плавный transition: 0.5s для анимации.
Flip-карточка на чистом CSS
Давайте сегодня разберём, как создать интерактивную flip-карточку, с переворотом по клику без JS.
HTML:
<label class="flip-card">
<input type="checkbox" class="flip-checkbox">
<div class="flip-inner">
<div class="card front">
Hello
</div>
<div class="card back">
Привет
</div>
</div>
</label>
label, чтобы при клике в любое место карточки checkbox менял своё состояние. checkbox скрываем:.flip-checkbox {
display: none;
}.flip-card {
perspective: 1000px;
}perspective создаёт глубину для 3D-преобразований..flip-inner {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-checkbox:checked + .flip-inner {
transform: rotateY(180deg);
}checkbox (через label) контейнер поворачивается на 180 градусов по оси Y..card {
position: absolute;
backface-visibility: hidden;
}
.card.back {
transform: rotateY(180deg);
}backface-visibility: hidden скрывает обратную сторону элемента. Задняя сторона изначально развёрнута на 180 градусов.
Библиотека иконок на чистом 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;
}<i class="gg-search"></i>
Современный способ задавать цвета с прозрачностью в CSS
Раньше для прозрачности приходилось использовать rgba(), добавляя альфа-канал:
/* зеленый с 50 % прозрачности */
.green-50 {
color: rgba(0, 128, 0, 0.5);
}
rgb() давно умеет работать с альфа-каналом:/* зеленый с 50 % прозрачности */
.green-50 {
color: rgb(0, 128, 0, 0.5);
}
.green-50 {
color: rgb(0 128 0 / 0.5);
/* или */
color: rgb(0 128 0 / 50%);
}:root {
--primary: 0 128 0;
}
.green-50 {
color: rgb(var(--primary) / 50%);
}
.green-30 {
color: rgb(var(--primary) / 30%);
}#008000, то прозрачность можно добавить так:.rgb-green-50 {
color: rgb(from #008000 r g b / 0.5);
}
Глитч-эффект для изображения
Мы уже разбирали, как сделать простой глитч-эффект для текста, давайте теперь рассмотрим, как сделать это для изображения.
HTML:
<div class="container">
<div class="glitch-image"></div>
</div>
.glitch-image {
position: relative;
width: 100%;
height: 100%;
background: url('...') no-repeat center / cover;
filter: brightness(1.2);
}.glitch-image::before,
.glitch-image::after {
content: '';
background: inherit; /* копируем ту же картинку */
position: absolute;
inset: 0; /* растягиваем на весь блок */
}
.glitch-image::after {
animation: glitch-clip 1s infinite;
}
@keyframes glitch-clip {
12% {
left: -5px; /* сдвинули влево */
clip-path: inset(32% 0 41% 0); /* обрезали сверху/снизу */
}
17% {
left: 0; /* вернули обратно */
clip-path: none; /* убрали обрезку */
}
/* ... и так далее */
}.glitch-image::before {
animation: glitch-hue 1s infinite;
}
@keyframes glitch-hue {
13% {
filter: hue-rotate(280deg); /* красный → синий */
}
18% {
filter: none; /* обратно */
}
/* ... и так далее */
}::before и ::after, двигаем клоны и меняем им цвета)
Анимация «шторка» для форм логина и регистрации
Иногда обычные формы логина выглядят слишком скучно.
Поэтому сегодня разберем эффект, где между формой входа и регистрации плавно ездит цветная «шторка».
HTML:
<div class="card">
<input type="checkbox" id="tog" class="toggle">
<div class="curtain"></div>
<div class="hero panel signup">...</div>
<div class="hero panel signin">...</div>
<div class="form panel signup">...</div>
<div class="form panel signin">...</div>
</div>
.toggle:checked ~ .hero.signup {
opacity: 0;
visibility: hidden;
transform: translateX(-25%);
}
.toggle:checked ~ .form.signin {
opacity: 1;
visibility: visible;
transform: translateX(0);
}.toggle отмечен :checked, мы «выключаем» одну панель и «включаем» другую..curtain {
position: absolute;
z-index: 2;
width: 50%;
background: #8960e2;
transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.toggle:checked ~ .curtain {
transform: translateX(100%);
}.curtain — это просто большой фиолетовый блок, закрывающий половину карточки. Когда чекбокс активен — шторка уезжает вправо..form.signup { left: 50%; }
.form.signin { left: 0; opacity: 0; visibility: hidden; }.form — контейнер с полями, каждый занимает свою половину.transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
transition синхронизированы. Шторка и формы двигаются с одной кривой и за одно время. Создаётся ощущение, что шторка физически «открывает» вторую форму.
Стилизация границы карточки
Сегодня разберем небольшой, но очень интересный прием — карточку с «стеклянным» эффектом.
HTML:
<div class="card">
<div>
<h2>Card</h2>
<h3>Lorem ipsum</h3>
</div>
<div>
<a href="#" id="link1">Button 1</a>
<a href="#" id="link2">Button 2</a>
</div>
</div>
.card, верхний — заголовок, нижний — кнопки..card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 20rem;
width: 20rem;
position: relative;
}.card > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 2rem;
width: 100%;
}.card::before {
content: "";
background-color: rgba(255, 255, 255, 0.01);
position: absolute;
height: 100%;
width: 100%;
backdrop-filter: blur(50px);
clip-path: polygon(
evenodd,
0 0,
100% 0,
100% 100%,
0 100%,
0 0,
0.3rem 0.3rem,
calc(100% - 0.3rem) 0.3rem,
calc(100% - 0.3rem) calc(100% - 0.3rem),
0.3rem calc(100% - 0.3rem),
0.3rem 0.3rem
);
}backdrop-filter: blur() — размывает все, что находится за элементом.clip-path создаём две фигуры:evenodd вырезает середину → получаем «рамку»
Эффект "стопки бумаги" на CSS
Иногда нужно оформить блок как будто это несколько листов, лежащих друг на друге, например, карточка статьи, заметка и т.п. Давайте разберем один из способов реализации.
HTML:
<div class="card">
<p>Текст...</p>
<p>Текст...</p>
</div>
.card {
width: 100%;
max-width: 600px;
padding: clamp(1.5rem, 5vw, 4rem);
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-radius: 8px;
position: relative;
}padding: clamp(1.5rem, 5vw, 4rem); — адаптивные отступыposition: relative — база для псевдоэлементовbackground, border-radius, box-shadow — задаём один раз, а псевдоэлементы заберут их через inherit.card::before, .card::after {
content: '';
position: absolute;
inset: 0;
background: inherit;
box-shadow: inherit;
border-radius: inherit;
z-index: -1;
}.card::before {
transform: rotate(1.5deg) translateY(4px);
}
.card::after {
transform: rotate(-1.5deg) translateY(-4px);
}rotate + translateY на каждом псевдоэлементе в разные стороны создают ощущение что листы лежат вразброс.
Эффект стопки карточек на чистом CSS
Видели такой эффект, когда секции страницы ведут себя, как стопка физических карточек, которые накладываются друг на друга при скролле? Давайте разберем, как это можно сделать.
HTML:
<section>
<h2>Section title</h2>
<p>Lorem Ipsum is simply dummy text of the printing...</p>
</section>
<!-- у нас будет 5 таких карточек -->
section {
--i: 0;
width: min(100% - 2rem, 32em);
margin-inline: auto;
padding: 2em;
min-height: 100vh;
position: sticky;
bottom: 0;
translate: calc((2 - var(--i)) * 1em) 0;
z-index: calc(10 - var(--i));
scroll-snap-align: start;
}position: sticky + bottom: 0 — фиксирует элемент относительно нижней границы контейнера. При скролле вверх секция «прилипает» к низу вьюпорта, создавая эффект накопления.min-height: 100vh — каждая секция занимает всю высоту экрана.translate: calc((2 - var(--i)) * 1em) 0 — создаёт горизонтальный разброс карточек — веером от правой к левой. --i — кастомное свойство, меняется для каждой секции.z-index: calc(10 - var(--i)) — управляет порядком наложения. У первой секции индекс выше, у последней — ниже. Благодаря этому верхняя карточка всегда поверх.--i:section:nth-child(1) { --i: 0; background: #FFCDD2; }
section:nth-child(2) { --i: 1; background: #F8BBD0; }
section:nth-child(3) { --i: 2; background: #E1BEE7; }
section:nth-child(4) { --i: 3; background: #D1C4E9; }
section:nth-child(5) { --i: 4; background: #C5CAE9; }z-index.
Раскрываем блок по чекбоксу
Иногда бывает нужно показать дополнительные поля в форме, если юзер поставит галочку в чекбоксе. Рассмотрим, как это можно сделать на чистом CSS.
HTML:
<div class="card">
<div class="card__header">
<input type="checkbox" id="open">
<label for="open" class="card__title">Toggle content</label>
</div>
<div class="content">
<div class="content__inner">
<!-- доп. поля -->
</div>
</div>
</div>
.card__header, а скрываемый блок .content идет следом..content {
display: grid;
grid-template-rows: 0fr; /* Начальное состояние — высота 0 */
transition: grid-template-rows .35s ease;
}
.content__inner {
overflow: hidden; /* Прячем текст при 0fr */
}grid-template-rows: 0fr, грид сжимает строку до нулевой высоты. Благодаря overflow: hidden контент становится невидимым. Плюс grid-template-rows можно анимировать..card__header:has(input:checked) ~ .content {
grid-template-rows: 1fr;
}.card__header:has(input:checked) — мы ищем заголовок, внутри которого есть отмеченный чекбокс.~ .content — если такой заголовок найден, применяем стили к соседнему блоку .content, который идет после него.grid-template-rows: 1fr — меняем высоту трека на 1fr (весь доступный контент). Grid плавно анимирует это изменение.
Анимированные карточки на CSS
Давайте сегодня разберём небольшой, но красивый эффект для карточки, когда она при наведении заливается цветом изнутри.
HTML:
<article class="card" style="--clr:#89ec5b">
<i class="card__icon fa-solid fa-paintbrush"></i>
<h3>Designing</h3>
<p>Lorem Ipsum is simply dummy text of the printing industry.</p>
<a href="#">Read More</a>
</article>
style="--clr:#89ec5b" - переменная, которая определяет основной цвет карточки..card__icon {
box-shadow:
0 0 0 4px var(--bg),
0 0 0 6px var(--clr);
}box-shadow без blur создают эффект двойной рамки вокруг иконки: сначала зазор цвета фона, потом обводка цветом карточки..card:hover .card__icon {
box-shadow:
0 0 0 4px var(--bg),
0 0 0 300px var(--clr);
}.card a {
background: var(--clr);
border: 2px solid var(--clr);
color: #2e2e2e;
}
.card:hover a {
background: var(--bg);
border-color: var(--bg);
color: var(--clr);
}hover — залитая кнопка цветом карточки. После — инвертируется: фон тёмный, текст цветной. border-color тоже меняется на тёмный, иначе граница сольётся с цветным фоном карточки.--clr для цвета.box-shadow с большим радиусом как «заливка».overflow: hidden чтобы тень не вылезала.
Интересный фон с линейным градиентом
Давайте разберем, как с помощью простого CSS-градиента сделать красивый фон для блока.
HTML:
<header class="intro">
<div class="intro-body">
<h1>Формошлёп</h1>
<p>Шлёпаем формы и красим кнопки...</p>
</div>
</header>
.intro {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}background: linear-gradient(
45deg,
#ffcc5c 20%,
#3c3c3c 20% 50%,
#ff6f69 50% 80%,
#96ceb4 80%
);
#ffcc5c 20% — желтый от 0% до 20%#3c3c3c 20% 50% — темно-серый от 20% до 50%#ff6f69 50% 80% — розовый от 50% до 80%#96ceb4 80% — зеленый от 80% до 100%
Группировка выбранных элементов
Сегодня разберем, как можно визуально группировать выбранные элементы. Если отметить несколько пунктов подряд, они "склеятся" в единый блок, потеряв скругления между собой.
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 идёт ещё один выбранный - убираем нижние скругления.
Выбор диапазона элементов в списке
Иногда нужно выделить конкретный диапазон элементов — например, с 7 по 14. Без классов, без JS, только на CSS. Давайте разберем, как это можно сделать.
HTML:
<ol>
<li>Элемент списка</li>
...
<li>Элемент списка</li>
</ol>
.ol li:nth-child(n + 7):nth-child(-n + 14) {
background: lightpink;
}:nth-child(n + 7) - выбирает все элементы, начиная с 7-го и до конца списка (7, 8, 9, 10... 20).:nth-child(-n + 14) - выбирает все элементы от начала списка до 14-го включительно (1, 2, 3... 14).:nth-child(n + START) — выбирает от START до конца.:nth-child(-n + END) — выбирает от начала до END.
Интерактивная карта с 500 000+ телеграм-каналов
На днях товарищ скинул интересную карту телеграм-каналов, которую создали ребята из TGPages.
Я конечно, сразу пошел проверять,есть там наш "Формошлёп" или нет)
Все в порядке, канал на месте. Правда, его почему-то отнесли к тематике «Дизайн и креатив», странновато, конечно, но мб из-за того, что в описании указано, что мы здесь "шлёпаем формы и красим кнопки") Ну да ладно.
В общем, карта интересная и залипательная, выполнена в виде звездного неба, со своими галактиками и созвездиями, разбитыми по тематикам. Каждая звезда — отдельный канал с описанием и т.п.
Если интересно посмотреть на масштабы телеграм-каналов и найти что-нибудь новое — вот ссылка: https://tgpages.com/atlas/map/
Интерактивная галерея без JS
Давайте сегодня разберем, как создать интерактивную галерею изображений с эффектом раскрытия по клику на чистом CSS.
HTML:
<input type="radio" name="slider" id="c1" checked>
<label class="card" for="c1"></label>
name="slider" объединяет их в группу, позволяя выбрать только один элемент.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..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;
}fade-left — будут уходить влево.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;
}@keyframes fade-left {
from {
scale: 1;
translate: 0%;
opacity: 1;
}
to {
scale: 0.8;
translate: -30%;
opacity: 0;
}
}
fade-right, только translate: 30%;
Градиентный разделитель между секциями
При создании лендингов, часто нужно как-то красиво отделить один блок (секцию) от другого. Давайте сегодня разберем, как сделать плавный переход с полосами затухающих цветов.
HTML:
<section class="section-red">
<!-- Контент первой секции -->
</section>
<!-- Разделитель -->
<div class="section-divider"></div>
<section class="section-white">
<!-- Контент второй секции -->
</section>
div для разделителя..section-divider {
position: relative;
height: 54px; /* Высота градиентной зоны */
overflow: hidden;
}.section-divider::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
#f87171 0px, /* светло-красная полоса */
#f87171 18px,
#fecaca 18px, /* ещё светлее */
#fecaca 36px,
#fef2f2 36px, /* почти белая */
#fef2f2 54px
);
}linear-gradient создаёт градиент сверху вниз.inset: 0 — псевдоэлемент растягивается на весь родитель.
Генератор blob-фигур
Наверняка вы видели такие абстрактные фигуры с плавными формами — так называемые "блобы". Если вам нужно быстро создать такую фигуру для добавления в какой-нибудь блок страницы, советую Blobmaker.
Интерфейс максимально простой — два основных параметра:
■ Complexity (сложность) — определяет количество опорных точек, из которых строится форма.
■ Contrast (контраст) — задает разницу между точками, влияя на «дикость» формы.
Нажимаете на кнопку с кубиком 🎲, пока не найдете нужную форму, и скачиваете её, как SVG или копируете код прямо в буфер обмена.
Еще один годный сервис в нашу копилку)
Выезжающее fullscreen-модальное окно на Popover
Давайте сегодня разберем, как с помощью Popover API создать модальное окно, которое плавно выезжает и закрывается по клику на кнопку или по клавише Esc.
HTML:
<div class="panel--home">
<button class="btn" popovertarget="slice">Открыть</button>
</div>
<div id="slice" class="panel--slice" popover>
<button class="btn btn--light" popovertarget="slice" popovertargetaction="hide">
Закрыть
</button>
</div>
popover атрибут превращает div в popover-элемент.popovertarget="slice" связывает кнопку с popover'ом.popovertargetaction="hide" указывает, что кнопка закрывает popover..panel--slice {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
}.panel--slice {
transform: translateY(-100%); /* начальное положение за экраном */
transition: transform 800ms ease;
}
.panel--slice:popover-open {
transform: translateY(0); /* конечное положение */
}