Как сделать круг по центру css

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обычный круг

Овал

Полукруг

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

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

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Вы только начинаете изучать веб-разработку и CSS? Вам случалось задуматься, как же создаются все эти прекрасные фигуры, которые можно видеть повсеместно в интернете? Можете больше не терзаться этим вопросом: вы пришли по нужному адресу.

Ниже я объясню самые основы создания геометрических фигур при помощи CSS. Тема эта большая, рассказывать можно очень долго. Поэтому я не буду даже пытаться охватить все инструменты и фигуры. Лучше я дам вам общую идею того, как эти фигуры создаются при помощи CSS.

Создание некоторых фигур требует большего количества приемов, чем создание других. Но вообще для создания фигур при помощи CSS обычно используется комбинация width, height, top, right, left, border, bottom, transform и псевдоэлементов, таких как :before и :after. У нас также есть и более современные CSS-свойства для создания фигур, такие как shape-outside и clip-path. О них я тоже напишу.

CSS-фигуры — базовый способ создания

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

Квадраты и прямоугольники

Создавать квадраты и прямоугольники, пожалуй, проще всего. По умолчанию, div это всегда квадрат или прямоугольник.

Вы устанавливаете ширину и высоту, как показано в коде ниже. Дальше остается только задать цвет фона для элемента. Конечно, вы можете указывать и другие свойства, какие сочтете нужным.

Круги

Почти так же просто создать круг. Для этого мы можем установить border-radius элемента. Таким образом мы сделаем скругление углов.

Если мы установим значение этого свойства на 50%, мы получим круг. А если при этом ширина и высота будут разными, получится овал.

Треугольники

Создавать треугольники немного сложнее. Нам нужно установить границы элемента, чтобы они образовали треугольник. Если элементу установить нулевую ширину и высоту, его шириной станет ширина границы.

Имейте в виду, что края границы элемента находятся под углом в 45 градусов друг к другу. Вот почему этот метод подходит для создания треугольника. Если мы зададим одной границе цвет, а другим границам прозрачность, мы получим треугольник.

Если вам нужно, чтобы вершина треугольника была повернута в другом направлении, вы можете изменить значения border для той стороны, которая должна быть видимой. Или можно повернуть элемент при помощи свойства transform — если вам так больше нравится.

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

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

Но у этого подхода есть один большой недостаток, с которым вы столкнетесь, если захотите, чтобы вашу фигуру обтекал текст (или чтобы текст был вписан в нее). Мы прописываем стили только для обычных HTML-элементов, а текст будет вести себя иначе.

На иллюстрации вы видите треугольник и то, каким образом его обтекает текст.

К счастью, вместо такого подхода мы можем использовать некоторые современные свойства CSS.

CSS-фигуры — другой способ создания

Сегодня мы можем использовать такое свойство CSS как shape-outside. Это свойство позволяет нам определять фигуру, которую должен обтекать текст (или в которую он должен вписываться). Для этого свойства у нас есть несколько базовых фигур:

inset()
circle()
ellipse()
polygon()

Совет! Вы также можете использовать свойство clip-path. С его помощью тоже можно создать нужную фигуру, но это свойство не позволит вам сделать обтекание текстом вокруг фигуры, как при использовании shape-outside.

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

inset()

Базовая фигура inset() используется для создания прямоугольника или квадрата со смещением для обтекания текстом. Вы можете указать, насколько именно текст должен перекрывать фигуру.

Смещение можно установить одинаковое по всем направлениям: inset(20px). Также его можно указывать отдельно для каждого направления: inset(20px 5px 30px 10px).

Можно использовать и другие единицы для смещения, например, проценты. Значения указываются в таком порядке: inset(top right bottom left).

Посмотрите пример кода:

Также можно указать для inset() второе значение, определяющее border-radius смещения. Как здесь:

circle()

В этом случае при помощи свойства shape-outside создается круг. Здесь также нужно применить clip-path с соответствующим значением.

Свойство clip-path может принимать те же значения, что и свойство shape-outside, так что мы можем задать стандартную фигуру circle(), которую мы использовали для shape-outside. Обратите внимание, что я применил для элемента margin 20px, чтобы дать тексту немного пространства.

В этом примере я не указывал радиус круга. Я хотел, чтобы его размер совпадал с div (300px). Если хотите задать кругу его собственный размер, это тоже можно сделать.

Свойство circle() принимает два значения. Первое это радиус, а второе — позиция. Эти значения определяют центр круга.

Я также указал другое значение позиции для clip-path. Поскольку я задал позицию 0%, это обрежет круг наполовину.

ellipse()

Свойство ellipse() работает так же, как и circle(), за исключением того, что в итоге создает не круг, а овал. Вы можете задавать значение X и значение Y: ellipse(25px 50px).

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

polygon()

Изображения

Для создания фигур можно также использовать изображения с прозрачным фоном. Например, как эта прекрасная круглая луна. Это изображение в формате .jpg, с прозрачным фоном.

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

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

Можно ли нарисовать круг, который будет отображаться в большинстве браузеров (IE, Mozilla, Safari), используя только CSS ?

Ну раз уж в вопросе сказано "используя только CSS", то так и отвечу:

Создайте div с одинаковым высотой и шириной, образуя тем самым квадрат (для круга используйте те же величины).
Добавьте border-radius 50%, что сделает квадрат круглым по форме.
Затем вы можете поиграть с фоном-цветом / градиентами / (даже с псевдоэлементами), чтобы создать что-то вроде этого:

Вместо этого вставляется символ круга, с номером unicode 25СF :

А мне не понравился этот прием, потому что даже при 200px уже видны зазубрины изображения. Ловите плюс за труды.

@vp_arth вот не знал, что текст это вектор, спасибо, что просветили.Увеличите масштаб и увидите ступеньки, мне и так видно

Думаю с кодом тут все понятно:

конечно с кодом всё понятно - это стандартный код для получения круга свойствами css/ Для поддержки нового пользователя ловите плюс

Вот миксин для создания круга

@andreymal, а их там и нет. По крайней мере, не в этой форме. В стандарте есть @apply , который по сути тоже миксин.

Поищите инфу про препроцессоры - sass, scss или stylus, это чудесная штука, там есть переменные, функции, вложенность и еще куча классных штук. Если хотите совсем в тренде быть - заодно и про postcss почитайте. Оно позволяет проанализировать код и указывает на ошибки и проблемы несовместимости.

Ещё есть вариант с использованием кругового градиента: