Как сделать шар (не круг)?

184
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

READ ALSO
Не получается изменить фон через :checked на css
HTML

Не получается изменить фон через :checked на css

Есть вот такой код, по идеи при нажатии на radio кнопку должен backround цвет div`a, но этого почему-то не происходитВроде все просто, но не понятно

 162
Как скрыть элемент при появлении disabled=&ldquo;disabled&rdquo;?
HTML

Как скрыть элемент при появлении disabled=“disabled”?

Необходимо чтобы одному блоку присваивался:

 178
Эффект перекатывания на css
HTML

Эффект перекатывания на css

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

 186
Как сделать анимацию чёрных силуэтов
HTML

Как сделать анимацию чёрных силуэтов

Необходимо сделать анимацию пары черных силуэтов

 190