Содержание

Как создать круг в CSS и редактировать его

От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.

Но я открою вам секрет: в этом нет ничего сложного. К концу этой статьи я думаю, что вы тоже будете экспертом.

Создание кругов

Существует несколько методов определения динамических круглых форм в HTML и CSS, каждый из которых имеет свои плюсы и минусы. Вот те немногие, с которыми я экспериментировал больше всего, от самых распространенных и до наименее распространенных.

border-radius

Самая распространенная техника — это скруглить все углы на 50%. Это самый простой способ, и он широко поддерживается. Свойство border-radius также будет влиять на обводки, тени и целевой размер касания / клика элемента.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Если вы хотите, чтобы круг растягивался до формы таблетки, установите для border-radius половину высоты элемента вместо 50%. Если высота неизвестна, выберите произвольно большое значение (например, 99em).

SVG

SVG может включать в себя элемент <circle/>, который может быть стилизован аналогично любому другому контуру. Они очень хорошо поддерживаются и производительны для анимации, но требуют больше разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина ширины его обводки, если есть) немного меньше viewBox SVG.

clip-path

Это новая техника. Ее поддержка вполне достойная, но менее последовательная. clip-path не влияет на макет элемента, что означает, что оно влияет на обводку и, скорее всего, будет скрывать внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.

Радиальный градиент

Мы можем использовать background-image и radial-gradient, чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его расположение (включая целевой размер касания / клика) не будет затронуто. Это мой наименее любимый метод, потому что края круга могут казаться неровными или нечеткими в зависимости от браузера, но это может хорошо подходить для тонких фоновых деталей.

Центрирование контента

Можно использовать практически любой метод для центрирования вещей с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит слегка смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему еще более заметной.

Круги в CSS

Сравнение методов центрирования для элементов разных размеров в Safari. Обратите внимание, что некоторые методы имеют более заметный джиттер в положении значка относительно его контейнера.

Это связано с тем, как браузеры рассчитывают субпиксели. Каждый раз, когда мы используем относительные единицы, единицы на основе окра просмотра или значения из модульной шкалы, есть вероятность, что мы просим браузер вычислять дробные значения, например 22.78125px. Когда-нибудь эта проблема может сломать нашу сетку или вызвать другие фундаментальные проблемы. В наши дни браузеры тщательно работают над изменением вычислений в зависимости от элемента, свойства и контекста, но это все равно не идеально.

По моему опыту, самый гибкий метод для центрирования — использовать комбинацию абсолютного позиционирования (чтобы установить центральную точку на основе расположения родительского элемента) и преобразования (чтобы поместить дочерний элемент с помощью относительных вычислений):

Обрезка содержимого

Центрирование это хорошо, но что, если мы хотим заполнить круг изображением?

С помощью HTML / CSS

Мы можем обрезать элемент img до круга, используя border-radius:

Это имеет некоторые ограничения:

Элемент не адаптируется к своему контейнеру.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы не можем применить какие-либо внутренние тени, чтобы как-то отделить изображение от фона (кроме как в самом изображении).

Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.

Вот более сложный пример. В нем используется элемент-оболочка, чтобы установить соотношения сторон блока для поддержания квадратных пропорций, в нем улучшается обработка неквадратных изображений с помощью @supports и применяется прозрачная внутренняя тень, чтобы отделить изображение от фона:

С помощью SVG

Мы можем сделать то же самое, используя SVG:

Но поскольку элементы SVG image не поддерживают srcset или sizes, это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.

Субпиксельные промежутки

Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить, что появляются некоторые субпиксельные артефакты:

Круги в CSS

Светлые пиксели вдоль края, где фон выходит за внутреннюю границу.

К сожалению, я не нашел решения этой проблемы. Кажется, это происходит независимо от техники, используемой для рисования границы или отображения изображения, и это имеет место в некоторой степени в каждом браузере.
Если вы найдете способ наложения круговых эффектов без этих артефактов, пожалуйста, дайте мне знать в комментариях!

Обтекание текстом

Текст! Это основа Интернета. Он заполняет прямоугольники и разбивается на строки. Что мы можем сделать с этим?

Внешний текст

Вы можете задать обтекание текстом вокруг круглой фигуры, используя свойство shape-outside:

Внутренний текст

Стоп! Это, наверное, плохая идея! Сделать его адаптивным практически невозможно! Просто подождите, пока у нас не будет свойства shape-inside!

Точно? Хорошо, хорошо, у Джонатана Скита есть интеллектуальный хак. Он использует псевдо-элементы для установки shape-outside по обе стороны от текста:

Вдоль контура

Мы можем установить текст по изогнутому контуру с помощью SVG и <textPath>:

К сожалению, <circle> поддерживается для <textPath> не во всех браузерах, но преобразование в <path> не слишком сложное.

Заключение!

Вот и все! Вы прочитали длинную статью о действительно важной теме, прошли по ее минным полям с вложенными заголовками и повторяющимися демонстрациями и обрели знание о кругах в качестве единственной награды! Продолжайте в том же духе, отважный читатель! Я верю в вас!

Автор: Tyler Sticka

Источник: https://cloudfour.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как сделать круги с помощью CSS3

Рекомендую этот хостинг в Украине. Всё очень доступно, цены низкие, и лояльная тех поддержка.

