Saturday, April 19, 2008
CSS Gradients in WebKit
byRecently on Surfin’ Safari, WebKit—the engine used for Apple’s Safari browser—introduced CSS (Cascading Style Sheets) gradients in their latest nightly builds. The ability to create gradients with code and without the need for Photoshop or other image editing applications is a great enhancement in giving developers more flexibility when it comes to adding depth found in modern web design.
I can imagine how much easier prototyping a site will be, especially one with frequent design changes. Forget all those image files, pick from and to color values, configure them in a CSS declaration and you’re done. I hope other Web browsers follow WebKit’s lead and help get this functionality into a future specification.
CSS gradients in WebKit can be set as either linear or radial with the following syntax: -webkit-gradient( ... ). A mix of values and functions like type, point, radius and stop (color) are used to set the gradient you want to create. Usage is very broad and can be set anywhere image URLs were set before, this includes:
- gradients as backgrounds
- border image gradients
- list bullet gradients
- generated content gradients
After absorbing as much as I could from the article in my usual speed-skimming style of reading my RSS feeds, I was excited to try out the code myself. With the latest nightly build of WebKit (version r31916) and some demo code from Surfin’ Safari, I started a minimalist representation of the Sundog.net masthead. Although I may need to expand my understanding of point values from WebKit’s article, I was happy with my results.
The biggest challenge was to nest an element within the main masthead element (blue linear gradient) and set a white radial gradient behind the logo, essentially layering two gradients over each other. Setting the color-stop function to transparent on the nested radial gradient was fairly simple and it achieved the look I was after.
If you are interested in CSS gradients and would like to try them out yourself, make sure you download the latest build of WebKit and check out my example.
