While updating the blog I remembered what Matt Thomas mentioned a while ago: I like to give people using modern browsers a little something extra to reward them
. Not a direct quote, but that was the idea.
There are a few very interesting CSS3 rules that only a select few of the web browsers have yet implemented. The more interesting for pure text/box styling in my mind are border-radius, box-shadow, and text-shadow.
Remember: Only use these properties to spice up your design, don’t rely on them for your visual appearance as they’re unsupported by a large majority still.
Border-Radius
Border-radius applies nicely rounded corners to any block level element (such as a <div>). The syntax is really straight-forward:
.className {
border-radius: 5px;
}
…Where 5px defines the size of the rounded corners.
Browser support
Border-radius is actually pretty well supported by many of the major browsers. For most, it’s a “beta” feature though, and so you’ll have to use multiple lines of CSS to make it work in all browsers that supports it.
.className {
/* Rounded corners in most browsers! */
-moz-border-radius: 5px; /* For Mozilla Firefox */
-khtml-border-radius: 5px; /* For Konqueror */
-webkit-border-radius: 5px; /* For Safari */
border-radius: 5px; /* For future native implementations */
}
Border-Radius Example
This is what a box with rounded corners would look like in Firefox. The light grey brown box that’s wrapping this guide also has the border-radius rule applied to it, so you can check it out yourself in Firefox 3.x, Safari 3.x or Konqueror to see it in action!
Box-Shadow
Box-shadow creates a drop shadow for a given block-level element (such as a <div>). The syntax is as follows:
.className {
box-shadow: 1px 2px 3px #666;
}
The first two values, 1px 2px define where the shadow should appear in X and Y coordinates. So 1px tells the browser to render the shadow 1px from the left side of the object, and 2px tells it to render it 2px below.
The third value, 3px sets the blur level of the shadow.
The last value, #666 simply defines the shadow’s color.
Browser support
Unfortunately, box-shadow is unsupported by most browsers out there today. To my knowledge, only Safari 3 support it, but you have to use experimental code. To kick box-shadow in for Safari, try this:
.className {
-webkit-box-shadow: 1px 2px 3px #666;
}
Box-Shadow Example
You can also look at the light brown box that is wrapping this guide in Safari 3 or greater to see the box-shadow in action.
Text-Shadow
Text-shadow creates a drop shadow for any text, but is practically better used for headers (such as a <h3>). The syntax is the exact same as for the box-shadow property:
.className {
text-shadow: 1px 2px 3px #666;
}
The first two values, 1px 2px define where the shadow should appear in X and Y coordinates. So 1px tells the browser to render the shadow 1px from the left side of the object, and 2px tells it to render it 2px below.
The third value, 3px sets the blur level of the shadow.
The last value, #666 simply defines the shadow’s color.
Browser support
Text-shadow is supported natively by Safari, but unsupported by every other major browser (not even in experimental properties).
Text-Shadow Example
This is a screenshot of what the title of this Text-Shadow guide looks like in Safari.
Links of interest on CSS3
- CSS3.info – “All you ever needed to know about CSS3”
- CSS-Tricks – Good source for tutorials, news, tips and tricks on using CSS.
- 456 Berea Street – Writes about web standards and general tips for designers/developers.
Hope you enjoyed this guide. Now get coding!
Sounds better than the different bogus jquery rounded corners I'm using. They mostly don't work in crappy browsers anyway.
Nice post Isaac! I'm liking the rounded corners in ID 🙂
Just recently got into CSS, got myself some books on it (find it too hard to gather all the info in front of a screen) and read about the CSS3 in there as well and absolutely loved it. It is so much simpler without loosing function but actually adding it.
For example also adding multiple background images to a single element is also quite easy in CSS3 but so far, correct me if I am wrong, only available for Safari. Looking forward to less code and more functionability and support by more browsers in the future.
Your site design is also very neat as well as your work on the fabulous commenting system. Thanks for your time and efforts towards all this.
Great idea for making the comments look more friendlier and appealing. You rock !! As usual.
test
test