Как сделать круг в круге?
Есть задача сделать круг и внутри круга сделать еще круг. Есть блок у которого данный круг добавляется с помощью before. Блоков у которых есть before с данным кругом достаточно много на странице. Проблема в том, что я на before наложил круг, но не могу в него вписать еще один. Как это можно исправить?
- Вопрос задан более трёх лет назад
- 3812 просмотров
2 комментария
Простой 2 комментария
Нарисовать круг, используя только CSS
Ну раз уж в вопросе сказано «используя только CSS», то так и отвечу:
html < background: white; >body < width: 10em; /* поддерживаются любые единицы, в том числе проценты */ margin: 1em auto; background: silver; border-radius: 50%; >body::before
Отслеживать
ответ дан 17 мар 2017 в 9:12
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
- Создайте div с одинаковым высотой и шириной, образуя тем самым квадрат (для круга используйте те же величины).
- Добавьте border-radius 50%, что сделает квадрат круглым по форме.
- Затем вы можете поиграть с фоном-цветом / градиентами / (даже с псевдоэлементами), чтобы создать что-то вроде этого:
.red < background-color: red; >.green < background-color: green; >.blue < background-color: blue; >.yellow < background-color: yellow; >.sphere < height: 200px; width: 200px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 500%; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display: inline-block; margin: 5%; >.sphere::after
Отслеживать
ответ дан 17 мар 2017 в 9:05
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
Просили круг а не сферу.
11 авг 2018 в 9:53
А мне понравился этот ответ, он единственный из всех поддерживает IE8-, поскольку не использует border-radius :
Вместо этого вставляется символ круга, с номером unicode 25СF :
.circle:before
Отслеживать
ответ дан 17 мар 2017 в 12:04
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков
А мне не понравился этот прием, потому что даже при 200px уже видны зазубрины изображения. Ловите плюс за труды.
17 мар 2017 в 12:51
Какие зазубрины? Вектор же. Можно добавить немножко text-shadow
17 мар 2017 в 13:07
@vp_arth вот не знал, что текст это вектор, спасибо, что просветили.Увеличите масштаб и увидите ступеньки, мне и так видно
17 мар 2017 в 13:09
Увеличил font-size до 500px, масштаб в браузере — до 500%. Никаких зазубрин.
17 мар 2017 в 13:13
Ну значит надо спросить кого-нибудь третьего 🙂
17 мар 2017 в 13:14
Думаю с кодом тут все понятно:
.circle
Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 18 мар 2017 в 10:57
GrumpyCoder GrumpyCoder
180 8 8 бронзовых знаков
конечно с кодом всё понятно — это стандартный код для получения круга свойствами css/ Для поддержки нового пользователя ловите плюс
18 мар 2017 в 11:08
Вот миксин для создания круга
@mixin circle($width, $color) < width: $width; height: $width; background: $color; border-radius: $width/2; >.circle
Отслеживать
ответ дан 17 мар 2017 в 10:34
Trofimov Zhenya Trofimov Zhenya
307 1 1 серебряный знак 8 8 бронзовых знаков
Не могу найти информацию про миксины в стандарте CSS3, не поделитесь ссылкой?
18 мар 2017 в 8:49
@andreymal, а их там и нет. По крайней мере, не в этой форме. В стандарте есть @apply , который по сути тоже миксин.
18 мар 2017 в 11:42
Кстати, с процентами работать не будет.
18 мар 2017 в 11:50
Поищите инфу про препроцессоры — sass, scss или stylus, это чудесная штука, там есть переменные, функции, вложенность и еще куча классных штук. Если хотите совсем в тренде быть — заодно и про postcss почитайте. Оно позволяет проанализировать код и указывает на ошибки и проблемы несовместимости.
19 мар 2017 в 10:18
Ещё есть вариант с использованием кругового градиента:
.circle
Отслеживать
ответ дан 17 мар 2017 в 22:06
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков
- html
- css
- html5
- css3
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Круги в CSS
От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.
Но я открою вам секрет: в этом нет ничего сложного. К концу этой статьи я думаю, что вы тоже будете экспертом.
Создание кругов
Существует несколько методов определения динамических круглых форм в HTML и CSS, каждый из которых имеет свои плюсы и минусы. Вот те немногие, с которыми я экспериментировал больше всего, от самых распространенных и до наименее распространенных.
border-radius
Самая распространенная техника — это скруглить все углы на 50%. Это самый простой способ, и он широко поддерживается. Свойство border-radius также будет влиять на обводки, тени и целевой размер касания / клика элемента.
Если вы хотите, чтобы круг растягивался до формы таблетки, установите для border-radius половину высоты элемента вместо 50%. Если высота неизвестна, выберите произвольно большое значение (например, 99em).
SVG
SVG может включать в себя элемент , который может быть стилизован аналогично любому другому контуру. Они очень хорошо поддерживаются и производительны для анимации, но требуют больше разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина ширины его обводки, если есть) немного меньше viewBox SVG.
clip-path
Это новая техника. Ее поддержка вполне достойная, но менее последовательная. clip-path не влияет на макет элемента, что означает, что оно влияет на обводку и, скорее всего, будет скрывать внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.
Радиальный градиент
Мы можем использовать background-image и radial-gradient, чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его расположение (включая целевой размер касания / клика) не будет затронуто. Это мой наименее любимый метод, потому что края круга могут казаться неровными или нечеткими в зависимости от браузера, но это может хорошо подходить для тонких фоновых деталей.
Центрирование контента
Можно использовать практически любой метод для центрирования вещей с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит слегка смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему еще более заметной.
Сравнение методов центрирования для элементов разных размеров в Safari. Обратите внимание, что некоторые методы имеют более заметный джиттер в положении значка относительно его контейнера.
Это связано с тем, как браузеры рассчитывают субпиксели. Каждый раз, когда мы используем относительные единицы, единицы на основе окра просмотра или значения из модульной шкалы, есть вероятность, что мы просим браузер вычислять дробные значения, например 22.78125px. Когда-нибудь эта проблема может сломать нашу сетку или вызвать другие фундаментальные проблемы. В наши дни браузеры тщательно работают над изменением вычислений в зависимости от элемента, свойства и контекста, но это все равно не идеально.
По моему опыту, самый гибкий метод для центрирования — использовать комбинацию абсолютного позиционирования (чтобы установить центральную точку на основе расположения родительского элемента) и преобразования (чтобы поместить дочерний элемент с помощью относительных вычислений):
Обрезка содержимого
Центрирование это хорошо, но что, если мы хотим заполнить круг изображением?
С помощью HTML / CSS
Мы можем обрезать элемент img до круга, используя border-radius:
Это имеет некоторые ограничения:
Элемент не адаптируется к своему контейнеру.
Мы не можем применить какие-либо внутренние тени, чтобы как-то отделить изображение от фона (кроме как в самом изображении).
Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.
Вот более сложный пример. В нем используется элемент-оболочка, чтобы установить соотношения сторон блока для поддержания квадратных пропорций, в нем улучшается обработка неквадратных изображений с помощью @supports и применяется прозрачная внутренняя тень, чтобы отделить изображение от фона:
С помощью SVG
Мы можем сделать то же самое, используя SVG:
Но поскольку элементы SVG image не поддерживают srcset или sizes, это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.
Субпиксельные промежутки
Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить, что появляются некоторые субпиксельные артефакты:
Светлые пиксели вдоль края, где фон выходит за внутреннюю границу.
К сожалению, я не нашел решения этой проблемы. Кажется, это происходит независимо от техники, используемой для рисования границы или отображения изображения, и это имеет место в некоторой степени в каждом браузере.
Если вы найдете способ наложения круговых эффектов без этих артефактов, пожалуйста, дайте мне знать в комментариях!
Обтекание текстом
Текст! Это основа Интернета. Он заполняет прямоугольники и разбивается на строки. Что мы можем сделать с этим?
Внешний текст
Вы можете задать обтекание текстом вокруг круглой фигуры, используя свойство shape-outside:
Внутренний текст
Стоп! Это, наверное, плохая идея! Сделать его адаптивным практически невозможно! Просто подождите, пока у нас не будет свойства shape-inside!
Точно? Хорошо, хорошо, у Джонатана Скита есть интеллектуальный хак. Он использует псевдо-элементы для установки shape-outside по обе стороны от текста:
Вдоль контура
Мы можем установить текст по изогнутому контуру с помощью SVG и :
К сожалению, поддерживается для не во всех браузерах, но преобразование в не слишком сложное.
Заключение!
Вот и все! Вы прочитали длинную статью о действительно важной теме, прошли по ее минным полям с вложенными заголовками и повторяющимися демонстрациями и обрели знание о кругах в качестве единственной награды! Продолжайте в том же духе, отважный читатель! Я верю в вас!
Автор: Tyler Sticka
Редакция: Команда webformyself.
Как создать текст внутри круга с помощью CSS
Вы хотите создать текст внутри круга с помощью HTML и CSS? Звучит бредово, правда?
На самом деле, нет! Благодаря свойству shape-outside и некоторым трюкам CSS это вполне возможно.
Однако такой вариант вёрстки может оказаться не самым удобным. Необходимо принимать во внимание множество разных нюансов, среди них: количество символов, количество слов, варианты начертания, размер шрифта, форматирование текста и требования к адаптивности. Здесь сложно подогнать всё под один размер. Но давайте всё-таки попытаемся это сделать.
Наша цель: отобразить элемент (цитату) и имя автора в круге. Также мы хотим сделать вёрстку максимально универсальной. Она не потребует каких-либо дополнительных файлов и оставит HTML- разметку без изменений.
Вот к чему мы стремимся:
На момент написания этой статьи функция shape-outside не поддерживается браузерами Internet Explorer и Microsoft Edge 18 и ниже
Начнём с HTML
В конце нам в любом случае понадобится «обёртка» (элемент, который инкапсулирует другие объекты страницы), поэтому давайте используем семантический тэг как внутренний элемент. Содержащая его «обёртка» может быть элементом div:
Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.
Мы помещаем саму цитату в тэг
, а имя автора в тэг . Затем создаём названия классов, которые понадобятся нам при работе с CSS.
Теперь немного базового CSS
Начнем с «обёртки», созданной с помощью элемента div. Сначала устанавливаем минимальный (адаптивный) размер квадрата со значением 300px, чтобы он вписывался в маленькие экраны. Затем придаём свойству position значение relative (позже нам это понадобится).
.quote-wrapper
Теперь делаем так, чтобы цитата заполнила весь блок «обёртки», и имитируем форму круга, применяя к фону функцию radial gradient (Да-да, в этом примере мы не будем использоватьborder-radius).
.text
Обратите внимание, что край со значением 70% выглядит более зазубренным. Я вручную понемногу увеличивал процент и обнаружил, что края с 70.3% выглядят наиболее гладко.
Обратите внимание, край справа более гладкий, чем край слева
Теперь у нас есть основной круг. Добавьте к классу .text следующие стили:
.text
Вот что у нас получилось на данный момент:
Применение CSS к тексту
Давайте для начала добавим стили абзацу:
.text p
После первоначальной публикации этой статьи многие оставили комментарии о том, что существует альтернативная техника, суть которой заключается в использовании функции radial-gradient как свойства shape-outside. Так формируется более гладкая полукруглая прямая по периметру многоугольника.
Давайте применим к цитате псевдоэлемент ::before, чтобы изменить её форму. Вот здесь нам понадобится свойство shape-outside. Мы создаём многоугольник с помощью функции polygon(), устанавливаем координаты его вершин и выравниваем по левой стороне, чтобы текст вписался в фигуру.
.text::before
Теперь давайте поменяем цвет градиентного фона на красный. Точки и соединительные линии полигонов в редакторе путей останутся голубыми. Мы меняем цвет временно для большего контраста с инструментами редактирования.
background: radial-gradient( ellipse at center, rgba(210, 20, 20, 1) 0%, rgba(210, 20, 20, 1) 70%, rgba(210, 20, 20, 0) 70.3% );
Мне нравятся инструменты разработчика в Firefox, потому что там есть очень удобные функции, например, редактор путей для shape-outside. Кликните по фигурке многоугольника в «Инспекторе», чтобы отобразить активную фигуру в окне браузера. Большие пальцы вверх команде разработчиков Mozilla Firefox за создание такого классного интерфейса!
Инструмент редактирования фигур в Firefox также можно применять к значениям clip-path и .
Вот что у нас вышло на этом этапе:
Точки по краям фигуры появляются с помощью инструментов редактирования Firefox
Мы можем сделать то же самое с псевдоэлементом абзаца ::before. Применяем свойство shape-outside, чтобы создать такой же многоугольник, но отзеркаленный, затем выравниваем его по правой стороне.
.text p::before
Выглядит неплохо, но куда делся футер? Он вышел за пределы элемента (в котором расположен круглый цветной фон), поэтому мы не можем увидеть этот белый текст на белом фоне.
Добавляем стили к футеру
Теперь мы можем добавить стили элементу и придать свойству position значение absolute, чтобы вернуть наш футер обратно в границы круга.
.quote-wrapper blockquote footer
Опять же, вы можете поменять цвет фона на тот, который нужен вам.
Вот теперь начинается запутанная часть. Сам текст должен быть стилизован так, чтобы количество слов и символов помещалось в фигуру. Я использовал следующие стили CSS, чтобы правильно его разместить:
- font-size;
- shape-margin (нам нужно исключить две области);
- line-height;
- letter-spacing;
- font-weight;
- font-style;
- min-width и min-height (до размеров элемента, содержащего класс .quote-wrapper).
Добавляем кавычки для красоты
Помните гигантские кавычки на самом первом примере? Их мы и собираемся сейчас сделать.
Мы воспользуемся псевдоэлементом ::before для класса .quote-wrapper. Да, придется сильно заморочиться, чтобы он выглядел хорошо. Я обнаружил, что свойство line-height сильно влияет на положение кавычек по вертикали.
.quote-wrapper::before
Вообще, между изогнутыми (“умными”) и прямыми («тупыми») кавычками есть разница. Я бы посоветовал использовать изогнутые кавычки в диалогах, а прямые кавычки в программировании.
Работаем над адаптивным дизайном
Нам, пожалуй, стоит сделать нашу цитату крупнее на больших экранах. Я установил контрольную точку на 850px, но вы, возможно, захотите использовать что-то другое.
@media (min-width: 850px) < .quote-wrapper < height: 370px; width: 370px; >.quote-wrapper::before < font-size: 300px; >.text p < font-size: 26px; >.quote-wrapper blockquote footer < bottom: 32px; >>
Ну , вот и всё !
Мы поместили текст в фигуру круга, используя комбинацию старых и новых техник CSS, чтобы создать красивый и привлекающий внимание блок с цитатой. И мы добились желаемого результата без каких-либо дополнительных файлов, оставив разметку HTML нетронутой и семантической.
Надеюсь, эта статья мотивировала вас исследовать новые возможности вёрстки со свойством shape-outside. Теперь ждите появления функции shape-inside.