edit - tried them in IE6/7, they don't degrade that gracefully. They exist and work fine as buttons, but visually it's hard to tell that they are. If you use this I'd recommend adding a :hover on the span's background color as well just so a user knows to click the thing.
I use them on nearly all of my projects.
Also, the markup Posterous uses is more verbose than it needs to be. We figured out a way use plain 'ol <button/> or <a/> tags and style them as buttons. Maybe I'll blog about that when we roll this stuff out.
Visually, those buttons look good.
background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20)));
background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99dcdcdc', endColorstr='#33000000');
We gotta stop sometimes and think .. what are we trying to achieve exactly? Strikes me almost as an extreme diet that excludes 100% of fat from your intake just for the sake of having no fat irregardless if it's healthy or causes you to lose weight.
But in the "cool project" nerdy line of thinking .. it's pretty neat.
If someone's willing to take the time to figure it out, it is not wasted. If indeed it is more efficient to draw buttons this way than to use an image, it makes sense to do this.
You need a truckload of CSS to define how a button looks but you only need to do it once. Creating arbitrarily colored and sized buttons is as easy as adding one or two lines of CSS. And at some point in the future we will actually be able to drop the prefixes and the CSS will become quite elegant and compact.
Here's unminified CSS: http://pastie.org/1097542
False. Webkit extensions, mozilla extensions, and internet explorer extensions are NOT pure CSS3. They are ugly browser hacks. This is hard-coded to only work on the Big 3 and will never work on Opera, thanks for not supporting browser freedom.
So... how about you get that big chip off your shoulder and let people get on with their work?
>To achieve these effects, I needed a small truckload of CSS
>Once the standards go final and the browsers get compliant implementations, the vendor prefixes will go away.
So the implementation is excessively long, temporary, and to be changed to something more standards compliant at a later date. Seems like the definition of "ugly hack" to me.
And I'm not talking about supporting an outdated browser like IE6 here. I'm talking about a browser whose public releases support more "pure CSS3" than both Gecko and WebKit.
The idea is that until the standard goes final and the implementation has been checked against it, you can't know that the implementation is correct or even that the syntax for the feature will be the same in the final version. So rather than yank the rug out from under people later on, you use a vendor prefix until the standard is finalized and the implementation's checked out. Then people can drop the vendor prefix.
I'm talking about a browser whose public releases support more "pure CSS3" than both Gecko and WebKit.
And... well, Opera's doing it wrong. CSS3 is not finalized. CSS3 may go final with subtle or even significant differences from the current spec. And then anyone who relied on Opera's implementation and patted themselves on the back for being so ahead of the game will instead be up a creek.
I wouldn't care if it was supposed to be some sort of academic tech-demo, but in the comments the author says:
>On Posterous they are going to be used in many places
CSS can't handle it all on its own is the point. And yes I'd rather incur the extra bandwidth of a 1px wide crushed PNG in order to have simpler code and have my site support all-browsers, including ones whose team made good CSS a priority before other browsers did. Rewarding the large monoliths by coding specifically for them simply because of their popularity while punishing teams that actually prioritized CSS is what got us into this mess in the first place. Would you encourage this behavior pre-CSS4? pre-CSS5?