Code Ready | Frontend
Градиентная рамка для карточки!
Иногда нужно визуально выделить карточку или кнопку, но обычный border выглядит слишком просто. В этом приёме рамка создаётся отдельным слоем с градиентом.
Как работает:
• псевдоэлемент ::before создаёт слой градиентной рамки;
• inset расширяет его за пределы блока, формируя контур;
• border-radius: inherit сохраняет форму карточки;
• при наведении меняется яркость и масштаб рамки.
Это простой способ добавить акцент и глубину интерфейсным элементам без дополнительных обёрток и изображений.
Code Ready | #фишка Если у вас установлено приложение,
вы можете сразу перейти в канал