CSS предоставляет разработчикам удобные инструменты для создания разнообразных геометрических фигур без использования графических редакторов. Это позволяет экономить время веб-дизайнера и ускоряет работу сайта за счет уменьшения количества графических файлов.
Базовые фигуры
Начнем с простых фигур, таких как квадраты, прямоугольники и круги. Для их создания достаточно задать нужные размеры блока и свойство border-radius.
Квадраты и прямоугольники
Чтобы нарисовать прямоугольник, достаточно создать блок с заданными свойствами width и height. Например:
.rectangle { width: 300px; height: 150px; } Если значения width и height одинаковые, то получится квадрат. Также можно добавить рамку и заливку фигуры.
Круги и овалы
Для создания окружности задайте свойство border-radius: 50% для квадрата или прямоугольника. Например:
.circle { width: 100px; height: 100px; border-radius: 50%; } А вот для овала ширина и высота блока должны отличаться. Также можно создавать дуги, указывая разные радиусы для углов.
Треугольники
Треугольники часто используются для стрелок меню или кнопок. Создаются они установкой нулевой высоты блока и ширины границы:
.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } Меняя цвета границ, можно создать треугольники разной направленности. Также есть варианты со стрелками и без.
Звезды и многоугольники
Более сложные многоугольные фигуры требуют использования псевдоэлементов и трансформаций. Рассмотрим на примере звезды.
Создаем базовый блок со скругленными углами:
.star { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid red; border-left: 50px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } А затем добавляем лучи при помощи псевдоэлементов:
.star:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } .star:after { // аналогичный код для второго луча } Подобным образом можно создавать различные многоугольники, такие как пятиугольники и шестиугольники.
Сложные фигуры
Используя CSS-трансформации, animation и другие техники, можно создавать по-настоящему сложные фигуры вроде сердец, пузырей для диалога и даже пасхальных яиц!
Сердца
Вот пример кода для сердечка:
.heart { position: relative; width: 100px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } Меняя углы поворота и радиусы, можно создавать различные варианты сердец.
Пузыри для диалога
Для имитации диалогов в комиксах или мессенджерах используются пузыри с треугольным выступом. Вот пример их реализации на CSS:
.bubble { position: relative; background: #def; border-radius: 10px; padding: 10px; } .bubble:after { content: ""; position: absolute; left: 50%; bottom: -20px; width: 0; height: 0; border: 20px solid transparent; border-top-color: #def; border-bottom: 0; margin-left: -20px; } Здесь основной прямоугольный блок задает фон пузыря, а псевдоэлемент с треугольной границей создает выступ. По аналогии можно сделать пузыри других форм.
Пасхальные яйца
А вот еще забавный пример пасхального яйца, сделанного при помощи градиента и трансформации скругленного прямоугольника:
.egg { display: block; width: 126px; height: 180px; background: linear-gradient(to right, #F8B232 0%, #F8B232 20%, #FCD462 20%, #FCD462 40%, #F8B232 40%, #F8B232 60%, #FCD462 60%, #FCD462 80%, #F8B232 80%, #F8B232 100%); -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; -moz-transform: rotate(-15deg) translate(-10px,0px); -ms-transform: rotate(-15deg) translate(-10px,0px); -webkit-transform: rotate(-15deg) translate(-10px,0px); -o-transform: rotate(-15deg) translate(-10px,0px); transform: rotate(-15deg) translate(-10px,0px); } Как видите, возможности CSS позволяют воплотить в жизнь самые смелые идеи!
css фигуры
Анимация фигур
Статичные геометрические фигуры на CSS выглядят красиво, но еще более эффектно смотрится их анимация. Рассмотрим несколько примеров оживления фигур с помощью CSS-анимаций.
Движущиеся стрелки
Уже упомянутые выше треугольные стрелки легко анимировать. Добавим им, например, покачивание влево-вправо:
@keyframes swing { 0% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-10deg);} 100% {transform: rotate(0deg);} } .triangle { animation: swing 1s infinite ease-in-out; } Задав ключевые кадры анимации и привязав ее к элементу, мы заставили стрелку раскачиваться как маятник. Такой эффект часто используют в меню и на кнопках для привлечения внимания.
Мерцающая гирлянда
Новогоднюю мигающую гирлянду тоже можно легко реализовать средствами CSS. Вот пример кода для звездочки:
.star { animation: blink 2s infinite; } @keyframes blink { 50% { opacity: 0; } } Здесь анимация просто меняет прозрачность элемента от 1 до 0 и обратно, создавая эффект мерцания. Добавив несколько звезд с разной задержкой анимации, получим полноценную гирлянду.
Другие анимации фигур
Кроме движения и мерцания, фигуры можно заставлять вращаться, изменять цвет, размер и форму. К примеру, круг может превращаться в квадрат или звезду. Возможности CSS позволяют воплотить практически любые идеи анимации.
Применение фигур в веб-дизайне
Помимо простого украшения страниц, геометрические фигуры на CSS можно активно использовать в веб-дизайне, например:
- В оформлении меню и кнопок
- Для создания фоновых узоров
- В баннерах и логотипах
- В элементах навигации
- Для выделения блоков контента
Меню и кнопки
Фигуры часто добавляют элементам интерфейса дополнительную выразительность. К примеру, кнопки могут иметь необычную форму ромба или звезды. А пункты меню - дополняться маленькими треугольными стрелочками-указателями.
Фоновые узоры
Разместив фигуры в фоновом рисунке, можно создать интересные текстуры для страниц сайта. Это могут быть повторяющиеся геометрические орнаменты, имитирующие обои или ткань. Такие фоны выглядят стильно и современно.
Оформление баннеров
Яркая подборка геометрических фигур отлично подойдет для баннеров, тизеров и других рекламных форматов. С их помощью можно привлекать внимание, выделяться, запоминаться. Не зря фигуры часто используются в логотипах.
Креатив с CSS-фигурами
В заключение давайте разбудим фантазию и посмотрим несколько креативных примеров использования геометрических фигур в веб-дизайне. Это может стать отличным источником вдохновения для ваших проектов!
