Amazing CSS3 Techniques You Can’t live Without

CSS3, along with HTML5, is quickly shaping up to be one of the most exciting and useful Web technologies in years. In this article, I will be explaining some of the new graphics-rich techniques and properties available with CSS3. You will learn what is likely to be approved as part of the final spec, what is still a work-in-progress, and how to deal with cross-browser incompatibilities and lack of support in older browsers. Ready? Here we go.

Introduction to CSS3

CSS3 is a collection of modules that extend the previous CSS2 specification that we all know and love. Most of the graphics effects discussed in this article come from the Backgrounds & Borders module. There are a number of other additions in CSS3, some of which are more layout-focused, others enable ways of dealing with content styling that previously required server-side HTML generation or JavaScript.

The important thing to remember is that CSS3 is still a work-in-progress, so just because some of the latest browsers support these features doesn’t mean that (a) you should expect all browsers to support these features soon, and that (b) you won’t have to change how you do things later on once CSS3 becomes a full fledged standard.

What Used to Require Images No Longer Does

The annoying problem of having to save out dozens of special image slices just to create a nice button or box style is solved with CSS3. Using several new properties, many of the common graphical effects we designers like to employ on a regular basis are easy to create right in the code. These include (click each image for demo & source code):

Shadows


Recently, designers were just starting to get used to the fact that you can easily add shadows behind text. Internet Explorer doesn’t yet support the text-shadow property, but Safari and Firefox have for some time. But what’s really exciting is now you can add drop-shadows to boxes and controls using the box-shadow property. The syntax for box-shadow is much the same as text-shadow, which we describe below.

Gradients


Wow! That is all done with CSS, no images required. Just so you realize how fast things are developing, CSS3 doesn’t actually specify a standard syntax for gradients yet, so currently there is one syntax used by WebKit (Safari, Chrome, etc.) and another used by Gecko (Firefox). We will explore both approaches in this article.

Borders with Rounded Corners


CSS has allowed several different border styles (double, inset, dotted, etc.) for some time, but now with CSS3 we have the ability to add a border radius to some or all corners. Yes, rounded corners are now possible without resorting to crazy JavaScript hacks or images! Another part of the CSS3 specification is border images, which is also interesting. It’s a rather complicated technique all by itself, so I will save that discussion for another time. You can read more about the spec at the W3C.

How to Style Boxes

A good mindset to employ when using the latest CSS3 techniques is first to find an acceptable baseline style that is supported by incompatible browsers. We’ll cover some thoughts about older browsers or IE support later in this article, but the idea here is to style a box or page element without using shadows, rounded corners, gradients, etc. and see if you are reasonably happy with the result. If it looks decent, then you can go ahead and add all the nice eye candy with the knowledge that if someone is using a browser without the necessary CSS3 support, they’ll still have a reasonable experience.

For today’s example, we’re going to through three stages to add in our special styles.

Start with the Baseline

.styledbox {
background-color: #fed;
border-top: solid 1px white;
border-bottom: solid 1px #669;
padding: 10px 18px 10px 18px;
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
margin-bottom: 10px;
}

This CSS code will get us started. Create a div and enter in some text, and you’ll see a basic box look.

Add Rounded Corners

As with most of these properties, we have to maintain more than one syntax to support multiple browsers (a real drawback currently). Since I develop first in Safari on the Mac, I’ll start with the WebKit version.

-webkit-border-radius: 8px

Aha! The corners are now rounded. Next, I’ll add the Gecko version:

-moz-border-radius: 8px
border-radius: 8px

When at all possible, always add the version without any prefix. That way you’re future proofing your style sheet in anticipation of the CSS3 final standard.

If you want to have additional control over the radius of each corner, use the border-[top-left|bottom-right|etc.]-radius syntax. Note that currently, the Gecko version is slightly different: -moz-border-radius-topleft, etc..

Add a Drop Shadow

Now, we’re going to add the drop shadow. If you’ve ever used the text-shadow property before, this syntax will look familiar.

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

Now here you’ll notice I’m not using typical hex codes for the colors but am using the new rgba syntax. The first three integers are the expected 0-255 range of colors values, but the last one is a decimal number from 0.0 to 1.0 that represents the alpha value (literally the opacity of the color). The ability to specify semi-transparent colors is truly welcome and allows us to create shadows that work well on different backgrounds.

