Как сделать шар (не круг)?
155
13 апреля 2019, 04:40
подскажите как сделать шар по средством css, чтобы на нем можно было поставить цифру, например шар номер 3,
Понимаю, что это фото, но реально ли и как сделать похожее?
Answer 1
Посмотрите эту статью, очень подробно все разбирается.
По сути шар/сфера это тот же круг на css, но с добавлением заливки в виде градиента.
.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}<figure class="circle"></figure>После просто добавляете нужную цифру псевдо-элементом, либо дополнительным элементом и позиционируете ее.
Codepen
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46760 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30302 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22903 visits
- Как через css изменить цвет png изображения? 10177 visits
- Blob video url download 9805 visits
- Php curl запрос через прокси с авторизацией 9064 visits
- Работа с captcha vk api 7981 visits
© "hostciti.net" 07.5.2024 | 00:10