Basic CSS3 Techniques That You Should Know

Mar 16 2010 by Joel Reyes | 58 Comments

After 13 years of being a vital part of web designs, Cascading Style Sheets (CSS) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.

Basic Techniques That You Need to Know About CSS3

We’ll be looking at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment!

This is a follow-up of a previous article called CSS3 Techniques You Should Know which you should also check out.

Multiple Backgrounds

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Selectors

CSS3 selectors allow you to select elements to apply style properties with greater specificity, giving you opportunities to select complex groups of elements. The new selectors not only save you time, but also help you keep your HTML markup to a minimum. You’ll inevitably reduce the number of classes and IDs you’ll need, allowing you to become a bit more organized with your stylesheet.

The general sibling combinator

There is a new kind of combinator that is being introduced in CSS3, the general sibling selector. This selector targets all of the siblings of a particular element. For example, if you wanted to target paragraphs in the same hierarchy as your level-1 headings, you would do:

h1~p {
  color: red;
}

The selector above will match the first p element below (giving it a red color), but not the second p element, because it is not on the same level (e.g. not a sibling) as the h1 element.

<h1>Heading</h1>
<p>This paragraph is a match</p>
<div>
  <p>This paragraph is not a match</p>
</div>

New pseudo-classes for greater specificity without scripting

New pseudo-classes introduced in CSS3 specifications allow you to select a group of elements that, before, would’ve required DOM selection using a scripting language such as JavaScript, or additional classes/ID’s.

Here are some new pseudo-classes:

  • :last-child selects only the last child element.
  • :nth-child(n) selects the nth child, useful for zebra-striping tables.
  • :not(e) selects everything except e.

SitePoint has a complete list of CSS3 psuedo-classes.

Resizing Elements

With CSS3, you can now resize your elements using the resize property. Nice right? The catch: it only works in Safari right now. The following code block makes it possible to have a tiny triangle appear in the bottom right corner of an element that you can then drag to resize.

div {
  resize: both;
}

Better Fonts

The most commonly used fonts on the web are Arial, Helvetica, Verdana and Georgia because most computers have them preinstalled. With CSS3, you can break away from these fonts and use various types of fonts as long as it can be called from an internet-enabled location. When you call on your font, it will be displayed anywhere on the site. Because of copyright issues, you have to make sure that you can use the font before using the @font-face feature.

In the following example, the @font-face feature declares the name of the font family (you can name it anything you want) and the location of the font file (in this case a TrueType font file). Once it’s declared, you can use the font-family property to set the font of an element.

@font-face {
  font-family: SketchRockwell;
  src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
  font-family: SketchRockwell;
  font-size: 3.2em;
  letter-spacing: 1px;
  text-align: center;
}

Text Shadows

The text-shadow property allows you to add a dropshadow underneath HTML text elements. You should always make sure your text is readable in case the user’s browser doesn’t support advanced CSS3 properties.

In the following example, we apply a dark blue (#003471) text-shadow that’s 2px to the right and 5px to the bottom of the text and with a blur of radius of 2px, to all h1 elements.

h1 {
  text-shadow: #003471 2px 5px 2px;
}

Preview of text shadow CSS3 property in Firefox 3.5.5Preview of text shadow CSS3 property in Firefox 3.5.5.

Rounded Corners

Creating rounded corners can be a bit of a task. However, with CSS3, it can be a breeze when using a new property called border-radius. This property sets the curvature for every corner of the box.

For example, the below code will produce 10px-rounded corners for divs:

div {
  border: 2px solid #434343;
  padding: 10px;
  background: #e3e3e3;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  width: 500px;
}

In the above code, -moz is for Firefox and -webkit is for Safari and Chrome.

Rounded corners in Firefox 3.5.5Rounded corners in Firefox 3.5.5.

Summary

CSS3 gives us better control over our HTML elements, opening up possibilities of creating complex and flexible designs that have a reduced reliance on static graphics and scripting. We talked about some basic stuff that works in most modern web browsers (except IE8). To learn more about CSS3, check out the W3C CSS3 Current Work page and see CSS3 .Info for the latest news about the newest version of CSS.

Related Content

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.

58 Comments

Mark James

March 16th, 2010

Nice collection of techniques. Keep meaning to try out the Font Face feature, I’ve seen some very good examples.

Sean Sullivan

March 16th, 2010

Another great CSS3 article. Thanks!

Randy Jensen

March 16th, 2010

For anyone getting their feet wet (or who are tired of typing -moz, -webkit & standard css3 :) I created http://css3generator.com

JC

March 16th, 2010

Great list of features…can’t wait until all the browsers fully implement CS3…it will make my life much easier!

dimi

March 16th, 2010

Awesome!!! Love the multiple backgrounds and the h1 ~p{}

alfiks

March 16th, 2010

Thanks for the tips. Probably this is the right time to start learning CSS3! Didn’t know about multiple backgrounds, might be very handy.

BigM75

March 16th, 2010

perfect, this article

Young

March 16th, 2010

Articles like this keep me coming back to Six Revisions again and again…thank you for the useful-as-always tips.

Is the font import supported in IE?
I was about to go FLIR on one of my projects…

BBL

March 16th, 2010

Awesome CSS3 article

agungX

March 16th, 2010

basic css3 … great job dude

richard hughes

March 16th, 2010

nice – thanks for sharing –

Do we have any idea when CSS3 will be supported by all major browsers?

Jenna Molby

March 16th, 2010

Great collection of CS3 techniques. Thanks for sharing.

Jenna Molby

March 16th, 2010

oops I meant CSS3 :P

Jacob Gube

March 16th, 2010

@Randy Jensen: Thanks for the link. To anyone who knows of good CSS3 tools, please post a link here in the comments (and feel free to give a brief description of it).

@Young: Sweet! We’ll keep that in mind. About @font-face and IE: I think (and anyone, please correct me if I’m wrong), they have their own method for font embedding called WEFT. They do have partial @font-face support AFAIK, (“partial”, meaning that it’s not implemented in the way that W3C specs proposes). Here’s their MSDN entry on @font-face.

@richard hughes: CSS3 specs itself isn’t finished yet. When you say major, that, to me, says: “Internet Explorer, Firefox, Safari, Chrome, Opera.”

For the last four, they have a big chunk of CSS3 specs already supported in their most recent versions. I’m making a guess in saying that IE might wait close to or after Final Candidate recommendation before they even support W3C specs, however, there’s been recent talk that IE9 will have partial support for HTML5, so you never know!

In short, don’t expect every browser to support every CSS3 module anytime soon. CSS3 isn’t the same as CSS2 in that they developed it in modules, which gives browser vendors the opportunity to pick and choose which modules they want to support and roll out. Each module is in different levels of development right now, with some being ahead of others.

Andrew Roberts

March 16th, 2010

Good follow up article!

Sheldon Nesdale

March 16th, 2010

Great set of changes. I like the rounded corners one in particular. Thanks Jacob!

Brian

March 16th, 2010

Nice tips. However, rounded corners should have been left behind with the last decade… IMO

Glenn Sorrentino

March 16th, 2010

I wouldn’t mind seeing examples

Feyd

March 16th, 2010

Jenna u’re hot.

Bolle

March 16th, 2010

In the rounded corners example the CSS3 “border-radius” property is missing. Opera 10.5+ supports it natively, all other modern browsers will follow soon.
The -moz, -khtml and -webkit prefixes are only temporary since these features are implemented experimentally.

Gavin

March 16th, 2010

Resize also works in Chrome, at least the latest dev build on Mac.. but I believe it’s been enabled for a while.

Rory Dixon

March 16th, 2010

Thank you very much for this article – it’s a great way to kick-start developing in CSS3 and making it commonplace in your workflow.

Christina Wheeler

March 17th, 2010

Great article…thanks for the tips!

Rohit Prakash

March 17th, 2010

This article cleared some of my old doubts. Thanks.

rory

March 17th, 2010

Great post, Ive not tried any CSS3 coding yet as I make W3C compliant websites. But knowing the amazing effects you can pull off with CSS3 so its hard not try it out…Thanks for starting me off!

…just checking its NOT W3C compliant yet is it?

Tomas

March 17th, 2010

Why use or focus on something that is not working in all main browsers? It’s probably confuse beginners. Stick to the classic and efficent solutions til its time to change, this isn’t rocket science and you can learn it in a minute.

Sam Logan

March 17th, 2010

Nice set of CSS3 techniques, I can’t wait until it is developed fully and rolled out on every browser.

Pixil

March 17th, 2010

Awesome! I can finally start using multiple backgrounds and unique fonts! I have been using nth-child for a while now, I love it so much!

Lately I’ve been debating to myself weather I should use conditional -moz- and -webkit- solely because it won’t validate, but I go ahead and do the fanciness anyway, love the post!

Best

Daniel15

March 17th, 2010

You forgot “border-radius: 10px;” in the rounded corners example. Opera 10.5 supports this, and eventually all browsers will.

Jordan Walker

March 17th, 2010

Great list of CSS3 techniques, can not wait until it leaves the working draft stage.

Ben

March 17th, 2010

You need to provide more useful information on @font-face, along with the proper way to use it.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://www.fontsquirrel.com/fontface/generator

@font-face is also not new to CSS3. Please educate your readers properly.

Also, many of you will find this helpful: http://www.css3please.com

Pointless form filling in

March 17th, 2010

internet explorer 6 doesnt support barely any of these things, therefore rendering them useless if you want to support that browser. Especially if you are developing for certain organisations who insist (lot of organisations and companies will not budge on this!) for instance.

Therefore time spent on these features is wasted because as good as div resize feature is, it cant ever take off unless we get some sort of browser standard…But thats another boring argument..

Jacob Gube

March 17th, 2010

@Ben:

@font-face is also not new to CSS3. Please educate your readers properly.

It was introduced in CSS2, but taken out of CSS 2.1 specs W3C final recommendation. So browsers that only support CSS1 and CSS2 specs, won’t have @font-face. Only browsers that support current W3C CSS3 draft specs will have @font-face support. In the “Better Fonts” section, it never says it was new to CSS3. It only says that you can use @font-face under current CSS3 specs (paraphrased).

The history of CSS is out of the scope of this article.

Beth McLain

March 17th, 2010

Ahh great these techniques will come in handy for the remake of my website. Great list you’ve put together, can’t wait to see some more.

Torniquetes

March 17th, 2010

Good follow up article!

Htoo Tay Zar

March 17th, 2010

Seems like This post author photo (Illustration character) is copied from KaiLoon.com =D

Joel Reyes

March 17th, 2010

Thank you all for your comments! I you have any further questions that haven’t been answered it would be my pleasure :)

kailoon

March 18th, 2010

Hi Jacob, I think you get the wrong author avatar for this article. That’s my mascot for my site…

Anyway, good article.

Jacob Gube

March 18th, 2010

@kailoon: Sorry about that, updated it.

Moses

March 19th, 2010

it really is useful more than i first understood.

Nick

March 21st, 2010

Thanks! There are some good ones in here.

Munna

March 25th, 2010

Thank you, sir…

Alex

March 27th, 2010

Thank you, my first meeting with CSS3.

Tom

April 3rd, 2010

Is it correct that multiple bacgrounds does not yet work in FF ? So annoying..

mask

May 17th, 2010

Cameron and @JayDesign: I flipped the gradient and compared them. It’s really just a matter of opinion and how you look at it. Neither one looks better than the other when you look at them side by side.

cemo

May 24th, 2010

Good Techniques thx for information

Codes

June 10th, 2010

Cameron and @JayDesign: I flipped the gradient and compared them. It’s really just a matter of opinion and how you look at it. Neither one looks better than the other when you look at them side by side.

Smooth Booth

July 7th, 2010

Thanks for this, i just started learning about CSS3.. Didn’t know about multiple backgrounds. keep them coming.

kevin

August 13th, 2010

Thanks for this, I am curly updating the old skill set, brake downs like this help allot.

YuriK

November 25th, 2010

Thank you, very interesting! I will use the techniques.

Edson

December 10th, 2010

For the first time in so many years of css coding I really understood the meaning of “The general sibling combinator”. I’ve read so many articles about this over the web but none seems to be so clear like this one! Thanks to this great article. And thanks for share!

Me

January 15th, 2011

You never stop learning more about CSS3 I think the hardest thing is trying to keep up all the time.

RV

February 25th, 2011

Very useful….. I’m loving CSS3 more day by day even some buddy IE versions are not supporting it well.

Asta

August 2nd, 2011

I think they “borrowed” your article…

Leave a Comment

Subscribe to the comments on this article.