Adobe Edge Preview!

Loading from LongTail.tv...

Adobe Releases a Preview for Edge HTML5 Tool, heres a short overview of the Program Designers are waiting for in 2012. The Revolution has begun!

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. We've kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we've cooked up an example with some super awesome, scalable buttons.

The Button

Here's what we're looking at:

Our original button we'll use to show how RGBA colors rock your world. See how the hex drop shadow works on white, but not dark? We'll fix that.

It's a simple button made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow. Here's the CSS that we've got so far to make this super awesome button:

1. .awesome{
2. background: #222 url(/images/alert-overlay.png) repeat-x;
3. display: inline-block;
4. padding: 5px 10px 6px;
5. color: #fff;
6. text-decoration: none;
7. font-weight: bold;
8. line-height: 1;
9. -moz-border-radius: 5px;
10. -webkit-border-radius: 5px;
11. -moz-box-shadow: 0 1px 3px #999;
12. -webkit-box-shadow: 0 1px 3px #999;
13. text-shadow: 0 -1px 1px #222;
14. border-bottom: 1px solid #222;
15. position: relative;
16. cursor: pointer;
17. }

Not too shabby considering it's nearly all done with CSS. We could use CSS3 to do the gradient as well, but currently only Safari supports that. For a little backward compatibility, we'll keep it as a transparent PNG. Besides, the transparent PNG is easier to work with than setting the gradient in CSS since Safari only does CSS gradients at this point.

Making it Scale with RGBA

Sweet, so we've got our button styled up and looking great, but since we're using "static" colors (Hex value), this button doesn't scale very well. What if we need it to be shown on dark and white backgrounds? What about other colors? Here's where RGBA comes in.

Small Details. Notice the shadow on the button on the dark background? We fixed the buttons' shadow blending by using the RGBA colors.

With a little RGBA love, we'll scale this single button to add five more colors, two more sizes, and make it work on any background color. Check this out—all we have to do is modify three lines of CSS.

1. .awesome {
2. ...
3. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
4. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
5. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
6. border-bottom: 1px solid rgba(0,0,0,0.25);
7. ...
8. }

There, now we have our super awesome button with some alpha blending added in. Still looks the same right? That's because we have a 25% black border, 50% box-shadow, and 25% text-shadow in place of regular hex values. This gives us what we need to make our original button scale to various backgrounds, colors, and sizes. With the RGBA values, we have layers of color instead of separate colors, much like what you get when doing transparent drop shadows in Photoshop.

Adding the Colors and Sizes

Now that we've got our default button to where we need it, let's add some colors and sizes. Here's the CSS to do it:

1. /* Sizes ---------- */
2. .small.awesome {
3. font-size: 11px;
4. }
5. .medium.awesome {
6. font-size: 13px;
7. }
8. .large.awesome {
9. font-size: 14px;
10. padding: 8px 14px 9px;
11. }
12.  
13. /* Colors ---------- */
14. .blue.awesome {
15. background-color: #2daebf;
16. }
17. .red.awesome {
18. background-color: #e33100;
19. }
20. .magenta.awesome {
21. background-color: #a9014b;
22. }
23. .orange.awesome {
24. background-color: #ff5c00;
25. }
26. .yellow.awesome {
27. background-color: #ffb515;
28. }

Done Deal

And now we have six buttons, each with three different sizes. You can see the final coded example here to take a closer look at the code.

And there we have it: scalable buttons with minimal CSS that work everywhere.

Although this example may be overkill—who really needs this many button colors?—the point is that RGBA is actually much more powerful than typical Hex values. Consider this: if we were using hex values, we'd have three times the CSS per color—one color for background, one for border, and one for text-shadow.

With a little CSS3 magic, we've created a scalable set of buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

CSS3 Gradients

But first… why use CSS3 gradients?

If CSS can help you to get rid of extra images, and replacing them with pure code for your browser to interpret without loading any additional external files, then you should consider this as a good solution for your design, because:

• You will get fewer HTTP requests, meaning less bandwidth is used and faster load-times (wich can also drastically improve your Rank on search engines)
• CSS gradients are scalable, meaning less headaches for you

Firefox syntax

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Webkit syntax

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Cross-browser CSS
linear gradient

But, lets see how it works. Use the following lines of code from above together and you will get a cross-browser gradient box.

background: #6191bf; /* Fallback background color for non supported browsers */         

background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#cde6f9'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#cde6f9')"; /* IE8 */

CSS3 radial gradient

IE gradient filters doesn’t support color-stop, gradient angle, and radial gradient. This means you can only specify just horizontal and vertical linear gradients (as above) with two colors, one for start and one for end.

But lets see how you can define a CSS3 radial gradient for Firefox, Safari and Chrome.

background: #6191bf; /* Fallback background color for non supported browsers */          

background-image: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #6191bf);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#cde6f9), to(#6191bf));

Conclusion

Although CSS gradients are great, not all browsers support it (yet). So, you shouldn’t totally rely on CSS gradient when coding your web design and you should always use a fallback for it.