Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Круг css

Поддержи проект!!!

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

Круги CSS

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

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

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

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

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

    1.jpg

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

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

    Результат:

  4. Цифра в круге 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

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

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

    border-color: fbff05;
    3

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

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

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

    div.circle:hover{

    color: #f8f8f8;

    background-color: #000000;

    border-color: #000000;

    }

    Результат:

    3

  7. Круг 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>

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


Вас может еще заинтересовать список тем : #CSS | #CSS_SHAPE | #CSS_BOOK |
Последняя дата редактирования : 2020-02-28 07:00
https://dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
css круг сделать круг как сделать круг в css css текст по кругу картинка в круге css html круг css картинка в круге css css цифра в круге как нарисовать круг в css css border radius круг css изображение в круге текст внутри круга css html нарисовать круг цветовой круг html html круг csscss круг без заливкирисование красного круга csscss окружность

Последние комментарии :
Марат :
08/08/2020 08:59
Нам в очередной раз добавили десяточку, теперь у нас …
подробнее.
Марат :
02/08/2020 12:22
Никогда не задавался такой целью, сделать "клик без onclick"!Как мне кажется, "onclick" и придумали, чтобы отследить…
подробнее.
Darya :
01/08/2020 10:52
А можно сделать клик без…
подробнее.
Марат :
12/07/2020 11:14
Превратите код в html…
подробнее.
Владимир :
11/07/2020 10:29
Строка не прошла, как ее написать…
подробнее.