Again, don’t forget the alternative versions:

-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

Adding a Gradient Fill

OK, this is where things are going to get tricky. The CSS3 spec for gradients is so new and undefined that there’s a completely different syntax whether you’re talking about WebKit or Gecko. I had to spend some time going back and forth between BBEdit and Safari to get it just right, and then when I switched over to Firefox, it took another while before I could figure out how to duplicate my results.

Gradients can be applied to a few common properties. Usually you’ll want to use background. Here’s the WebKit syntax:

background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #fffffa),
            color-stop(30%, #fed),
            color-stop(80%, #fed),
            color-stop(100%, #fffffa)
            );

For each color-stop, you can use a percentage or a position value (px, etc.). I think percentage is nice because it will scale with the box.

The Gecko syntax is different in rather confusing ways, but requires less typing:

background: -moz-linear-gradient(
            top, #eef, #cce 30%, #cce 80%, #eef 100%
            );

I recommend starting with the background selector for the solid color, then do the WebKit version, then do the Gecko version, for a total of three background selectors. Browsers will go down the list and use the one that they understand.

Final Result: (demo & source code here)

Bonus Feature: gradients on top of images!

As you can see, the final product looks really nice. You can even stack multiple boxes on each other and see how the shadow effects and corners are drawn. But then I had an idea. I’d heard that CSS3 supports multiple backgrounds, so could I actually create a gradient with alpha transparency on top of a background image? The answer is: yes.

background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, rgba(255,255,255,0.8)),
            color-stop(30%, rgba(255,255,255,0))
            ), url(http://www.siteshine.com/images/tan_background.jpg);
background: -moz-linear-gradient(
            top, rgba(255,255,255,0.8), rgba(255,255,255,0) 30%
            ), url(http://www.siteshine.com/images/tan_background.jpg);

The key is to specify the WebKit version with the gradient, followed by a comma, followed by the url to the image. And then do that all over again with the Gecko version. That provides us with a beautiful “shine” effect at the top of the box rendered directly on the image. With CSS3, you won’t have to worry about height-related image tiling issues for glows or shadows again!

Styling Forms

Form styles can be tricky as browsers sometimes won’t render controls styled by CSS (they continue using the native OS’s UI elements). Or they use some of the selectors and ignore others. Generally, your best bet is to stick with text fields and buttons, and use Javascript-based custom controls for drop-downs, radio buttons, check boxes, etc.

Here’s an example of a couple of form elements styled using CSS3:

One cool thing I did was add extra styling for a “glow” ring when the form element has the focus using the :focus pseudo-class.

You can also create an awesome button using a single span tag. Check this out:

<p>Here is some text. <span class="roundbutton1">Click Me</span> And more text.</p>

What About Older Browsers?

The key with supporting older browsers or particularly Internet Explorer is to choose your battles carefully. Some designers will decide they need every user’s experience to be top-notch and so will eschew virtually all CSS3 effects in lieu of using images as before. Other designers may be so gung-ho about CSS3 that they forget that many users will not experience that great of a visual design.

What I recommend is to try as hard as you can to create elements using standard CSS2 syntax first. If you get to an acceptable place, then add the CSS3 effects you want. If you don’t find the baseline acceptable, then you’ll need to go the old-school way. If you go through this thought process with every element individually, then you’ll probably end up with a site design that has some elements done old-school for maximum compatibility, and other elements (perhaps less critical ones) spiffied up for the latest CSS3 browsers.

What doesn’t make sense is to spend time creating image-based versions, then creating alternative CSS3 versions. Yes, serving two different versions depending on the user’s browser could save a small amount of bandwidth, but I don’t see it as being worth the effort. Go with one version or the other and stick to that.

Conclusion

CSS3 promises to end many a headache for graphics designers and give the Web site development community a great, open-standards tool with which to create fantastic effects and visual styles — all without the need for any special backend software or browser plugin. While there are some hoops to jump through and some compatibility issues at this point, the ease of implementing CSS3 styles simply can’t be matched. If you’ve been wrestling with Photoshop and obscure HTML/CSS markup and hacks to create common graphic effects, those days will soon be over! And that’s a good thing.

Jared White

Jared White is Creative Director at Siteshine, a Web design and social media company based in Santa Rosa, CA. Jared is passionate about user experience and making complex technology seem simple. When he's not wearing his Web designer hat, Jared enjoys composing and listening to music, reading books on spirituality, and spending time at home with his wife and his cat, Tiger. You can reach Jared on Twitter and AskMe.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Dan says

    CSS3 and HTML5 is awesome, and its just the tip of the iceberg so to speak. Its quite daunting though to keep up with all the changes though..I’ve found The Book of CSS3 to be quite a useful reference. Nice tutorial btw

  2. Adam says

    Great one-stop resource. Thanks.

    Once HTML5 is fully supported, it and CSS3 are going to change the way developers/designers are going to make rich content for the Internet. I’d say the biggest thing holding back HTML5 is processor speeds. Many of the things it can do (especially where it comes to SVG and 3D) can eat up a majority of a processor’s resources, especially on older systems. Perhaps computer manufacturers will start making systems with a processor dedicated to HTML5 and another for the rest of the system’s resources?

  3. Helena says

    I love what you guys are up too. This kind of clever work and coverage! Keep up the terrific works guys I’ve incorporated you guys to my blogroll.

  4. says

    I really gave up on trying to learn CSS and coding a long time ago. Honestly I don’t know what I would do without wordpress and all of the plugins that I can download for my site. I am very thankful that someone that knows much more than I, will take the time to develop a plugin and allow myself and the hundreds of thousands of other people just like me to use it.

    It really is amazing what someone can do these days with basically zero coding knowledge.

  5. Herr says

    I like your site! Better than the others I have recently visited covering this. The page layout is simple yet effective, mind if I steal or copy this? Just kidding…Thanks!

  6. Cazare Eforie says

    I like how CSS3 works for styling the text. Before i had to use photoshop. It was not hard but had to waist some good time almost for nothing.

  7. says

    Only one thing I don’t like about this article. Anyone who uses points for their font sizing should be asking themselves WHY??

    In your first code snippet, you included this…
    ****
    font-size: 10pt;
    ****

    points was developed for the print world, and that is where it should stay, it has no place in web design, IMO. Ems, percentages or px would be a much better choice.

  8. brad says

    CSS3 would be much more exciting if Internet Explorer didn’t exist. It holds back the industry so much because none of this will work in most, if not all, version of IE

  9. says

    Great article! I love CSS3…don’t know how I ever designed without it.

    @Sam- I think Opera has it’s own proprietary prefix. So they should work by replacing ‘-moz’ with ‘-o’. So -moz-box-shadow becomes -o-box shadow.

    However, I haven’t tested this… I just read it elsewhere recently.
    Cheers!

    • says

      There might be some Opera-specific prefixes that would work, but I don’t use Opera so I didn’t include them. Probably they would have info on that so you can just go through this code and replace -webkit with -opera or whatever they might call it.

    • Trent says

      That’s so great if support from IE7, in my country there are so much people use IE 7 is main browser . Is there tutorial to make the same effect without use CSS3 ?? thanks a lot.

  10. says

    Thanks to everyone who enjoyed reading this article. I appreciate the feedback! If you have any questions or ideas for a follow-up article, please let me know. :)

  11. Shane says

    Great post, CSS3 is very impressive and incredibly useful.
    Thanks for sharing.

  12. straightalk says

    Very interesting technique I saw this in a code last year and didn’t pay much mind to it, Thank You Stephan for pointing it back to Me.. Very appreciated!

    I will have to Incorporated it soon! =)

    Norman Flecha
    STRAIGHTALK

  13. Bill @ Edward Rayne says

    Nice write up. We have been using CSS3 for rounded corners and drop shadows for a while but so until IE supports gradients we have chosen to stick with images. Like you said above we still have to choose our battles when employing modern techniques because of poor browser support.

  14. Ken says

    very nice effects and there is a big chance of saving money on graphic design stuff but a kind of useless since even IE8 (IE7+6 are in the dark anyway…) is not supporting them.

    • John says

      It’s something I like to call browser degradation. You apply CSS3 rules for browsers that support them (Yes, IE7 and IE8 do support some of the CSS3 rules), and allow your site to gracefully degrade for those that do not.

  15. Avinash says

    Power of CSS3 is Amazing !!
    This Could bring a Great Change in Web Development.

    ~Avinash