Круг css

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

Круги CSS

1. Простой круг css .
2. Круг css с цветным задним фоном.
3. Изображение в круге css .
4. Цифра в круге css
5. Круг css с бордюром того же цвета, что и задний фон
6. Изменение цвета в круге при наведении css
7. Круг css с эффектом тени вокруг

Простой круг 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;

}

Результат:




Круг css с цветным задним фоном.

Для того,чтобы залить цветом наш круг, нам понадобится свойство background или background-color, возьмем выше идущий круг и добавим к нему заливку, цвет заливки выберем... ну пусть это будет красный:

background-color: red;

Пример круг css с цветным задним фоном через background-color




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

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



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

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

Результат:




Цифра в круге css

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

Можно поиграться с цветами внутри круга - 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



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

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

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

div.circle:hover{
color: #f8f8f8;
background-color: #000000;
border-color: #000000;
}

Результат:

3



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

Как сделать круг css с эффектом тени вокруг круга! Получится такой эффект, как будто круг будет парить натд холстом!

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

.circle_shadow{

width: 100px;

height: 100px;

border: 3px solid;

border-radius: 50px;

color: #adadad;

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

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22);}

И для создания тени, нам понадобится собственно блок, к которому прикрепим данный класс!

<div class ="circle_shadow"></div>

Результат - тень вокруг окружности