The days of creating a (1pixel * height/width) of image for a gradient background is over. Modern browsers are supporting CSS3 to an extent that you can create nice-looking backgrounds for button or wallpaper entirely from stylesheet.
| Webkit | |
| Syntax | -webkit-gradient( |
| Example | background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); |
| Params | - Gradient Type: linear / radial - X and Y axis coordinates of where to begin: (0 0 – or left-top corner) - X and Y axis coordinates of where to conclude: (0 100% – or left-bottom corner) - Color to begin with: (from(red)) Color to end with: (to(blue)) |
| Mozilla | |
| Syntax | -moz-linear-gradient( [ |
| Example | background: -moz-linear-gradient(top, red, blue); |
| Params | - Type of gradient "linear" is specified within the vendor extension - Where to begin? (top – we could also pass in degrees, as in -45deg) - Color to start with? (red) - Color to end with? (blue) |
As for HTML,
<button class="orange" id="test" name="test">Press me</button>Click here
HTML code is escaped using htmlescape.net
No comments:
Post a Comment