Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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

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

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.