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 are supported by FF3.6+, Opera 10.50, Safari 2+ and Google Chrome.

See also:
CSS3 Rounded Corners, CSS3 Shadow, CSS3 Animation, CSS3 Text Shadow, CSS3 Gradient, CSS3 Transition

Download

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

CSS3 Gradient Colors on Objects and Backgrounds with CSS3 Menu

Solid color tones are gradually weeded out from the web as they are becoming old-fashioned in the eyes of Internet users. While world-renowned online resources like Wikipedia with their minimalistic design style can still pull it off, most other websites must fight for their visitors’ attention with any means necessary.

CSS3, the latest version of website-enriching coding language that focuses on style and design features, supports gradient colors, which can be added to different objects and page elements or function as backgrounds. Everything is already built into the code and compatible with most versions of latest Internet browsers, such as Internet Explorer, Firefox and Opera.

This is a major innovation on part of CSS3 developers, as previously web designers were forced to use images to replicate the effect of gradient colors on their sites. Buttons and sections of the website were pre-made in image editing software like Photoshop. The same went for backgrounds, only they were grouped in tiles or stretched across the whole screen, resulting in a somewhat clumsy likeness of a full-fledged gradient color. Alternatively, web developers created one large gradient background to occupy the whole screen, resulting in a relatively small, but unnecessary increase in load time for site visitors and webmasters’ traffic costs.

While some of them were able to achieve good results with these techniques, others were not as lucky or skilled. Fortunately, everything changed with the introduction of CSS3 gradient feature. It allows fully customizable and scalable gradient areas to be placed within the website and later layered, combined or otherwise adjusted for your individual needs and vision.

CSS3 gradient in web menu will increase its appeal to the visitors, make it look sleek and polished. If you browse the Internet’s most visited sites for a moment, you will see that they all employ such techniques for their navigation menus and individual buttons. Gradients convey the look of the future and even if your site will not be praised by its excellent use of gradients, not using them will make it look dated.

The only downside is that it is hard to get the right gradients with CSS code alone and professional web development software is too expensive if all you need to do is create a unique navigation bar for your website. Even the free web resources that preview different combinations of gradient colors are not of much use, because they cannot be used in combination will all other elements you have planned for your navigation menu.

This is where CSS3 Menu steps in. Website owners who know exactly what they need and have a basic understanding of style and design will find this free software very easy to work with and create unique and versatile navigation menus from scratch in less than a hour, available to be published on their website immediately.

Even if you are not sure if CSS3 gradients are right for your website, CSS3 Menu allows you to compare it to other color styles without wasting much time.

Download