Categories: CSSУроки програмування

Способи створення кола за допомогою CSS стилів

Досить часто при верстці веб-проекту є потреба в створенні круглих елементів: круглі кнопки, круглі мініатюри, круглі іконки, або навіть цілі круглі контейнери. В деяких випадках вийти з ситуації можна з допомогою простих картинок, а іноді такий підхід не допомагає. Як же вирішити проблему, і тільки за допомогою CSS стилів? В сьогоднішньому уроці ми розглянемо 5 основних способів, з допомогою яких ви зможете створювати на своїх сайтах будь-які круглі елементи.

Кола в CSS

Існує кілька методів створення круглих форм в HTML за допомогою CSS стилів, кожен з яких має як свої плюси, так і мінуси. Давайте ж розглянемо найпопулярніші рішення, які дозволять вам зробити кола в CSS.

Рішення №1: радіус заокруглення (border-radius)

Найпоширеніша техніка для створення кругів – це округлення всіх кутів на 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%.

Рішення №2: використання SVG

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>

Рішення №3: властивість Шлях обрізки (Clip Path)

Властивість Шлях обрізки (clip-path) з’явилася в CSS зовсім недавно. Підтримка браузерами пристойна, але не повсюдна. Властивість clip-path не впливає на макет елемента, що означає, що вона не буде впливати на рамки, але буде приховувати зовнішні тіні. Це може бути і хорошим рішенням, або поганим, в залежності від того, яку мету ви переслідуєте.

Практичний приклад:

<div class="circle-block"></div>
<style>
 .circle-block {
  background: #ffef68;
  clip-path: circle(50%);
  height: 250px;
  width: 250px;
 }
</style>

Рішення №4: використання радіального градієнта

Ви можете використовувати фонове зображення і радіальний градієнт, щоб візуально заповнити елемент кругом. Це не дуже ефективний метод, оскільки краї кола можуть здаватися нерівними або розмитими в залежності від браузера.

Практичний приклад:

<div class="circle-block"></div>
<style>
 .circle-block {
  background-image: radial-gradient(circle, #ffef68, #ffef68 70%, transparent 60%);
  height: 250px;
  width: 250px;
 }
</style>

Рішення №5: обрізка контенту за допомогою кола в CSS

Ви можете обрізати елемент <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>

Цей метод має деякі обмеження:

Елементи не чуйні (responsive) щодо свого контейнера
Не можна застосувати внутрішні тіні до елементу (хоча можна спробувати використання псевдоелементів: after або: before)
Властивість підгонки об’єкту object-fit: cover, яка запобігає спотворенню неквадратних зображень, що не підтримується в IE11

Нижче ви можете побачити демо всіх розглянутих сьогодні практичних рішень як зробити кола в CSS.

Ось і все на сьогодні! З сьогоднішньої практичної статті ви дізналися, як за допомогою різних способів можна зробити кола в CSS. Дякуємо, що читаєте нас!