5 CSS3 Design Enhancements That You Can Use Today

Wdd Logo.
August 10, 2009

Cascading Style Sheets (CSS) is the language of Web design, and the next generation of CSS design properties are just chomping at the bit to be released.

Are you eager to start using them, but don’t know where to start?

Although many of the new properties are not yet “official”, some browsers have already implemented many of the features of the coming CSS Level 3 specifications.

The problem is that many browsers—most notably Internet Explorer—have not.

The trick to using these new CSS3 features is to treat them as design enhancements.

A design enhancement (which I discuss in my new book Speaking In Styles: The Fundamentals of CSS for Web Designers) is any flourish you add to your site designs that increases its visual appeal without diminishing its usability if the style is not rendered.

This can be a tricky call, with there being a fine line between enhancement and not diminishing usability:

  • Design Enhancement Example: Using border-radius to round box corners, creating a more appealing design. However, if the corners are not rendered, the site is still just as usable.
  • Example of Design Diminishing Usability: Using an RGBA color value in the backgrounds of overlapping elements that all need to be visible, expecting the upper elements to be semi-transparent. This will make it impossible for some people to use the site, thereby diminishing the page's usability.

Let’s take a look at 5 different CSS3 properties that you can start playing with right now, provided that you always keep in mind that they should only be used to enhance your design, and not be relied upon for site usability.

This is the original design, before applying any CSS3 design enhancements

1-original.jpg


1. Transparent Colors

Supporting Browsers: Apple Safari 4, Firefox 3.0.5, Google Chrome 1

RGBA allows you to control the opacity of a particular color fill, whether it is for text, background, border, or shadow colors.

Setting the color transparency requires you to specify the color value using RGB notation—hexadecimal values are not allowed—with an additional A value being from 0 (transparent) to 1 (opaque).

rgba(0-255,0-255,0-255,0-1)

You should also include a simple RGB, or hex color value as a fallback for other browsers to use:

.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}

The good news is that there is also a fallback solution—at least for background colors—in Internet Explorer, which supports transparent colors using a filter and conditional styles:


Note: Due to the fact that WordPress could not display the above code in the content of this post, it has been included as an image, therefore you will need to type this code manually.

2-color.jpg

2. Rounded Corners

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1

Border radius sets the curvature of each corner of the box, as if there is an imaginary circle on the corner with a specific radius (r):

border-radius: r;

Although border-radius will be a part of the coming CSS3 specification, both the Mozilla Project (Firefox) and Webkit (Safari and Chrome) implemented their own versions which have to be included for maximum cross-browser compatibility:

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

You can also set the radius for the corners individually:

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius

3-borderradius.jpg

3. Text Shadows

Supporting Browsers: Apple Safari 3, Firefox 3.0.5, Google Chrome 1

Add a shadow underneath any text, controlling the left/right and up/down offset, as well as the color:

text-shadow: x y blur color;

You can combine the text shadow with a transparent color to control the darkness of the shadow:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

You can also include multiple text shadows just by repeating the values separated by a comma:

text-shadow:  0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 
15px -4px 3px rgba(255,0,0,.75);

4-textshadow.jpg

4. Box Shadows

Supporting Browsers: Apple Safari 4, Firefox 3, Google Chrome 1

Adding a drop shadow to any box on the screen follows the same format as adding a text shadow:

box-shadow: x y blur color;

Just like text-shadows, Mozilla and Webkit have implemented their own vocabulary in advance of the final CSS standard:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

You can add multiple shadows just by including multiple values separated by spaces:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);

5-boxshadow.jpg

5. Multiple Backgrounds

Supporting Browsers: Apple Safari 1.3, Google Chrome 1

Including multiple background images in a single element simply requires additional sets of values to be added to the background properties, separated by commas. You should include a single background image as a back-up for other browsers:

background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

6-multiplebackground.jpg

SPECIAL BONUS

Rotate Anything!

Supporting Browsers: Apple Safari 4, Firefox 3.5, Chrome 1

Although not even a part of the CSS3 specification yet, Webkit has implemented its own transformation property, which Mozilla is following suit with. Transform can include a number of different value types, but one of the most intriguing—and useful as a design enhancement — is rotate:

-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

7-rotate.jpg

Appearance as seen in browsers that do not support CSS3 (e.g. Opera 9)

8-nosupport.jpg

See the live working example (requires Safari 4+, Firefox 3.5+, or Chrome 1+)


Jason Cranford Teague is the author of Speaking In Styles: The Fundamentals of CSS for Web Designers. Get it now from Amazon for 27% off the cover price.

Do you use any design enhancements in your websites? Please share your examples with us!


WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…