CSS3 Shadow

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop!
The box-shadow property takes several attributes/values, like any other CSS property, and these are are specified in order as follows: box-shadow: Apx Bpx Cpx #XXX:
      * Apx - Horizontal offset of the shadow: use positive value for right, and a negative value for left shadow;
      * Bpx - Vertical offset: use a negative value to add top shadow, with positive value the shadow will be below the box;
      * Cpx - The blur radius: a value of 0 makes the shadow sharp, the higher the number, the more blurred;
      * #XXX - Color.

The following code is generated for the box-shadow in CSS3Menu:
-moz-box-shadow:0.7px 1px 1px #777777;
-webkit-box-shadow:0.7px 1px 1px #777777;
box-shadow:0.7px 1px 1px #777777;

Here's a snapshot from Firefox showing the box-shadow effect:

The box-shadow is supported by the following browsers: Webkit (from Safari 3+, Chrome), Opera 10.5, Firefox 3.5.

The text-shadow property is used as follows:
text-shadow:2px 2px 2px #000;

CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. Offsets may be negative or positive.

The text-shadow is supported by the following browsers: Webkit (from Safari 3+, Chrome), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror.

See also:
CSS3 Rounded Corners
CSS3 Gradient

Download

• Download Free Edition
  for Windows & Mac
• Download Commercial Edition
  for Windows & Mac - $59

Help

How to Build a Cool Animated CSS3 Menu with no Javascript

1) Open CSS3 Menu software and click "Add item" and "Add submenu" buttons situated on the CSS3 Menu Toolbar to create your menu. You can also use "Delete item" to delete some buttons.

2) Use ready to use Templates. To do it just select theme you like in the "Templates" list. Double-click the theme you like to apply it.

3) Adjust appearance of the menu.
 3.1. Select item by clicking it and change button appearance for normal and hover states and set buttons link properties and link target attributes on the "Main menu" tab.
 3.2. Select submenu's item by clicking it and change submenu's appearance for normal and hover states and set submenu's item link properties and link target attributes on the "Submenu" tab.

4) Save your menu.
 4.1. Save your project file. To save project just click "Save" button on the Toolbar or select "Save" or "Save As…" in the Main menu.
 4.2. Publish your menu in the HTML format. To do it click "Publish" button on the Toolbar.

Contact US

CSS3 Menu
For troubleshooting, feature requests, and general help, contact Customer Support at . Make sure to include details on your browser, operating system, CSS3 Menu version, link to your page.
In most cases you'll get a reply within 1 business day. Please read the FAQs first to see if your question has already been answered.
E-mail: