Spices for modern browsers: border-radius, box-shadow and text-shadow

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!

Web Browser Market Shares

I found this awesome site that compares market shares globally between browsers. As of 2008-10-01, these are the biggest browsers in the world:

46% – Microsoft Internet Explorer 7
25% – Microsoft Internet Explorer 6
19% – Mozilla Firefox, any version
7% – Safari, any version (most likely including other browsers built on WebKit, such as Camino)
3% – Other browsers (Google Chrome, Opera, Netscape, etc)

Notable is also that Safari versions below 3.0 are at less than 0,02% of total market share.

Click here to go to marketshare.hitslink.com to read more.

At least in my job, knowing what browser your customers use to browse the web is crucial. Yet, you hear many different numbers from many sources, and you end up just making up your own numbers that seem somewhat correct. Different sites can be browsed by completely different browser users. For websites aimed at very tech-savvy people (think digg.com) generally Firefox has a much larger market share, whereas a site like myspace.com probably has less Firefox users than even the overall average market share of the browser.

When making a web service, it’s very important to recognize your limitations – but also your possibilites. Modern browsers support features older browsers don’t, and if you know that 75% of your audience uses a modern browser (such as Internet Explorer 7+, Firefox 2+, Safari 2+), it’s sometimes acceptable to design a feature aimed at these people, and doing a light version for the others. For me as a designer, a classic example is PNG-24 images, semi-transparent wonders that makes IE6 totally crap out. Therefore I do a less pretty version of the semi-transparent images for that browser, and most people that actually cares are happy in the end.

It’s an interesting and forever evolving topic, that’s for sure.