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

#html #css

подскажите как сделать шар по средством css, чтобы на нем можно было поставить цифру,
например шар номер 3, 

Понимаю, что это фото, но реально ли и как сделать похожее?
    

Ответы

Ответ 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);
}





После просто добавляете нужную цифру псевдо-элементом, либо дополнительным элементом
и позиционируете ее.

Codepen