ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Круг css

Различные круги в css, просто круг css, круг с цветом css, кург css с картинкой внури, с цифрой, и изменяемым задним фоном - это наши темы...

Css - это необыкновенный инструмент, с помощью котрого вы можете сделать то, что даже не можете себе представить!

И когда пишут круг в html то я бы хотел посмотреть, как вы без css нарисуете круг!

Что самое интересное, что я когда-то и не знал, что такое css, но мы не будем отвлекаться!

Вообще сделаем несколько вариантов кругов в css:

1.

Давайте нарисуем простой круг css .

Нам нужно создать див с классом, не мудрствуя назовем его Circle:

<div class="Circle"></div>

Далее создадим либо файл css и туда запишем все стили. Либо же здесь на странице напишем так:

Высоту и ширину сделаем по 100px.

width: 100px; height: 100px;

Сделаем бордюр шириной 1 px, и непрерыной линией(solid)

border: 1px solid;

Далее поделим пополам ширину и получим радиус бордюра.

border-radius: 50px;

Ну и далее покраим бордюр, например в красный.

color: red;

Итого у нас получился код:

.Circle{

width: 100px;

height: 100px;

border: 1px solid;

border-radius: 50px;

color: red;

}

Результат:

2.

Заливка круга цветом.

К верхним стилям добавим заливку:

background-color: red;

Результат:

3.

Изображение в круге css .

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

1.jpg

Для того, чтобы сделать изображение в круге, нужно взять предыдущий код, изменить заливку на задний фон картинкой:

background-image: url(https://dwweb.ru/__a-data/FOTO/css/figure/bear.jpg);

Результат:

4.

Сss цифра в круге

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

Можно поиграться с цветами внутри круга - background-color

.Circle {

width: 30px;

height: 30px;

border: 1px solid;

border-radius: 15px;

line-height: 27px;

text-align: center;

background-color: #0c0c0c;

color: #f8f8f8;

font-family: bold;

}

Обратите внимание, что на желтом сыграл цвет бордюра черным, а на других цветах, бордюра не видно... кроме белого!

Результат:

1
2
3
4
5
6

Круг css с бордюром того же цвета, что и задний фон

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

border-color: fbff05;
3
5.

Изменение цвета в круге при наведении css

Мы уже разбирали тему hover - давайте ради интереса применим данное свойство в круге css.

Возьмем предыдущий код для курга и добавим hover к нему

div.circle:hover{

color: #f8f8f8;

background-color: #000000;

border-color: #000000;

}

Результат:

3
Не забудь !С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
css круг сделать круг как сделать круг в css css текст по кругу картинка в круге css html круг css картинка в круге css css цифра в круге как нарисовать круг в css css border radius круг css изображение в круге текст внутри круга css html нарисовать круг цветовой круг html html круг css

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019