Здравствуйте, дорогие читатели блога. Сегодня хочется рассказать Вам как сделать самые обычные круги только при помощи CSS стилей. Я вот начал замечать, что всё чаще в построении шаблонов используют именно этот способ. Получается весьма интересно, тем более если добавлены самые разные эффекты. А так же огромным плюсом является то, что данные круги значительно быстрее загружаются чем тоже изображение.

В общем давайте, непосредственно, перейдём к практике, но для начала давайте рассмотрим некоторые важные моменты.

Важные моменты

Во всех случаях мы будем использовать следующее:

-webkit-border-radius — для правильного отображения в браузерах таких как Chrome и Safari.

-moz-border-radius — для правильного отображения кругов в браузере Firefox.

Хотелось бы сказать, что на данный момент почти все, с последним обновлением, браузеры поддерживают технологию CSS3, а также свойство border-radius (стандартное свойство для всех браузеров, которые поддерживают CSS3). Но лучше будем, так сказать, страховаться, потому что не все пользователи обновляются вовремя, или же вообще не обновляются и пользуются старыми версиями браузеров.

С помощью свойства border-radius можно делать любые круги любого размера, главное правильно подбирать радиус углов в пикселах, например, чем больше круг тем больше должен быть радиус углов, чтобы получился сам круг, если радиус будет не достаточно велик, то скорее всего получится не круг, а квадрат с загругленными углами.

Ну а теперь практика.

Круг с текстом внутри

Привет

CSS

.circle{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px; color:#fff;
 line-height:100px;
 text-align:center;
 background:#000

}

HTML

Чтобы вставить круг в то место где Вы хотите, нужно просто добавить следующее:

<div>привет</div>

И круг отобразится. Ух как всё просто 🙂

Привет

CSS

.button{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px; font-size:20px;
 color:#fff;
 line-height:100px;
 text-align:center;
 background:#000
 }

HTML

Чтобы получился такой круг с ссылкой нужно к коду ссылки присвоить класс:

<a href="#"  class="button">Привет</a>

Это свойство позволяет нам менять цвет при наведении.
Привет

CSS

.menu{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px;
 color:#fff;
 line-height:100px;
 text-decoration:none;
 text-align:center;
 background:#000
 }
 .menu:hover{
 color:#fff;
 text-decoration:none;
 background:#333
 }

HTML

<a href="#">Привет</a>

Ну а здесь Вы сможете добавить разные стили на Ваше усмотрение, например тень или бордюр. Вот, что у меня получилось:
Привет

CSS

.stylish{
 width:100px;
 height:100px;
 display:block;
 border-radius:66px;
 -moz-border-radius:66px;
 -webkit-border-radius:66px;
 -khtml-border-radius:66px;
 border:#ccc 4px double;
 font-size:20px;
 color:#888;
 line-height:100px;
 text-shadow:0 1px 0 #fff;
 text-decoration:none;
 text-align:center;
 background:#ddd}

.stylish:hover{
 border:#bbb 4px double;
 color:#aaa;
 text-decoration:none;
 background:#e6e6e6
 }

HTML

<a href="#">Hello</a>

Как видите, в принципе, здесь ничего сложного нет, главное понять что за что отвечает и экспериментировать, и тогда всё обязательно получится.

Обычный круг

.krug {
 width: 100px;
 height: 100px;
 background: #70B4CF;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 }

Овал

.oval {
 width: 180px;
 height: 90px;
 background: #70B4CF;
 -moz-border-radius: 90px/45px;
 -webkit-border-radius: 90px/45px;
 border-radius: 90/45px;
 }

Полукруг

.half-circle{
 background: orange;
 height: 50px;
 width: 100px;
 -moz-border-radius: 100px 100px 0 0;
 -webkit-border-radius: 100px 100px 0 0;
 border-radius: 100px 100px 0 0;
 }

Обрезанный круг

.quartercircle{
 background: #E4A7E8;
 height: 100px;
 width: 100px;
 -moz-border-radius: 100px 0 0 0;
 -webkit-border-radius: 100px 0 0 0;
 border-radius: 100px 0 0 0;
 }

Вот и всё, дорогие друзья. Надеюсь с этой статьи Вы что нибудь узнали для себя новое и полезное. И прошу Вас если что то будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

Как сделать круглые изображения? | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 4.0+ 11.60+ 5.0+ 4.0+ 2.1+ 2.0+

Задача

Превратить изображения в круг и добавить вокруг них рамку.

Решение

Для скругления уголков у элементов в CSS3 предназначено свойство border-radius, значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.

Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round, с тенью и рамкой.

Пример 1. Круглые изображения

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    border: 3px solid green; /* Параметры рамки */
    box-shadow: 0 0 7px #666; /* Параметры тени */
   }
  </style>
 </head>
 <body>
   <p><img src="images/thumb1.jpg" alt="">
      <img src="images/thumb2.jpg" alt="">
      <img src="images/thumb3.jpg" alt=""></p>
 </body>
</html>

Результат данного примера в Opera показан на рис. 1.

Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow. Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

Пример 2. Рамка из тени

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    box-shadow: 0 0 0 3px green, 0 0 13px #333; /* Параметры теней */
   }
  </style>
 </head>
 <body>
   <p><img src="images/thumb1.jpg" alt="">
      <img src="images/thumb2.jpg" alt="">
      <img src="images/thumb3.jpg" alt=""></p>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Рамка в браузере Chrome

Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin.

