Glowing effect on orb/sphere/ball/globe in css

Question

I have been attempting to make a glowing effect on a sphere in terms of internal 'shiny sphere' patterns, but have become stuck with the likes of positioning some aspects of the 'globe'.

As it currently stands, my css looks like:

 .sphere { height: 200px; width: 200px; background-color: red; border-radius: 50%; text-align: center; vertical-align: middle; line-height: 200px; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; } .sphere::after { background-color: rgba(255, 255, 255, 1); content: ''; height: 15%; width: 2%; position: absolute; top: 0.25%; left: 3%; border-radius: 50%; transform: rotate(45deg); } .sphere2 { height: 200px; width: 200px; background-color: yellow; border-radius: 50%; text-align: center; vertical-align: middle; line-height: 200px; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; } .shine { background-color: rgba(255, 255, 255, 0.5); content: ''; height: 50%; width: 15%; left: 18%; top: 0%; position: relative; border-radius: 50%; transform: rotate(45deg); } 

 <div class="sphere">High Importance</div> <div class="sphere2"> <div class="shine"></div> Important </div> 

CODEPEN

But the 'shine' effect on either sphere won't 'stay' in place. (Neither attempts full work).

Would anyone be able to point me in the right direction as to position these correctly (in the top left hand side, with a small margin)?

This will hopefully/eventually look similar to this (without the animated effect, that is)

Any advice would be much appreciated at this point (and i hope you can see where i'm going with this design, as i wish for it to be dynamically sized).

Answer 1

Just remember when you use absolute position you need to define the relative parent to position, this will be the closest with a non-static position defined. Try:

.sphere{
  position:relative;
}
.sphere::after{
  background-color: rgba(255,255,255,.5);
  content:'';
  height:50%;
  width: 15%;
  left:18%;
  top:0%;
  position:absolute;
  border-radius:50%;
  transform: rotate(45deg);
}

Codepen Updated

Answer 2

Position your .sphere and .sphere2 relatively and the ::after :pseudo-elements absolutely and give them same top and left values.

codepen

 .sphere { position: relative; height: 200px; width: 200px; background-color: red; border-radius: 50%; text-align: center; vertical-align: middle; line-height: 200px; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; } .sphere::after, .sphere2::after { background-color: rgba(255, 255, 255, 1); content: ''; height: 40%; width: 10%; position: absolute; top: 8%; left: 14%; border-radius: 50%; transform: rotate(45deg); } .sphere2 { height: 200px; width: 200px; position: relative; background-color: yellow; border-radius: 50%; text-align: center; vertical-align: middle; line-height: 200px; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; } .sphere2::after { background-color: rgba(255, 255, 255, 0.5); content: ''; position: absolute; border-radius: 50%; transform: rotate(45deg); } 

 <div class="sphere">High Importance</div> <div class="sphere2"> <div class="shine"></div> Important </div>