Вход
Быстрая регистрация
Если вы у нас впервые: О проекте FAQ
2

Как сделать шар в HTML/CSS?

Skiyers [83.2K] 8 месяцев назад
1

Это не очень и сложно. Как полностью сделать шар я точно не знаю, но можно сделать что-то на подобии этого.

Нам понадобится вот такой код html :

<div class="circle"></div­>

<div class="circle ball"></div>

И код CSS:

circle {

display: inline-block;

width: 40%;

padding-top: 40%;

border-radius: 100%;

background: #7ec4fd;

}

ball {

background: radial-gradient(circ­le at 80% 20%, #fff 2%, #7ec4fd);

box-shadow: 60px -80px 80px rgba(0,0,0,.5) inset;

}

Можно еще поэкспериментировать и добиться лучшего вида.

автор вопроса выбрал этот ответ лучшим
0

К сожалению, объёмный шар по аналогии с кубом средствами CSS оформить не получится. Поэтому придется играться с цветом обычного круга, созданного из дива с помощью border-radius. Придать ему эффект обобьём поможет градиентная заливка. Отметьте самую светлую точку, на которую якобы падает освещение, создайте градиент и добавьте к кругу тень.

Если вам нужно сделать вращающийся шар, то придется анимировать то, что изображено на нем.

Знаете ответ?
Есть интересный вопрос? Задайте его нашему сообществу, у нас наверняка найдется ответ!
Делитесь опытом и знаниями, зарабатывайте награды и репутацию, заводите новых интересных друзей!
Задавайте интересные вопросы, давайте качественные ответы и зарабатывайте деньги. Подробнее..
регистрация
OpenID