Killer WebKit
As a follow up to yesterday’s woeful tale of using WebKit’s proprietary css properties, I wanted to follow up with a couple examples of how one can use these features without getting all “bevel-ly”
The only benefit of text-shadow is not downloading graphics for what can be expressed in css. The same goes for -webkit-border-image, -webkit-gradient, -moz-border-radius, anything that keeps a web designer from having to launch Photoshop is a boon to bandwidth.
Here are two examples of using some WebKit css gradients.*
Update: You must have the Chrome 2.0 or Safari 4.b for these to work.
Example 1. is brought to you by “Killer Queen”
This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.
Example 2. is a css calendar.
This one combines linear gradients and javascript arrays. Because -webkit-gradient can use rbga formatting in place of the usual hexadecimal value, calculating the values from color to another was much easier.
The drawback to these browser specific properties are, well, browser specific. While adding a gradient value to your div id=wrapper might give it a groovy drop shadow effect on Safari, nothing is happening on either Firefox, and much less for IE.
The workaround at this point is to browser detect.
if(jQuery.browser.safari) {
$('#wrapper').addClass('problem-solved');
}
else {
$('#wrapper').addClass('wah-wah-wah');
}
Or whatever.
Pingback: Ajaxian » CSS Gradients in Action
Actually, browser detection isn’t neccessary. I recently wrote a method capable of detecting support for any CSS styles in Javascript; http://ryanmorr.com/archives/detecting-browser-css-style-support
“The only benefit of text-shadow is not downloading graphics for what can be expressed in css.”
I’m going to disagree there, there are plenty of benefits other than reducing bandwidth. The other css properties you mentioned, yes those benefits are mostly just visual/graphic. But text styles are much, much different. Off the top of my head:
- There are SEO improvements by using HTML text instead of images
- likewise there are improvements with compatibility with vision impaired people using screenreaders
- people with reduced visual acuity can apply custom styles to increase the font size of css/html text that they wouldn’t be able to with images (in the same way), and pages can be designed to flow around this modification
- HTML text responds to browsers’ find-in-page functions so users will be able jump to text while they couldn’t jump to text in image
- you can specify a simpler print style, reducing the ink use dramatically by not having to print an entire image
- the content is much easier to make dynamic (updating via DHTML/Ajax/etc), or just to show dynamic content (e.g. displaying a data-derived page title in a content management system)
- the text is selectable
Good examples of css gradients though, that album example in particular was just beautiful. Thanks for the post!
I totally agree with that. I suppose my take on text shadow come from already avoiding using graphics in place of text to begin with (or as much as possible). Text-shadow is just adding in an effect that I’ve already let go of.