Креативный дизайн с CSS
Углы, которые привлекают внимание.
CSS corner-shape: революция в оформлении углов элементов
На первый взгляд, некоторые элементы дизайна кажутся обычными, но их магия раскрывается при взаимодействии с ними. Представьте карточку, форма углов которой динамически изменяется при наведении курсора.
Это достигается не хитрыми трюками с SVG или масками, а новым свойством CSS corner-shape. Его ключевое преимущество — несколько новых значений, открывающих простор для творчества, будь то стильная бирка или необычная карточка продукта.
Ниже представлены два интерактивных примера, с помощью которых вы сможете легко понять как работать со свойством CSS corner-shape и начать применять его в своей работе уже сегодня! Просто перемещайте ползунки слайдеров или выбирайте тип формы угла и убедитесь что перед вами открываются неограниченные возможности в оформлении углов элементов.
border-radius: {{borRad}}px;
corner-shape: {{selected}};
border-radius: {{borRad}}px;
corner-shape: superellipse( {{superellipse}});
Основы работы свойства corner-shape
Традиционно для скругления углов используется border-radius. Однако corner-shape позволяет радикально изменять форму каждого угла независимо. Доступны семь основных значений:
round(круглый, по умолчанию)bevel(скос)notch(выемка)scoop(вогнутый)square(квадрат)squircle(скругленный квадрат)superellipse()
.element {
border-radius: 30px;
corner-shape: scoop;
}Размер фигуры по-прежнему контролируется border-radius: чем больше радиус, тем выраженнее эффект.
Ниже визуально представлены все варианты corner-shape.
See the Pen CSS | corner-shape by inteltone (@inteltone) on CodePen.
Комбинирование форм и создание сложных элементов
Мощь corner-shape раскрывается в возможности задавать уникальную форму для каждого угла элемента. Это можно сделать двумя способами: через отдельные свойства (например, corner-top-left-shape) или перечислив четыре значения в одном.
Давайте создадим стильную бирку «Распродажа» с заостренным правым краем.
-50%
<div class="sale-tag">-50%</div>.sale-tag {
background-color: #e74c3c;
color: white;
padding: 20px 60px 20px 40px;
display: inline-block;
font-size: 32px;
font-weight: bold;
/* Разный border-radius и corner-shape для каждого угла */
border-radius: 20px 50px 50px 20px;
corner-shape: round bevel bevel round;
}Интерактивный пример: карточка с «отзывчивым» углом
Рассмотрим более сложный и динамичный пример — карточку в соцсети, угол которой интерактивно меняется при наведении на нее курсора мыши.
<article class="social-card">
<h3>Креативный дизайн с CSS</h3>
<p>Углы, которые привлекают внимание.</p>
</article>.social-card {
background: #f8f9fa;
padding: 30px;
border-radius: 20px;
corner-shape: round;
transition: all 0.3s ease;
position: relative; /* Для позиционирования псевдоэлемента */
}
.social-card:hover {
/* Меняем форму верхнего правого угла на "совок" и увеличиваем радиус */
border-top-right-radius: 45px;
corner-top-right-shape: scoop;
}
/* Создаем элемент "реакции" (например, лайк) в углу */
.social-card::before {
content: '👍';
position: absolute;
top: -15px;
right: -15px;
scale: 0;
transition: scale 0.3s ease;
background: white;
border-radius: 50%;
padding: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.social-card:hover::before {
scale: 1; /* Показываем реакцию при наведении */
}Представленный выше код создаёт плавную и запоминающуюся анимацию: карточка меняет свою геометрию, чтобы «проявить» скрытую реакцию, что делает взаимодействие с ней живым и приятным. Это похоже на маленький сюрприз для пользователя.
Точный контроль с superellipse()
Для максимально точного контроля над формой углов используется функция superellipse(). Она принимает параметр n, определяющий форму: от прямоугольника (значения меньше 0) через классический суперэллипс (1) к форме, напоминающей scoop (значения больше 1).
.element {
border-radius: 40px;
corner-shape: superellipse(1.8); /* Уникальная плавная форма */
}Более наглядно, в интерактивном режиме, посмотреть как работает superellipse() можно выше на странице.
Поддержка браузерами CSS corner-shape
На момент написания этой статьи corner-shape поддерживается в Chrome и Edge. Это прогрессивное улучшение: браузеры, которые не поддерживают свойство, просто отобразят стандартные закругленные или прямые углы, заданные border-radius. Таким образом, ваш дизайн не пострадает, а в современных браузерах будет выглядеть еще интереснее.
CSS Corner Shape — это шаг в будущее веб-дизайна
Свойство corner-shape — это не просто очередное косметическое обновление CSS. Это инструмент, который добавляет дизайну глубины, интерактивности и уникальности, выводя привычные UI-компоненты на новый уровень. Оно позволяет создавать запоминающиеся интерфейсы с минимальными усилиями, отходя от скучных прямоугольных форм.
Хотите, чтобы ваш сайт выделялся на фоне конкурентов? Современный веб-дизайн требует не только эстетики, но и технологической смелости. Наша веб-студия специализируется на внедрении инноваций, таких как corner-shape и многих других, создавая быстрые, безопасные и визуально впечатляющие сайты. Давайте вместе воплотим ваши самые креативные идеи в жизнь — от уникальной анимации углов до комплексного digital-продукта, который будет радовать ваших клиентов и повышать конверсию.
Готовы сделать ваш сайт технологичным и запоминающимся? Оставьте заявку на нашем сайте, и наши эксперты предложат решение, которое идеально подойдет для вашего бизнеса. Мы не просто создаем сайты, а современные цифровые инструменты для вашего успеха.