I particularly like the subtle shadowing on my header and menu buttons.
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
box-shadow: 0 10px 20px rgba(0,0,0,0.21),
0 1px 20px rgba(0,0,0, 0.24);
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
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.
- My page on CSS
- My RWD css file - where I use this technique
- css Pseudo elements - also Pseudo Classes
CSS box-shadow - January 2021