CSS3 Gradient

Gradients are some of the best effects you can add to informational websites, as they are not distracting. You can add gradients for Safari, Chrome, and Firefox; this will cover over half of your visitors for some kinds of sites.

Here's a snapshot from Firefox showing the CSS3 Gradients:

The syntax for CSS3 Linear Gradients differs between the Firefox and Safari/Chrome version.
   Firefox Linear gradients:
-moz-linear-gradient(<point> || <angle>, color-stops)
   Safari, Chrome Linear gradients
-webkit-gradient(linear, <point>, color-stops )

* Point or angle: This is used to define the starting point of the gradient. The value can be a percentage (%), in pixels, or "left", "center", or "right" for horizontal and "top", "center", or "bottom" for vertical positioning. If a horizontal or vertical position is not specified, the value defaults to "center", or 50%. In Firefox, angle values are also accepted, such as 45deg.
* color-stops: Colors in which the gradient should transition to and from. If more than two colors are specified with no explicit stop value for each color, the gradient will transition from one to the next evenly until the final stopping color.
      - In Firefox, each color stop follows the syntax: <color> [ <percentage> | <length> ]. If a percentage (0 to 100%) or length value (0 to 1.0) is defined following the color name, the previous color will fade to that stop color at that stop point. If no value is present, the color will be fade out gradually from the start color to the end color.
      - In Safari, each color stop follows the syntax: color-stop(value, color). Stop value is either a percentage (0 to 100%) or length value (0 to 1.0), or from(color) and to(color). The later two are shorthand functions equivalent to color-stop(0, color) and color-stop(1.0, color).

The following code is generated for the CSS3 gradient in CSS3Menu:
background-image: -moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));
background-image: -webkit-gradient(linear,50% 0%,50% 100%, from(rgba(255,255,255,0.38)), to(rgba(255,255,255,0.16)));

CSS Gradients is supported in FF3.6+, Opera 10.50, Safari 2+ and Google Chrome.

See also:
CSS3 Rounded Corners
CSS3 Shadow

Download

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.
E-mail: