File Under: CSS

Get Started With CSS 3

If you follow CSS, you’re probably sick of hearing promises of CSS 3 — the next generation style sheet language that should have been here several years ago.

Well, the specification document still isn’t finalized. If you’re impatient, you’re not alone. Browser manufacturers have already started rolling out support for many of the new features even if they aren’t yet set in stone.

Opera and Safari have been leading the way when it comes to CSS 3 features, but Firefox 3 packs in a few and 3.1 promises to bring Firefox alongside the others.

Yeah, we know what you’re thinking: “I can’t do it. I have to support Internet Explorer.”

Well, you’re right. Users of Internet Explorer are out of luck. Although, there’s no reason you can’t use some rounded corner properties solely for your Firefox/Opera/Safari visitors. IE will still render the backgrounds as usual, it just won’t understand the rounded corner bit.

We’re willing to admit that most of these rules are still a year or two from being mainstream, but it doesn’t mean you can’t start learning them now.

Want to bleed from the cutting edge of web design? Put on your daredevil helmet and let’s dive into some cool new design features.

Contents

  1. Rounded Corners
  2. Borders
  3. Drop Shadows
  4. Image Tricks
  5. And More

Rounded Corners

The number one rule of Web 2.0: If it has rounded corners, it’s modern.

Say what you will about the design aesthetics of rounded corners, at least with the new border-radius rules you won’t have to resort to images and JavaScript to get that web 2.0 look.

Say you have some HTML that looks like this:

<p class="r-box">Try doing this without images</p>

Add this style definition to round off the element:

.r-box {

	background-color: #666;

	color: #fff;

	line-height: 20px;

	width: 200px;

	padding: 10px;

	-webkit-border-radius: 10px;

	-moz-border-radius: 10px;

}

Here’s a live demo for those of you with Firefox or Safari:

Try doing this without images

If you’re using a different browser here’s a screenshot of how Safari displays the above block:

Image:css3_shot1.jpg


So what did we do? Well the first five lines are your normal CSS 2 declarations to give things a bit of style. It’s the last two lines we’re interested in. The actual CSS 3 declaration is border-radius. Until the specs are finalized the various browser manufacturers have enabled the features via prefixes — the -moz- prefix is what Firefox uses and the -webkit- prefix is for Safari.

The rule works like this (where TopLeft, TopRight, etc… is a numeric value in pixels):

border-radius: TopLeft TopRight BottomRight BottomLeft;

border-radius: TopLeft BottomLeft+TopRight BottomRight;

border-radius: TopLeft+BottomRight TopRight+BottomLeft;

border-radius: ALL;

So in our case we used the later rule, but if you want just two rounded corners, you would do this:

-webkit-border-bottom-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

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

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

Note: as of this writing, the W3C is planning to move toward the syntax Mozilla uses, rather than that of Safari. Because the border-radius spec is not finalized, Opera chose not to support it in Opera 9.5.

The nice thing about border-radius is it degrades gracefully. If a browser doesn’t understand it, it simply renders a square box.

For a solution that uses CSS 3′s border-radius in capable browsers with a fallback to corner images in IE, see here. The advantage is that the modern browsers don’t get slowed down by lots of corner images.

Borders

Borders get some significant new features in CSS 3 as well, like support for gradients. Here’s what the rule looks like for Firefox:

#box {

	border: 8px solid #000;

	-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;

	-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;

	-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;

	-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;

	width:400px;

}

Which gives you this:

Gradient borders are cool

For those you not using Firefox 3, here’s what you’d see:

Image:css3_shot3.jpg

As of this writing, Safari and Opera don’t have border support.

Drop Shadows

Although it isn’t technically new, creating text shadows is now very simple. It was originally proposed for CSS 2.1 and Safari has supported it since version 1. It simply requires a text-shadow property:

<p style="text-shadow: 2px 2px 2px #000;">My Text</p>

The first two numbers control the offset, which is 2px down and 2px right. The last number sets the shadow spread. If you want shadows above the text, just use negative numbers. Here’s a live sample:

If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.

And an image version shot in Safari:

Image:css3_shot2.jpg

Some browsers (most notably Opera and Firefox 3.1a) even support multiple shadows, which means you can do complex gradient effects not unlike Photoshop — create flaming text using CSS alone.

Image Tricks

This one really takes your designs out on a limb. As of now, only the WebKit nightly builds support masking properties, but Firefox 3.1 and Opera will have them soon enough. The idea is to apply a transparent mask over an image, video or any other element.

In Safari the rules look like this:

-webkit-mask (background)

-webkit-mask-attachment (background-attachment)

-webkit-mask-clip (background-clip)

-webkit-mask-origin (background-origin)

-webkit-mask-image (background-image)

-webkit-mask-repeat (background-repeat)

-webkit-mask-composite (background-composite)

-webkit-mask-box-image (border-image)

To see some examples of the mask tools and cool effects you can achieve, check out David Hyatt’s (developer of Safari) post.

And More

There are many more new visual tricks in store as browsers continue to push out new CSS features. In fact we’ve only scraped the surface of CSS 3. There’s also support for multiple background images, HSL color support, box resizing, multiple columns in a single element and more.

In addition to these new properties, CSS 3 packs in powerful new selectors which make it possible to accomplish in one line of CSS what would require five or six right now. Roger Johansson over at 456 Berea St has a nice write up on what you can do with selectors in CSS 3.