Understanding The Basics Of CSS3

Cascading Style Sheets, commonly known as CSS, has been around for sometime now allowing us to create much more powerful and flexible websites than in the past. Now that CSS has evolved a bit and the acceptance of CSS3 is making its way to our favorite browsers, we can begin to play around with some of the newer features available.

In this article I will focus on some of the more popular features of CSS3, many of which are beginning to make their appearance on several of the websites that I frequently visit. While most of these are only visible in some of the more modern web browsers (Mozilla, Chrome, Safari) it’s important to go ahead and get a grasp of exactly how they work.

Border Radius

Creating rounded corners in web design wasn’t always the easiest of things to accomplish. Yet, thanks to the power of CSS3, it has since become one of the more popular and easier techniques to implement. By taking advantage of the border-radius property, you can easily round off those corners in seconds. Here is a look at both creating equally rounded corners and at targeting the radius of individual corners through the use of CSS3.

Equal Corners

Keep all of those corners symmetrical with just a few short keystrokes.

Rounded Corners CSS3

The Code:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Unequal Corners

Targeting specific corners requires just a bit more code.

Rounded Corners CSS3

The Code:

-webkit-border-radius: 10px 20px 30px 60px;
-moz-border-radius: 10px 20px 30px 60px;
border-radius: 10px 20px 30px 60px;

Box Shadow

Creating box shadows is another pretty cool example for adding some stylish elements to you web designs. The best part being the fact that it is completely executed without the use of images. There are even ways to add multiple box shadows to your rounded corners, allowing for the possibility of creating some very slick designs. Here is the basic use of the box shadow.

Box Shadow CSS3

The Code:

-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;

Multiple Background Images

Another cool example of CSS3 is the ability to apply multiple backgrounds to a single DIV without having to create extra child DIV’s whose only purpose is to support an image. Did I explain that very well? Maybe not so much. Let me try and clear that up through the use of an example.

Let’s say that I wanted to add an image to all four corners of a DIV to create some type of an effect. In this quickly thrown together example, let’s say I wanted to add a staple to each corner of the DIV to create the effect that a piece of paper was stapled to my website. By implementing a little CSS3, it becomes a breeze. Let’s take a look at how it is done.

multiple backgrounds css3

As you can see the single image, staple.png, was targeted to each corner of the DIV by simply pointing to the image and describing where it needed to be placed. No more empty DIV’s scattered throughout your HTML which have absolutely nothing to do with the content of the site. I’ve left the paper out of the code example and simply used a background of #eee.

The Code:

background:
     url(images/staple.png) top left no-repeat,
     url(images/staple.png) top right no-repeat,
     url(images/staple.png) bottom left no-repeat,
     url(images/staple.png) bottom right no-repeat;

background-color: #eee;

Text Shadow

You know how easy it is to double click a layer in Photoshop and say hey, I want to add a quick drop shadow to that text? This may be even easier than that. You aren’t just restricted to just one shadow either. By combing multiple text shadows of varying colors, the possibilities are endless.

Warning: expect to see some possibly horrendous text shadows making their way to a web near you sometime in the immediate future. Use this technique with caution.

Normal Shadow

Here is how to create a normal single color shadow with a slight blur.

text shadow css3

The Code:

text-shadow: 1px 1px 2px #000;

Letter Press Effect

I’ve been hearing the term letter press effect quite often recently among my daily web travels. I’ve even run across it on several blogs who are already taking full advantage of it. Nothing against it all. The outcome can actually prove quite nice when implemented appropriately with the rest of the design. Here’s a quick example for pulling it off with text shadows.

letter press css3

The Code:

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

@Font-Face

For as far back as I can remember, there have always been a group of safe fonts that can be used on the web: Arial, Helvetica Georgia, Verdana, etc. This is because the majority of computers come packaged with these fonts preinstalled. Well, things are a changing. We can now begin to take advantage of various other fonts, whether installed on the readers computer or not, assuming that they can can be pulled via an online directory. Just upload the desired font to your server and pull it via the @font-face feature.

font face css3

The Code:

@font-face {
     font-family: 'Fontin-Italic';
     src: url('/fonts/Fontin-Italic.otf') format('opentype');
}

h1 { font-family: 'Fontin-Italic', Georgia, Serif; }

Warning: Here’s the problem with the whole thing. Because of copyright issues, you need to be sure that you have the rights to display and use a particular font before you go and upload it to your server and start displaying it across your site. Here’s a little more info on which fonts can be used via the @font-face feature. Please ensure that you’re staying legal.

Gradients

Here’s a cool one, you can now create CSS based gradients. This is something that I’m particularly excited about and think that it will contribute greatly to the design world. You can create something as simple as the example below or as complex as displaying radial gradient circles positioned throughout your DIV. You can even create color stops similar to what is used within Photoshop anywhere you wish. The possibilities are endless.

gradients css3

The Code:

background-image:
     -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#999));

