Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

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 box shadow definition with a comma inside the same "box-shadow" property.

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 CSS:


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).

Code Info

Rate this code:

Date Posted: 04/02/2012

Revision History: None

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive