Kdn

The latest version of the webkit nightly builds support the border-radius property (and -webkit-border-radius). It looks like CSS3 specifications for border-radius is going to be locked down soon. Here is a link to an article with an overview on how the browsers render the standard.

As explained in my portfolio the idea behind this site, was to create a website without using any images for the design. If you are viewing this site with Safari or one of the nightly webkit builds you might notice the gradient in the header. That is what this article is about.
Example page

Linear gradient markup

background: -webkit-gradient(
linear, /* Type of gradient */
0 0, /* Left-, top- position */
0% 100%, /* Left-, top- position */
from(rgb(0,0,255)), /* Starting color */
color-stop(0.7, orange), /* specifies the location of a gradient stop and the color it has */
 to(red)); /* end color */

Radial gradient markup

background: -webkit-gradient(
radial, /* Type of gradient */
150 80, /* center location of the center of the circle */
10, /* Size of the center of the circle */
120 80, /* center location of the outside of the circle */
130, /* Size of the center of the circle */
from(rgb(255,255,255)), /* Color to the center of the gradient */
color-stop(0.5, orange), /* specifies the location of a gradient stop and the color it has -> I dont use it in my header. */
to(rgba(255,255,255, 0))); /* the end color */

As you can see in the header I don`t use the specified color-stop.

Some notes

• Location can be specified with a number and %
• Color can be specified with color name, hex, rgb and rgba

So whats the cool things you can do with this?

Button with highlight and a hover effect.

.bevelandemboss{
width: 100px;
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,255,0,0.3)), to(rgba(0,255,0,1))),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(50, 255, 50, 0.7)));
-webkit-border-radius:10px;
color: #333;
font-size: 1.5em;
text-align: center;
text-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
.bevelandemboss:hover{
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgb(0,255,0)), color-stop(0.5, rgba(0,255,0,0.5)), to(green)),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(100, 255, 100, 0)));
cursor: pointer;
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.4);
}