CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e.

Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!  These techniques are used by the best web design agencies!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

• Mozilla/Firefox/Gecko: -moz-
• Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in!

Note: styles without a prefix are the actual W3 specification proposal.

A Note About Demos on This Page

The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.

Drop Shadows

The drop shadow effect accepts multiple values. First is simply the color of the shadow.

It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur.

Box shadow will also accept an inset keyword that will create an inset shadow.

box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px; 

Drop Shadow Demo:

Gradients

Gradients can be pretty confusing at first, especially when comparing the differences between -moz and -webkit.

With -moz you first define the direction of the gradient, then determine the starting and ending color. -webkit gradients take a little more code. First you define the type of gradient.

The next two values define the direction. Finally, the last two values define the starting and ending color of the gradient.

-moz-linear-gradient(-90deg,#1aa6de,#022147); -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147)); 

Gradients Demo:

RGBA

The RGBA color method is actually easier than it may look at first. It takes four values, and in order they are: the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) color, you set the color in RGB mode, while the level of opacity can give the color a transparent look.

The opacity accepts values between 0 and 1, with 0 being fully opaque and 1 being the actual defined color. The example below has an opacity value of .5, causing the element to be 50% transparent. rgba doesn’t actually require any of the browser extensions.

background-color: rgba(0, 54, 105, .5); 

RGBA Demo:

HSL

Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones.

In this color model, HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel, while Saturation and Lightness are percentage values of the colors.

background-color: hsl(209,41.2%, 20.6%); 

HSL Demo:

Border Color

With this style, you must define border-top, border-right, border-bottom, and border-left separately to get the effect below. You will notice that I have defined an 8px border along with 8 different colors for each border color style. That’s because the same amount of colors needs to match the amount of pixels in the border definition.

border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 

Border Color Demo:

Text Selection Color

I have to say I think that changing the text selection color is a pretty exciting new feature. I first saw this on css-tricks and thought it was pretty sweet.

With the ::selection pseudo-element, you can change the color and background when the user highlights a text element. Pretty nifty if you ask me. ::selection was removed form the current CSS3 draft, but lets hope they add it back in later!

::selection { background: #3C0; /* Safari */ color: #90C; } ::-moz-selection { background: #3C0; /* Firefox */ color: #90C; } 

Text Selection Color Demo:

Transform

With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size.

On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.

-moz-transform: scale(1.15); -webkit-transform: scale(1.15); 

Transform Demo:

Multi-column Layout

With this new multi-column layout style, we can give our text a “newspaper” type look. This is very simple to implament compared to the normal way of doing this through CSS.

Below I specified how many columns I want, what type of rule I want to seperate them, and how big of a gap I want between the columns. Simple huh?

-moz-column-count:3; -moz-column-rule: solid 1px black; -moz-column-gap: 20px; 

Multi-column Layout Demo:

Summary

I hope you all are as excited about CSS3 as I am. It gives us so much more power as web designers and developers and makes many aspects much more simple.  It’s great to use for all industries and types of website, from college’s websites to small restaurants.

Now, if we could only get ALL browsers to support it! Of course, what I just showed you are only some of the potential new features of CSS3. If you want more information, tips, and help, I encourage you to visit any and all of the websites below:

• CSS: Current Work
• CSS3.info
• Mozilla CSS Extensions
• The WebKit Open Source Project

Related Content

• Six Questions: Eric Meyer on CSS3
• 20 Useful Resources for Learning about CSS3
• 10 Easy jQuery Tricks for Designers
• Related categories: CSS and Web Development
• For changing for RGB to HEX for colors for your CSS