10 CSS3 Features you Will Love and Want to Use

Even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced. CSS3 has taken a very large step forward in helping web developers get away from importing mass amounts of images/JavaScript and making it possible to do this only by using pure CSS. I am going to go over 10 CSS3 features you will love to start using!

Border Radius

The ability to have rounded corners without images and JavaScript is one of the most sought after features of CSS3. Having to make images for each corner or importing a new library just to get the nice round edge will be a thing of the past with CSS3 Border Radius. With CSS3, we can do this with only a few lines of code:

#my_id {
 height: 100px;
 width: 100px;
 border:  1px solid #FFF;
 /* For Mozilla: */
 -moz-border-radius: 15px;
 /* For WebKit: */
 -webkit-border-radius: 15px;
}

Border Images

This is one of my favorite upcoming features, having border images will allow developers and designers to take there site to the next level. You can be as creative as you want and be able to apply it as a border without extra elements. Quite simple code really:

#my_id {
 /* url, top image, right image, bottom image, left image */
 border-image:  url(border.png) 30 30 30 30 round round;
}

Box Shadow

Before CSS3, we had to either use a shadow image or JavaScript to apply a shadow or create the shadow directly in the image. Neither of those are fun to do in any way. With CSS3 Box Shadow we can apply shadows to almost every element of our website. Here is how:

#my_id {
 background: #FFF;
 border: 1px solid #000;
 /* For Mozilla: */
 -moz-box-shadow: 5px #999;
 /* For WebKit: */
 -webkit-box-shadow: 5px #999;
}

Multi-Column Layout

Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” type way. You have the choice to pick the amount of columns, the column width, column gap width, and column separator. A feature like this was not possible before CSS3. Here is how you do it:

#my_id {
 text-size: 12px;
 /* For Mozilla: */
 -moz-column-gap: 1em;
 -moz-column-rule: 1px solid #000;
 -moz-column-count: 3;
 /* For WebKit: */
 -webkit-column-gap: 1em;
 -webkitcolumn-rule: 1px solid #000;
 -webkit-column-count: 3;
}

*Note: column-space-distribution is not implemented yet, this feature is to describe how to distribute leftover space.

Multiple Backgrounds

In the past, having layered backgrounds required you to create more than one element. But now, with CSS3 you can have multiple backgrounds on a single element. This will eliminate a huge annoyance that we have had to deal with in the past. Here’s how it works:

#my_id {
 background:
  url(topbg.jpg) top left no-repeat,
  url(middlebg.jpg)center left no-repeat,
  url(bottombg.jpg) bottom left no-repeat;
}

@font-face

Now, this feature is not entirely new to CSS3, it is supported in CSS2 and has been in implemented in IE since version 5, however that implementation relied on Embedded Open Type. The new CSS3 implementation will allow developers and designers to use any licensed TrueType “.tff” or OpenType “.otf” ” in their web designs. Here is how to use the custom fonts:

@font-face {
 font-family: “my-font”;
 src: url(my-font.tff) format(“truetype”);
}

#my_id {
 font-family: “my-font”, sans-serif;
}

Attribute Selectors

In CSS3, three additional attribute selections are available for matching substrings of the attribute value. Here are a few examples on how to use them.

Select elements with title prefix of “t”:

p[title^=t] {
 /* Attributes to give them. */
}

Select elements with title suffix of “t”:

p[title$=t] {
 /* Attributes to give them. */
}

Select elements with title contain at least one instance of “t”:

p[title*=t] {
 /* Attributes to give them. */
}

:nth-child() and :nth-of-type()

The new :nth-child() pseudo-classes is a way to select elements using a formula. The syntax for both is :nth-child(an+b), almost like a linear equation just different variables. The only difference between :nth-child() and :nth-of-type () is that nth-of-type() only considers elements of the given type.

/* First, Fourth, Seventh, etc..
/* Any type of element */
p:nth-child(3n+1) {
 background: #F00;
}

/* First, Fourth, Seventh, etc..
/* Only li elements */
p li:nth-of-type(3n+1) {
 background: #F00;
}

Opacity

Probably the favorite feature to come in CSS3 is opacity. It is also probably the most already used CSS3 feature as well. There have been ways to use opacity in the past with IE hacks and other methods but the new CSS3 property will allow it to me done much easier. Here’s the code:

#my_id {
 background: #F00;
 opacity:  0.5;
}

RGBA Colors

This new feature ties in with opacity, with CSS3 there is RGB and also RGBA. Now hopefully you know that RGB stands for “red, green, blue”. The “a” in RGBA stands for alpha (also known as opacity). This will make a lot of code shortened by tying in that extra property into an existing one.

#my_id {
 background: rgba(255, 212, 45, 0.5);
}

Wrapping Up

It will still take a while before CSS3 is complete, even longer till every browser supports it (IE). But, we can start using them in are designs for browsers that do support them and just not have the extra features for the older browsers. All in all, just get excited, CSS3 will move the web development world in a good direction.