Super Awesome Buttons with CSS3 and RGBA. We've updated the super awesome buttons demo to include the button element and Mozilla box shadows.
Check it out! We love CSS at ZURB. We love it so much that we're using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation. One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. The Button Here's what we're looking at: Our original button we'll use to show how RGBA colors rock your world.
It's a simple button made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow. Not too shabby considering it's nearly all done with CSS. Making it Scale with RGBA Small Details. There, now we have our super awesome button with some alpha blending added in. Done Deal. CSS Selectors and Pseudo Selectors and browser support. This page has not been updated for some time and some of the browser versions are obsolete - I'm working on a better format for the page, so check back every now and then :) The following is a range of CSS tests of the most common browsers' support for selectors and pseudo selectors.
The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you feel like reading more about the selectors and which attributes they support, the W3C is the place to go! If you spot any errors (it happens to us all...) or have any comments, I'm on Twitter as @overflowhidden. Click here to see this page's history. :hover only works for a-elements in IE6. History (not complete): 2011.04.13: I've discovered a bug in Google Chrome regarding the adjacent selectors and created a test page to demonstrate the problem. 2010.03.18: Opera 10b3 replaced with Opera 10.5 beta. Overview of CSS3 Structural pseudo-classes. Overview of CSS3 Structural pseudo-classes Date posted: October 2nd, 2008 CSS's goal of "separating style from content" relies heavily on its ability to reach that content first.
Well, in CSS3, that mission is bolstered by the addition of Structural pseudo-classes. These selectors let you select child elements of a parent based on a variety of generic criteria, such as the 3rd child, even/odd child elements, the nth child within each group of children of a certain type (ie: LI) within the parent, and more. A little overwhelming, yes, but it's sure better than underwhelming, right? Meanwhile back in the real world, CSS3 Structural pseudo-classes are supported in Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+ to various degrees, so they are usable right away.
CSS 3 selectors explained. In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1.
A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera. We just need to wait for Internet Explorer to catch up before we can start using the full power of CSS 2.1 selectors. The good news is that Internet Explorer will catch up, at least to some extent, with the release of version 7. If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors.
In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005. I am not going to explain the basics of how CSS selectors in general work here.