In this personel work I'd like to show how to create attractive images from pure CSS3 and HTML5. Because astronomy has always fascinated me, I went on a journey through our solar system, to find out what is possible with the radial-gradient() CSS3 function.
My goal was not to recreate photorealistic images of actual planets. In particular, the images do not claim to be scientific. It's just a matter of testing the possibilities and creating attractive images.
All images have in common that they use at least one or a combination of several CSS3 radial gradients.
Let's start our journey!
Horizon
Crescent
Red Planet
Looks like Uranus
Increasing Moon
Interstellar Travel
Atmospheric Haze
Atmospheric Haze 2
Total Solar Eclipse
Example of how to use the radial gradient to simulate a total solar eclipse:
A gradient at the center of its container, starting with black for the covered surface of the sun, changing to a small orange circle, which transitions into a slightly wider, transparent orange circle for the corona and after all finishing transparent.
Link to my CSS3 Art Gallery project page.