Is it possible to create a simple sphere using CSS? I’m thinking of something like a 3D sphere.
Answer
I didn’t love the answers and comments already provided; too much code for a simple sphere in html – css. You can simply do:
<div class = "sphere">Test</div>
The CSS:
body {
background: #333;
}
.sphere {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color: #FFF;
margin: 100px auto;
/* The magic are those 2 lines: */
border-radius: 100%;
box-shadow: inset 0 0 80px #FFF;
}
Then I wanted to challenge myself and so some more complex stuff. This is the result:
The HTML:
<div class = "sphere a">This</div>
<div class = "sphere b">Is</div>
<div class = "sphere c">A</div>
<div class = "sphere d">Test</div>
The CSS:
body {
background: #333;
}
.sphere {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
position: absolute;
margin: -100px;
border-radius: 100%;
box-shadow: inset 0 0 80px #FFF;
color: #FFF;
}
.a {
top: 10%;
left: 20%;
}
.b {
top: 30%;
left: 60%;
}
.c {
top: 60%;
left: 40%;
}
.d {
top: 80%;
left: 70%;
}
Attribution
Source : Link , Question Author : SomeAmbigiousUserName , Answer Author : Francisco Presencia