CSS3 Shadow Block Menu
Author: Dynamic Drive
This CSS Menu harnesses CSS3's ability to define multiple/ inset shadows (so the shadow grows inwards) on an element to create menu items with bevelled edges and a growing inner glow when the mouse rolls over them. CSS3 animation is enabled to gradually transition between various property changes.
Initially each item carries has the below CSS shadow added to it:
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
Whenever onmouseover, the below shadow is instead applied to the menu item:
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
Here two layers of shadows are added to the element. To layer multiple shadows onto an element, simply separate each
definition with a comma inside the same "
CSS Shadow Block Menu works best in a modern browser that supports CSS3 and CSS3 transitions; in older browsers, users simply will not see the CSS3 animation, or in the worst case scenario, the shadow neither. The menu remains fully presentable in those cases.
The Sample Images (credits: onebit large icons):
(check the CSS to make sure the path to the images are correct depending on where you've saved them).