Sun Dial Menu
How to create a shadow using CSS
Menu How to create a shadow using CSS
 

How to create a shadow using CSS

I particularly like the subtle shadowing on my header and menu buttons.

Some text

The example above is based on the menu button that I was using at the time of writing this page. See the example of an actual menu button on my css page

the code

box-shadow: 0 10px 20px rgba(0,0,0,0.21),
0 1px 20px rgba(0,0,0, 0.24);

syntax:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Top

I am not sure if I have all the property values correct.
But here they are:

Horizontal offset is zero - shadow is just below
Vertical offest is 10px - shadow is below the box
blur (radius) is 20px or maybe this is the spread as they are both optional
color is rgba(0,0,0,0.21)

Actually I have two shadows but the second can hardly be seen.

Links

External

Site design by Tempusfugit Web Design -