background-image:
     -moz-linear-gradient(100% 100% 90deg, #999, #eee);

an even shorter way for Mozilla:

background-image:
     -moz-linear-gradient(bottom, #999, #eee);

Wrapping Things Up

If you choose to go ahead and start using these techniques, make sure and implement some type of fallback so that if the user’s browser does not support it, your design won’t completely fall apart. Do not expect much to happen if the user is browsing via Internet Explorer.

On a side note, several online CSS3 tools have popped up recently that allow you to generate the appropriate code along side a live demo. I recommend playing around with the online CSS3 Generator, if you are interested in getting your hands dirty. It’s a wonderful tool. A couple of more good ones are CSS3 Please and Border Radius, both of which are valuable online CSS3 generators. Have fun

Download the example:

CSS3Examples.zip – Includes the HTML, CSS and the cheesy looking staple image.

Written by Shawn Ramsey

When I’m not brewing my own beer or hiking through the local National Forest, I’m busy building a more beautiful web.

@shawnramz → / bitdrips.com →


26 Comments

  1. Shiva March 17, 2010 at 10:21 am #

    Excellent post.. I was trying to do letterpress with only one of the shadows employed and seeing this made the difference. Multiple backgrounds seemed a bit difficult until I actually looked at your post. You know how we stay away from things that “sound” difficult? lol Thanks

  2. wemodrafrof March 17, 2010 at 12:56 pm #

    Oh thank you!

  3. Zach March 17, 2010 at 2:50 pm #

    Great way to explain it. I had been looking into using some box-shadows, but wasn’t exactly sure how to approach it. Thanks for putting this together. How long did it take you to create all of the examples?

  4. Cody Bechard March 17, 2010 at 2:56 pm #

    Multiple backgrounds is too cool. I can see this coming in handy in many different ways. The CSS gradients will also be a great way to save on loading time. No more images when this is accepted as a standard. Great article!

  5. Melissa Galante March 17, 2010 at 2:59 pm #

    Thank you so much for this!

  6. HB March 20, 2010 at 8:01 pm #

    I didn’t realize you could use multiple text shadows on the same element, that’s pretty cool.

  7. Chris Lee March 24, 2010 at 6:49 pm #

    Just so everyone knows, “-webkit-border-radius: 10px 20px 30px 60px;” does not work in Safari, you have to use “-webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 30px;
    -webkit-border-bottom-right-radius: 60px;”.

    May be it works in Chrome, but not Safari

    • Shawn Ramsey March 25, 2010 at 4:50 pm #

      Chris,

      I just double checked and the shorthand does work fine in Safari 4. Which version are you using?

      You are right though, the code you mentioned will provide the same results. Shorthand is just a bit easier.

      - Thanks

    • Chris Lee April 10, 2010 at 1:22 am #

      Yeah, it is working fine for me now… I upgraded to snow leopard 10.6.3 and Safari 4.0.5 it now works fine.

  8. Ajay March 25, 2010 at 12:00 am #

    Nice tutorial! Thanks.

  9. minoderaj March 27, 2010 at 9:24 am #

    wow thanks for such a beautiful tutorial. really loved it. thanks a million!!

  10. Best Content Management System March 31, 2010 at 10:17 am #

    Sucks that CSS 3 has so many hacks it wont work in browsers such as Opera. Someday they may get it right, hopefully with CSS 4?

  11. Tony April 18, 2010 at 3:45 pm #

    Fantastic tutorial. You make CSS3 so simple to understand!

  12. Deoxys April 26, 2010 at 12:54 pm #

    The gradients are poorly documented here, but great article though.

    • Shawn Ramsey April 26, 2010 at 1:35 pm #

      I guess I could have gone into a bit more detail. I was just shooting for the most basic use of it, which is a straight up linear gradient. That way all you would have to do is replace the colors in the CSS with your own and tweaking the other variables wouldn’t be a factor.

    • Allan Spece April 26, 2010 at 2:14 pm #

      @Deoxys

      Most people are just going to use linear gradients and trying to explain radial gradients etc… is going way past just the “basics” which is what this article is covering.

      @Shawn

      Excellent article! You did a great job explaining these techniques especially with the diagrams included. Thanks for the download as well. I’m playing around with it now.

  13. Pariuri Sportive May 13, 2010 at 4:17 pm #

    Great article! lots of good information to help people get started with css3.

    I just wish that Internet Explorer would keep up with the new web trends the way that other browsers do.

  14. Gray July 10, 2010 at 10:29 am #

    I am gonna redo my crappy website using this info – thanks a lot ;-)

  15. Phelan July 22, 2010 at 4:18 pm #

    Well said Shawn.

    Before I saw this post I found http://css3generator.com which makes it ultra easy to create custom CSS3 code for those that don’t like to memorize code.

  16. Atul K. August 6, 2010 at 4:09 am #

    Great article!
    I am going to use Gradients instead of my 1px (repeating) background image.
    Thanks again.

  17. Brad Maver October 3, 2010 at 11:57 am #

    Great Points. I actually learned a couple new things I did not know. Thanks for sharing!

  18. Brett Widmann November 2, 2010 at 8:55 pm #

    Very nice article. It has a lot of great info. Thanks for sharing.

  19. Pete March 15, 2012 at 7:39 am #

    Really useful overview. Don’t forget box shadow can also be inset to create a completely different effect and that you can have multiple shadows. This is a lovely tool http://box-shadow.info and this gives a great intro http://www.css3.info/preview/box-shadow/

  20. hamed June 5, 2012 at 7:30 am #

    Really nice i appreciate… and good luck ;)

  21. ran January 28, 2013 at 2:16 am #

    Great Tutorials

  22. haider May 6, 2013 at 10:25 am #

    A good article about the CSS3 concepts.
    Thanks

Leave a Reply