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

CSS Library: Vertical CSS Menus: Here

Vertical CSS3 Shadow Menu

Author: Dynamic Drive

This CSS Menu uses CSS3's ability to define multiple/ inset shadows (so the shadow grows inwards) on an element to create menu items with a bevelled left edge and a growing inner glow when the mouse rolls over them. CSS3 animation is enabled to gradually transition between various property changes. When the mouse rolls over a menu item, 3 inner shadows of the same color but varying strengths and opacity are applied to it:

box-shadow: inset 7px 0 10px rgba(216,89,39, 0.4), inset 0 0 15px rgba(216,89,39, 0.6);

When defining multiple shadows, simply separate each one with a comma within the same border-shadow property.

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 12/17/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 2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.