Border-radius applies a radius to the corners of our borders<\/a>, rounding them. If we set a border-radius of 50%, the corners are automatically rounded to 50% of the width\/height of the element. Instant circle.<\/p>\n![\"css-sphere-2\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/01\/css-sphere-2.png\")
<\/p>\n
So now we have a circle, but it doesn\u2019t look very three-dimensional. For that, we\u2019ll turn to the realm of design, and play with light and shadow. (Note: as I\u2019ve mentioned many times, I am NOT a designer. Take any design advice you get from me with a big grain of salt. Maybe a salt lick.)<\/p>\n
Shadow is an easy way to create a sense of depth in a two-dimensional space. If we use an inset box-shadow (so the shadow is on our element, not behind it, we can shade our sphere.<\/p>\n
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);<\/pre>\nA few things to note about how I\u2019m using the box-shadow here. The first item, inset, means the shadow is inside the element. Then I set the distance the shadow extends from the left side (-25px means it will extend 25px from the RIGHT side), the distance from the top (again, negative puts it on the bottom), and the amount of blur to add to the shadow (zero means a sharp line, bigger numbers mean more blur). Then I\u2019m setting the color of the shadow using rgba, which allows me to use transparency in my color. I\u2019m setting it to a 50% transparent black, which allows the blue to show through and makes the shadow look more like true shading.<\/p>\n
![\"css-sphere-3\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/01\/css-sphere-3.png\")
<\/p>\n
Now honestly, in my opinion this is pretty close already. But we can go one step further to make it more realistic. Where there are shadows, there is light. So let\u2019s add some light to our sphere.<\/p>\n
Because the shadow is on the lower-right quadrant, the light must be coming from the upper-left side. I could technically use another inset drop-shadow here, but as you can see from the image above, drop shadows curve along the edge of the object. While I think that looks okay for this one shadow, adding the light in the same way starts to look strange. Instead, we\u2019ll use a linear gradient to apply our light.<\/p>\n
\nbackground-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);\nbackground-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%); \nbackground-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);\nbackground-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);<\/pre>\nGradients in CSS are applied as background images. I\u2019m using browser prefixes to apply my gradient in each of the modern browsers (I\u2019m not using the non-prefixed W3C version because Firefox seems to be misinterpreting it). <\/p>\n
We\u2019re using an rgba color again (30% opaque white) to create a feeling of light on that side. The -45deg part rotates the gradient from its default top-to-bottom 45 degrees counter-clockwise, so that it starts from the top-left corner. We\u2019re fading the gradient to transparent over the length of the entire circle. We could stop the light at 50% (like it would in a real sphere), but I felt that created too hard of a line for my tastes.<\/p>\n
And now our sphere is complete! You can see a demo below, and click through to play around with the code.<\/p>\n
<\/code><\/pre>\n
![\"CSS](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/01\/css-sphere-4.png\")
<\/p>\n![\"CSS](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/01\/css-sphere-1.png\")
<\/p>\n