Довольно часто при верстке веб-проекта есть потребность в создании круглых элементов: круглые кнопки, круглые миниатюры, круглые иконки, или даже целые круглые контейнеры. В некоторых случаях выйти из ситуации можно с помощью простых картинок, а иногда такой подход не помогает. Как же решить проблему, и только с помощью CSS стилей? В сегодняшнем уроке мы рассмотрим 5 основных способов, с помощью которых вы сможете создавать на своих сайтах любые круглые элементы.
Существует несколько методов создания круглых форм в HTML с помощью CSS стилей, каждый из которых имеет как свои плюсы, так и минусы. Давайте же рассмотрим самые популярные решения, которые позволят вам сделать круги в CSS.
Самая распространенная техника для создания кругов – это скругление всех углов на 50%. Это самый простой способ, и он отлично поддерживается браузерами. Свойство border-radius
также можно применять к границам и теням.
Практический пример:
<div class="circle-block"></div> <style> .circle-block { background: #ffef68; border: 5px solid #3766ef; border-radius: 50%; height: 250px; width: 250px; } </style>
Если вы хотите получить не круг, а прямоугольник со скругленными краями, тогда установите для свойства border-radius
значение менее 50%.
SVG может включать элемент <circle>
, которому можно добавить стили, аналогично любому другому пути (path
) масштабируемой векторной графики. Этот элемент имеет хорошую поддержку браузерами и эффективен для создания анимации, но для него нужно добавлять чуть больше разметки, чем для других методов. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус окружности (атрибут r
), меньше, чем значение viewBox
в SVG.
Практический пример:
<svg viewBox="0 0 250 250" width="250" height="250"> <circle class="circle-block" cx="125" cy="125" r="120"/> </svg> <style> .circle-block { fill: #ffef68; stroke: #3766ef; stroke-width: 10px; } </style>
Свойство Путь обрезки (clip-path
) появилось в CSS совсем недавно. Поддержка браузерами приличная, но не повсеместная. Свойство clip-path
не влияет на макет элемента, что означает, что оно не будет влиять на границы, но будет скрывать внешние тени. Это может быть и хорошим решением, или плохим, в зависимости от того, какую цель вы преследуете.
Практический пример:
<div class="circle-block"></div> <style> .circle-block { background: #ffef68; clip-path: circle(50%); height: 250px; width: 250px; } </style>
Вы можете использовать фоновое изображение и радиальный градиент, чтобы визуально заполнить элемент кругом. Это не очень эффективный метод, поскольку края круга могут казаться неровными или размытыми в зависимости от браузера.
Практический пример:
<div class="circle-block"></div> <style> .circle-block { background-image: radial-gradient(circle, #ffef68, #ffef68 70%, transparent 60%); height: 250px; width: 250px; } </style>
Вы можете обрезать элемент <img>
по размерам круга, используя свойство border-radius
.
Практический пример:
<div class="circle-block"><img src="https://picsum.photos/id/15/1920/1080" /></div> <style> .circle-block img { border-radius: 50%; object-fit: cover; height: 250px; width: 250px; } </style>
Этот метод имеет некоторые ограничения:
object-fit: cover
, которое предотвращает искажение неквадратных изображений, не поддерживается в IE11
Ниже вы можете увидеть демо всех рассмотренных сегодня практических решений как сделать круги в CSS.
Вот и все на сегодня! Из сегодняшней практической статьи вы узнали, как с помощью разных способов можно сделать круги в CSS. Спасибо, что читаете нас!
Грехи других судить вы так усердно рветесь, начните со своих и до чужих не доберетесь… Read More
Люди, между которыми есть любовь и взаимопонимание, скрепляют отношения и зарождают новый союз, а дату… Read More
Для качественного SEO (поисковой оптимизации, раскрутки сайта) одним из важных показателей является Авторитет домена (Domain… Read More
Выяснение того, как вывести свои деньги с PayPal, является одним из первых вопросов, которыми озадачивается… Read More
Юбка – мощный элемент женского гардероба, благодаря которому любой наряд будет выглядеть потрясающе стильно и… Read More
Поисковые системы (например, Google) проверяют технические характеристики вашего сайта, такие как скорость загрузки, удобство навигации,… Read More