Круглые изображения | WebReference

Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius. К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в <a>, то областью ссылки будет круг.

Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.

Пример 1. Круглые изображения

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
.round {
border-radius: 50%;
}
</style>
</head>
<body>
<img src=»image/meduza1.jpg» alt=»»>
<img src=»image/meduza2.jpg» alt=»»>
<img src=»image/meduza3.jpg» alt=»»>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Круглые изображения

border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный <div> и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.

Рис. 2. Фотография акулы

Теперь устанавливаем эту фотографию как фон для класса round, задаём размеры элемента и настраиваем масштаб изображения (пример 2).

Пример 2. Круглый элемент

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
.round {
width: 300px; height: 300px; /* Ширина и высота */
border-radius: 50%; /* Превращаем в круг */
background: url(/example/image/shark.jpg) no-repeat -70px 0; /* Параметры фона */
background-size: auto 300px; /* Высота фотографии равна высоте элемента */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.

Рис. 3. Круглое изображение

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Все символы HTML

Кроме этого, для ввода символов, недоступных при использовании обычной клавиатуры, существуют Alt-коды.

символ html-код десятичный
код
описание
  &nbsp; &#160; неразрывный пробел
&ensp; &#8194; узкий пробел (еn-шириной в букву n)
&emsp; &#8195; широкий пробел (em-шириной в букву m)
&ndash; &#8211; узкое тире (en-тире)
&mdash; &#8212; широкое тире (em -тире)
­ &shy; &#173; мягкий перенос
а́   &#769; ударение, ставится после «ударной» буквы
 
© &copy; &#169; копирайт
® &reg; &#174; знак зарегистрированной торговой марки
&trade; &#8482; знак торговой марки
º &ordm; &#186; копье Марса
ª &ordf; &#170; зеркало Венеры
&permil; &#8240; промилле
π &pi; &#960; пи (используйте Times New Roman)
¦ &brvbar; &#166; вертикальный пунктир
§ &sect; &#167; параграф
° &deg; &#176; градус
µ &micro; &#181; знак «микро»
&para; &#182; знак абзаца
&hellip; &#8230; многоточие
&oline; &#8254; надчеркивание
´ &acute; &#180; знак ударения
  &#8470; знак номера
🔍   &#128269; Лупа (наклонённая влево)
🔎   &#128270; Лупа (наклонённая вправо)
  &#9742; Телефон
  &#9993; Конверт, email, почта
💾   &#128190; Дискета
🛠   &#128736; Молоток и гаечный ключ, настройка
🔒   &#128274; Замок закрыт
🔓   &#128275; Замок открыт
🔔   &#128276; Колокольчик
🔕   &#128277; Колокольчик перечеркнутый
🗑   &#128465; Урна
🔥   &#128293; Огонь
🛇   &#128711; Запрещено
  &#9940; Вход запрещен (кирпич)
  &#9971; Фраг в воронке, местоположение, место встречи, гольф
знаки арифметических и математических операций
× &times; &#215; умножить
÷ &divide; &#247; разделить
< &lt; &#60; меньше
> &gt; &#62; больше
± &plusmn; &#177; плюс/минус
¹ &sup1; &#185; степень 1
² &sup2; &#178; степень 2
³ &sup3; &#179; степень 3
¬ &not; &#172; отрицание
¼ &frac14; &#188; одна четвертая
½ &frac12; &#189; одна вторая
¾ &frac34; &#190; три четверти
&frasl; &#8260; дробная черта
&minus; &#8722; минус
&le; &#8804; меньше или равно
&ge; &#8805; больше или равно
&asymp; &#8776; приблизительно (почти) равно
&ne; &#8800; не равно
&equiv; &#8801; тождественно
&radic; &#8730; квадратный корень (радикал)
&infin; &#8734; бесконечность
&sum; &#8721; знак суммирования
&prod; &#8719; знак произведения
&part; &#8706; частичный дифференциал
&int; &#8747; интеграл
&forall; &#8704; для всех (видно только если жирным шрифтом)
&exist; &#8707; существует
&empty; &#8709; пустое множество
Ø &Oslash; &#216; диаметр
&isin; &#8712; принадлежит
&notin; &#8713; не принадлежит
&ni; &#8727; содержит
&sub; &#8834; является подмножеством
&sup; &#8835; является надмножеством
&nsub; &#8836; не является подмножеством
&sube; &#8838; является подмножеством либо равно
&supe; &#8839; является надмножеством либо равно
&oplus; &#8853; плюс в кружке
&otimes; &#8855; знак умножения в кружке
&perp; &#8869; перпендикулярно
&ang; &#8736; угол
&and; &#8743; логическое И
&or; &#8744; логическое ИЛИ
&cap; &#8745; пересечение
&cup; &#8746; объединение
знаки валют
&euro; &#8364; Евро
¢ &cent; &#162; Цент
£ &pound; &#163; Фунт
¤ &current; &#164; Знак валюты
¥ &yen; &#165; Знак йены и юаня
ƒ &fnof; &#402; Знак флорина
  &#8381; Знак рубля
маркеры, птички, галочки, check mark, крестики
&bull; &#8226; простой маркер
  &#9675; круг
· &middot; &#183; средняя точка
  &#8224; крестик
  &#8225; двойной крестик
&spades; &#9824; пики
&clubs; &#9827; трефы
&hearts; &#9829; червы
&diams; &#9830; бубны
&loz; &#9674; ромб
  &#10084; жирное сердце
  &#10003; Символ галочка
  &#10004; Жирная отметка галочкой
𐄂   &#65794; Крестик
🗸   &#128504; Тонкая галочка
  &#9989; Жирная незакрашенная отметка галочка
  &#9745; Галочка в квадрате
🗹   &#128505; Жирная галочка в квадрате
  &#9888; Внимание!
  &#10060; X, знак умножения, крестик, удалить
  &#10062; белый крест в квадрате
  &#10006; Крест, жирный знак умножения
  &#10811; Знак умножения в треугольнике, пересечение равнозначных дорог
карандаши, перья, кисти
  &#9997; пишущая рука
  &#9998; карандаш, направленный вправо-вниз
  &#9999; карандаш
  &#10000; карандаш, направленный вправо-вверх
  &#10001; незакрашенное острие пера
  &#10002; закрашенное острие пера
🖌   &#128396; кисть, направленная влево-вниз
кавычки
» &quot; &#34; двойная кавычка
& &amp; &#38; амперсанд
« &laquo; &#171; левая типографская кавычка (кавычка-елочка)
» &raquo; &#187; правая типографская кавычка (кавычка-елочка)
  &#8249; одиночная угловая кавычка открывающая
  &#8250; одиночная угловая кавычка закрывающая
&prime; &#8242; штрих (минуты, футы)
&Prime; &#8243; двойной штрих (секунды, дюймы)
&lsquo; &#8216; левая верхняя одиночная кавычка
&rsquo; &#8217; правая верхняя одиночная кавычка
&sbquo; &#8218; правая нижняя одиночная кавычка
&ldquo; &#8220; кавычка-лапка левая
&rdquo; &#8221; кавычка-лапка правая верхняя
&bdquo; &#8222; кавычка-лапка правая нижняя
  &#10075; одиночная английская кавычка открывающая
  &#10076; одиночная английская кавычка закрывающая
  &#10077; двойная английская кавычка открывающая
  &#10078; двойная английская кавычка закрывающая
стрелки
&larr; &#8592; стрелка влево
&uarr; &#8593; стрелка вверх
&rarr; &#8594; стрелка вправо
&darr; &#8595; стрелка вниз
&harr; &#8596; стрелка влево и вправо
  &#8597; стрелка вверх и вниз
&crarr; &#8629; возврат каретки
&lArr; &#8656; двойная стрелка влево
&uArr; &#8657; двойная стрелка вверх
&rArr; &#8658; двойная стрелка вправо
&dArr; &#8659; двойная стрелка вниз
&hArr; &#8660; двойная стрелка влево и вправо
  &#8661; двойная стрелка вверх и вниз
  &#9650; треугольная стрелка вверх
  &#9660; треугольная стрелка вниз
  &#9658; треугольная стрелка вправо
  &#9668; треугольная стрелка влево
звездочки, снежинки, шестеренки
  &#9731; Снеговик
  &#10052; Снежинка
  &#10053; Зажатая трилистниками снежинка
  &#10054; Жирная остроугольная снежинка
  &#9733; Закрашенная звезда
  &#9734; Незакрашенная звезда
  &#10026; Незакрашенная звезда в закрашенном круге
  &#10027; Закрашенная звезда с незакрашенным кругом внутри
  &#10031; Вращающаяся звезда
  &#9885; Начерченная белая звезда
  &#9898; Средний незакрашенный круг
  &#9899; Средний закрашенный круг
  &#9913; Секстиле (типа снежинка)
  &#10037; Восьмиконечная вращающаяся звезда
  &#10057; Звёздочка с шарообразными окончаниями
  &#10059; Жирная восьмиконечная каплеобразная звёздочка-пропеллер
  &#10042; Шестнадцатиконечная звёздочка
  &#10041; Двенадцатиконечная закрашенная звезда
  &#10040; Жирная восьмиконечная прямолинейная закрашенная звезда
  &#10038; Шестиконечная закрашенная звезда
  &#10039; Восьмиконечная прямолинейная закрашенная звезда
  &#10036; Восьмиконечная закрашенная звезда
  &#10035; Восьмиконечная звёздочка
  &#10034; Звёздочка с незакрашенным центром
  &#10033; Жирная звёздочка
  &#10023; Заострённая четырёхконечная незакрашенная звезда
  &#10022; Заострённая четырёхконечная закрашенная звезда
  &#9055; Звезда в круге
  &#8859; Снежинка в круге
  &#9881; Шестерёнка
часы, время
  &#9200; Будильник
  &#8986; Наручные часы
  &#8987; Песочные часы
  &#9203; Песочные часы
🕰   &#128368; Каминные часы

FAQ: Как сделать круглый div / круглое фото?

Открыл недавно метрику на своем старом сайте, а на него есть несколько переходов с поисковиков. Посмотрел историю поисковых запросов и удивился, почти каждый день есть несколько посещений по запросам “как сделать круглый div”, “как сделать круглое фото” и подобное. Оказывается многих интересует подобный вопрос, так давайте же разберем его.

Чтобы сделать круглый блок, необходимо воспользоваться CSS-свойством border-radius и задать ему значение 50%, то есть округлить каждый угол на половину ширины/высоты. В результате мы получим такое:

Как видим, мы получили почти круг, а почти, потому, что округление мы применили к прямоугольному блоку, чтобы получился красивый, правильный круг, необходимо прямоугольник превратить в квадрат, для этого блоку задаем одинаковую высоту и ширину:

Готовый код:

<div></div>
  • CSS (правила для скругления)
.circle {
    width: 100px; /* задаете свои размеры */
    height: 100px;
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
}

Код для вывода красивых аватаров пользователей с использованием теней и рамок.

<div>
    <img src="путь_к_файлу" alt="" />
</div>
.circle {
    width: 100px; /* задаете свои размеры */
    height: 100px;
    overflow: hidden;
    background: #fff;
    padding: 5px; /* создание отступов */
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: #aaa 1px solid;
    box-shadow: 0px 1px 1px 1px #bbb; /* тень */
    -moz-box-shadow: 0px 1px 1px 1px #bbb;
    -webkit-box-shadow: 0px 1px 1px 1px #bbb;
}
.circle img {
    display: block;
    width:100%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

 

В результате получаем такие картинки

Круглые картинки для аватаров

Круглые символы

Символ круга Имя круга Десятичный Шестнадцатеричный
Белый круг & # 9675; & # x25CB;
Пунктирный круг & # 9676; & # x25CC;
Круг с вертикальной заливкой & # 9677; & # x25CD;
Черный круг & # 9679; & # x25CF;
Круг с левой половиной черный & # 9680; & # x25D0;
Круг с правой половиной черный & # 9681; & # x25D1;
Круг с нижней половиной черный & # 9682; & # x25D2;
Круг с верхней половиной черный & # 9683; & # x25D3;
Круг с верхним правым квадрантом Черный & # 9684; & # x25D4;
Круг со всем, кроме верхнего левого квадранта Черный & # 9685; & # x25D5;
Левая половина черного круга & # 9686; & # x25D6;
Правая половина черного круга & # 9687; & # x25D7;
Обратный белый круг & # 9689; & # x25D9;
Верхняя половина обратный белый круг & # 9690; & # x25DA;
Нижняя половина обратный белый круг & # 9691; & # x25DB;
Верхний полукруг & # 9696; & # x25E0;
Нижний полукруг & # 9697; & # x25E1;
Большой круг & # 9711; & # x25EF;
Белый круг с верхним левым квадрантом & # 9716; & # x25F4;
Белый круг с нижним левым квадрантом & # 9717; & # x25F5;
Символ круга Имя круга Десятичное Шестнадцатеричное
Белый круг с нижним правым квадрантом & # 9718; & # x25F6;
Белый круг с верхним правым квадрантом & # 9719; & # x25F7;
Белый круг с точкой справа & # 9862; & # x2686;
Белый круг с двумя точками & # 9863; & # x2687;
Черный круг с белой точкой справа & # 9864; & # x2688;
Черный круг с двумя белыми точками & # 9865; & # x2689;
Средний белый круг & # 9898; & # x26AA;
Средний черный круг & # 9899; & # x26AB;
Средний Маленький белый круг & # 9900; & # x26AC;
Обведенная белая звезда & # 10026; & # x272A;
Восьмиконечная звезда с открытым центром в кружке & # 10050; & # x2742;
Затененный белый круг & # 10061; & # x274D;
Прихватка вверх с кругом выше & # 10207; & # x27DF;
Пустой набор с кружком сверху & # 10674; & # x29B2;
Круг с горизонталью & # 10677; & # x29B5;
Вертикальная полоса в кружке & # 10678; & # x29B6;
закругленная параллельная & # 10679; & # x29B7;
Обведенный обратный солидус & # 10680; & # x29B8;
Обведенный перпендикуляр & # 10681; & # x29B9;
Круг, разделенный горизонтальной полосой, и верхняя половина, разделенная вертикальной полосой & # 10682; & # x29BA;
Символ круга Название круга Десятичный Шестнадцатеричный
Круг с наложенным X & # 10683; & # x29BB;
Обведенная белая пуля & # 10686; & # x29BE;
⦿ Круглая пуля & # 10687; & # x29BF;
Круг с малым кругом вправо & # 10690; & # x29C2;
Круг с двумя горизонтальными штрихами вправо & # 10691; & # x29C3;
Квадрат малый круг & # 10695; & # x29C7;
Белый круг без ошибок & # 10738; & # x29F2;
Черный круг без ошибок & # 10739; & # x29F3;
Оператор N-арной обведенной точки & # 10752; & # x2A00;
Оператор N-арного обведенного плюса & # 10753; & # x2A01;
Оператор N-арного времени в кружке & # 10754; & # x2A02;
Нижняя закрепка с кругом ниже & # 10993; & # x2AF1;
Черный большой круг & # 11044; & # x2B24;
Большой круг тяжелый & # 11093; & # x2B55;

Скопируйте и вставьте символ круга или используйте десятичное, шестнадцатеричное число или HTML-код Unicode на социальных сайтах, в своем блоге или в документе.

Символ круга Варианты предварительного просмотра

9000

Символ круга Цвет Курсив
Белый круг красный
Белый круг оранжевый

Белый Круг розовый
Белый Круг зеленый
Белый Круг королевский синий
Белый Круг фиолетовый
Пунктирный красный круг
Пунктирный оранжевый оранжевый
Пунктирный розовый розовый
Пунктирный зеленый
Пунктирный круг, королевский синий
Пунктирный круг фиолетовый

.

html — Как использовать CSS, чтобы окружить число кругом?

Переполнение стека

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

.

HTML Unicode UTF-8

СЛЕВА НА НИЖНИЙ СПРАВО ЗАПОЛНИТЬ

900 16 ▨

25AA

9645

9647

Char декабрь шестнадцатеричный Организация Имя
9632 25A0 ЧЕРНЫЙ КВАДРАТ
9633 25A1 БЕЛЫЙ КВАДРАТ
9634 25A

9634 25A С закругленными углами
9635 25A3 БЕЛЫЙ КВАДРАТ, СОДЕРЖАЩИЙ ЧЕРНЫЙ МАЛЕНЬКИЙ КВАДРАТ
9636 25A4 КВАДРАТ
КВАДРАТ
КВАДРАТ 9637 25A5 КВАДРАТ С ВЕРТИКАЛЬНЫМ НАПОЛНЕНИЕМ
9638 25A6 КВАДРАТ С ОРТОГОНАЛЬНОЙ НАПОЛНИТЕЛЬНОЙ НАПРАВЛЯЮЩЕЙ НАПРЯЖЕНИЕМ

9639
9640 25A8 ПЛОЩАДЬ С ВЕРХНИМ ПРАВО НА НИЖНИЙ ЛЕВЫЙ ЗАЛИВ
9641 25A9 КВАДРАТ С ДИАГОНАЛЬНОЙ ЗАПОЛНЕНИЕМ ДВИГАТЕЛЯ ПЕРЕКРЫТИЯ
ЧЕРНЫЙ МАЛЕНЬКИЙ КВАДРАТ
9643 25AB БЕЛЫЙ МАЛЕНЬКИЙ КВАДРАТ
9644 25AC ЧЕРНЫЙ ПРЯМОУГОЛЬНИК
25AD БЕЛЫЙ ПРЯМОУГОЛЬНИК
9646 25AE ЧЕРНЫЙ ВЕРТИКАЛЬНЫЙ ПРЯМОУГОЛЬНИК
9647 БЕЛЫЙ ВЕРТИКАЛЬ

БЕЛЫЙ ПРЯМОУГОЛЬНИК

9648 25B0 ЧЕРНАЯ ПАРАЛЛЕЛОГРАММА
9649 25B1 БЕЛАЯ ПАРАЛЛЕЛОГРАММА
9650 25B2 ЧЕРНЫЙ УКАЗАТЕЛЬ

25B3 БЕЛЫЙ ТРЕУГОЛЬНИК, УПРАВЛЯЮЩИЙ ВВЕРХ
9652 25B4 ЧЕРНЫЙ, УКАЗАННЫЙ Вверх МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9653 25B5 БЕЛЫЙ

НАПРАВЛЯЮЩИЙ МАЛЫЙ ТРЕУГОЛЬНИК
9654 25B6 ЧЕРНЫЙ НАПРАВЛЯЮЩИЙ ТРЕУГОЛЬНИК ВПРАВО
9655 25B7 БЕЛЫЙ ПРАВО-УКАЗАТЕЛЬ

9656 25B8 ЧЕРНЫЙ УКАЗАТЕЛЬ ВПРАВО SM ВСЕ ТРЕУГОЛЬНИК
9657 25B9 БЕЛЫЙ НАПРАВЛЯЮЩИЙ ВПРАВО МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9658 25BA ЧЕРНЫЙ УКАЗАТЕЛЬ ВПРАВО

017

800017

7

167

7

7

90 016

25D8

9659 25BB БЕЛЫЙ УКАЗАТЕЛЬ ВПРАВО
9660 25BC ЧЕРНЫЙ ТРЕУГОЛЬНИК ВНИЗ
БЕЛЫЙ

25BD

DOWN

9661 25BD -ПОКАЗЫВАЮЩИЙ ТРЕУГОЛЬНИК
9662 25BE ЧЕРНЫЙ НАПРАВЛЯЮЩИЙ ВНИЗ МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9663 25BF БЕЛЫЙ ТРЕУГОЛЬНИК 14 9 9664 25C0 ЧЕРНЫЙ ЛЕВОГО УКАЗАНИЯ T ТРЕУГОЛЬНИК
9665 25C1 БЕЛЫЙ ТРЕУГОЛЬНИК ЛЕВОГО УКАЗАНИЯ
9666 25C2 ЧЕРНЫЙ ЛЕВЫЙ УКАЗАТЕЛЬ

25C3 БЕЛЫЙ МАЛЕНЬКИЙ ТРЕУГОЛЬНИК ЛЕВОГО УКАЗАНИЯ
9668 25C4 ЧЕРНЫЙ ЛЕВЫЙ УКАЗАТЕЛЬ
9669 25C -УКАЗАТЕЛЬ УКАЗАНИЯ
9670 25C6 ЧЕРНЫЙ БРИЛЛИАНТ
9671 25C7 БЕЛЫЙ АЛМАЗ

7 900C

БЕЛЫЙ БРИЛЛИАНТ, СОДЕРЖАЩИЙ ЧЕРНЫЙ МАЛЕНЬКИЙ АЛМАЗ
9673 25C9 FISHEYE
9674 25CA & loz; LOZENGE
9675 25CB БЕЛЫЙ КРУГ
9676 25CC ТОЧЕЧНЫЙ КРУГ

КРУГ С ВЕРТИКАЛЬНЫМ ЗАПОЛНЕНИЕМ
9678 25CE BULLSEYE
9679 25CF ЧЕРНЫЙ 96 КРУГ

КРУГ С ЛЕВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9681 25D1 КРУГ С ПРАВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9682 25D2 ДЛИН.
9683 25D3 КРУГ С ВЕРХНЕЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9684 25D4 КРУГ С ВЕРХНИМ ПРАВЫМ КВАДРАНТОМ ЧЕРНЫЙ
9685 25D5

B ВСЕХ

ВЕРХНИЙ

ВЕРХНИЙ

ЧЕРНЫЙ КВАДРАНТ
9686 25D6 ЛЕВАЯ ПОЛОВИНА ЧЕРНЫЙ КРУГ
9687 25D7 ПРАВАЯ ПОЛОВИНА

917 968 ОБРАТНЫЙ ПУЛЬТ
9689 25D9 ОБРАТНЫЙ БЕЛЫЙ КРУГ
9690 25DA
0

99916 ЧЕРНЫЙ ПРАВЫЙ

999

90 014

КВАДРАТНЫЙ С ПРАВЫЙ

9710

БЕЛЫЙ

С ВЕРХНИМ ЛЕВЫМ КВАДРАНТОМ

ВЕРХНЯЯ ПОЛОВИНА

9691 25DB НИЖНИЙ HA LF ОБРАТНЫЙ БЕЛЫЙ КРУГ
9692 25DC ВЕРХНИЙ ЛЕВЫЙ КВАДРАНТ КРУГЛОГО ДУГИ
9693 25DD 9693 25DD ПРАВАЯ ПРАВАЯ

9694 25DE НИЖНЯЯ ПРАВАЯ КРУГЛОДНАЯ ДУГА КВАДРАНТА
9695 25DF НИЖНЯЯ ЛЕВАЯ КРУГЛОДНАЯ ДУГА 256916
6 ПОЛУКРУГ
9697 25E1 НИЖНЯЯ ПОЛОВИНА КРУГА
9698 25E2 ЧЕРНЫЙ ПРАВЫЙ 96
ЧЕРНЫЙ НИЖНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
9700 25E4 ЧЕРНЫЙ ВЕРХНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
9701 25E5 ЧЕРНЫЙ ВЕРХНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
9702
9702
9702 БЕЛЫЙ ПУЛЬТ
9703 25E7 КВАДРАТ С ЛЕВОЙ ПОЛОВИНКОЙ ЧЕРНЫЙ
9704 25E8 КВАДРАТНЫЙ 9 9705 25E9 КВАДРАТ С ВЕРХНИМ ЛЕВЫМ ДИАГОНАЛЬНЫМ ПОЛОВИНОЙ ЧЕРНЫЙ
9706 25EA КВАДРАТ С НИЖНИМ ПРАВЫМ ДИАГОНАЛЬНЫМ ПОЛОВИНОМ 970 970 970 970 970 970 970 970

БЕЛАЯ ПЛОЩАДЬ С ВЕРТИКАЛЬНОЙ ДВОЙНОЙ ЛИНИЕЙ
9708 25EC БЕЛЫЙ ТРЕУГОЛЬНИК, УПРАВЛЯЮЩИЙ ВВЕРХ, С ТОЧКОЙ
9709 25ED ТРЕУГОЛЬНИК ВВЕРХ С ЛЕВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ

25EE ВЕРХНИЙ ТРЕУГОЛЬНИК С ПРАВОЙ ПОЛОВИНКОЙ ЧЕРНЫЙ
9711 25EF БОЛЬШОЙ КРУГ
9712 25FAR0
9713 25F1 БЕЛЫЙ КВАДРАТ С НИЖНИМ ЛЕВЫМ КВАДРАНТОМ
9714 25F2
0

9000

9000

БЕЛЫЙ ПЕРЕДНИЙ ПЕРЕДНИЙ КВАДРАТ

БЕЛЫЙ КВАДРАТ

9715 25F3 БЕЛЫЙ КВАДРАТ С ВВЕРХ НА ПРАВЫЙ КВАДРАНТ
9716 25F4 БЕЛЫЙ КРУГ С ВЕРХНИМ ЛЕВЫМ КВАДРАНТОМ
9717 25F5 ПЕРЕДНИЙ ПЕРЕДНИЙ КРУГ

БЕЛЫЙ КРУГ

ПЕРЕДНИЙ КРУГ 9718 25F6 БЕЛЫЙ КРУГ С ПРАВЫМ НИЖНИМ КВАДРАНТОМ
9719 25F7 БЕЛЫЙ КРУГ С ВЕРХНИМ ПРАВЫМ КВАДРАНТОМ
97208
97208
97208 ВЕРХНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
9721 25F9 ВЕРХНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
9722 25FA НИЖНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК

9721
25FB БЕЛЫЙ СРЕДНИЙ КВАДРАТ 90 017
9724 25FC ЧЕРНЫЙ СРЕДНИЙ КВАДРАТ
9725 25FD БЕЛЫЙ СРЕДНИЙ МАЛЕНЬКИЙ КВАДРАТ
97 ◾17 ЧЕРНЫЙ СРЕДНИЙ МАЛЫЙ КВАДРАТ
9727 25FF НИЖНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК

.

круглых изображений с CSS

В этом руководстве мы рассмотрим некоторые методы CSS для рендеринга круглых элементов . Основное свойство CSS, отвечающее за эффект, — это border-radius .

Хотя применить эффект к квадратным изображениям довольно просто, для прямоугольных изображений потребуется немного больше работы.

Посмотреть демо

Загрузить исходный код

Квадратные изображения

Для идеально квадратного элемента img требуется всего одна строка CSS. Этот метод лучше всего работает с квадратными изображениями.

HTML

    

КСС

 . Кругло - квадрат {
    border-radius: 50%; 
}  

Правило стиля выше является сокращением для:

 . Кругло - квадрат {
  граница-верх-левый-радиус: 50% 50%;
  граница-верх-правый-радиус: 50% 50%;
  граница-нижний-правый-радиус: 50% 50%;
  граница-нижний-левый-радиус: 50% 50%;
}  

Установив для всех свойств border-radius значение 50% ширины / высоты квадратного элемента img , мы завершаем формирование элемента img в виде круга:

Прямоугольные изображения

Прямоугольные изображения немного сложнее.

Чтобы визуализировать круг, изображение должно начинаться с квадрата.

Чтобы обойти проблему, мы можем обернуть элемент img в квадрат div . Затем мы «вырезаем» части элемента img , которые выходят за пределы квадратной оболочки div . Мы можем выполнить это, установив свойство overflow оболочки div на hidden .

Чтобы объект фотографии с меньшей вероятностью был обрезан, мы также должны обрабатывать альбомные фотографии (которые представляют собой горизонтально ориентированные прямоугольники) иначе, чем портретные фотографии (которые представляют собой вертикально ориентированные прямоугольники).

Изображения с альбомной ориентацией

HTML

   

КСС

  .circular - пейзаж {
  дисплей: встроенный блок;
  положение: относительное;
  ширина: 200 пикселей;
  высота: 200 пикселей;
  переполнение: скрыто;
  радиус границы: 50%;
}

.circular - альбомный img {
  ширина: авто;
  высота: 100%;
  маржа слева: -50 пикселей;
}  

Значения свойств ширины и высоты должны совпадать с , чтобы оболочка div (.круговой - пейзаж ) отображается как квадрат.

Кроме того, значения свойств width и height должны быть равны или меньше высоты для img . Это гарантирует, что элемент img может занимать оболочку div без растягивания.

Обычно объект пейзажных фотографий — но не всегда — располагается вокруг центра композиции. Чтобы дать нам наилучший шанс не обрезать объект фотографии, мы можем горизонтально центрировать элемент img в оболочке div , сдвинув элемент img влево, чтобы компенсировать обрезку с левым смещением.

Величина, на которую мы подталкиваем элемент img , равна 25% от ширины / высоты оболочки div . В этом случае мы сдвинем изображение на 50 пикселей (25% от 200 пикселей — 50 пикселей) влево. Мы можем добиться этого, установив для свойства margin-left элемента img отрицательное значение:

  margin-left: -50px;  

Предположение о том, что объект фотографии будет находиться близко к центру композиции, не всегда будет верным .Лучше всего иметь в виду это предположение, когда вы выбираете (или редактируете) изображения для этой техники.

Портретно-ориентированные изображения

HTML

   

КСС

  .circular - портрет {
  положение: относительное;
  ширина: 200 пикселей;
  высота: 200 пикселей;
  переполнение: скрыто;
  радиус границы: 50%;
}

.круговой - портрет img {
  ширина: 100%;
  высота: авто;
}  

Предположение, которое мы сделаем для портретно-ориентированных изображений, состоит в том, что объект фотографии находится в верхнем центре композиции. Опять же, это не будет иметь место для каждой портретной фотографии.

Подобно пейзажным фотографиям, оболочка div для элементов img с портретной ориентацией должна иметь равные значения свойств width и height , чтобы оболочка представляла собой идеальный квадрат.

На этот раз значение свойства width / height должно быть равно или меньше width элемента img , чтобы изображение могло покрывать оболочку div без растягивания.

Для изображений с портретной ориентацией мы назначаем высоту авто и ширину 100%. (Мы сделали обратное для изображений с альбомной ориентацией.)

Нам не нужно перемещать элемент img , потому что мы ожидаем, что объект фотографии находится в центре верхней части композиции.

Обзор

Этот прием лучше всего использовать для квадратных элементов img , при этом объект находится в мертвой центре фотографии. Но мы живем не в идеальном мире, поэтому при необходимости вы можете использовать оболочку div для прямоугольных элементов img .

Основным свойством CSS, отвечающим за круглую форму, является свойство border-radius . Установка радиуса углов на 50% ширины / высоты приводит к кругу.

Связанное содержимое

Адаптивное полное фоновое изображение с использованием CSS

Как создавать кнопки-призраки CSS

Создание адаптивных изображений с помощью CSS

Джейкоб Губе — основатель Six Revisions. Он фронтенд-разработчик. Свяжитесь с ним в Twitter.

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2020 © Все права защищены.

2020 © Все права защищены.