Способи створення кола за допомогою 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. Дякуємо, що читаєте нас!

Tags: CSS3HTML5

Recent Posts

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020

Найкращі водоспади світу (частина 1)

Водоспад – це одне з найбільш хвилюючих і найкрасивіших творінь матінки-природи у світі. По всьому… Read More

31/10/2020