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.
We’ve set up a demo section for you, click on the Live Demo button and play around or just Download the source files.
Become expert in web designing/development with testking online training course. Learn about css3-features using testking 70-272 guide and testking 642-145 tutorials.
This entry was posted on Wednesday, March 17th, 2010 at 08:52 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Attribute Selectors are part of CSS 2.1, it’s not new.
Would be very useful if you had listed which browsers each of these features work (or do not work) in.
@haRacz
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.
@Matthew
I believe everybody is aware of the fact that css3 is not supported by the IE family
Useful article great job. I still foolishly hold out for the day when all browsers support CSS3, hopefully that will happen soon.
You should include
border-radiusas well, not only with prefixes. The same forbox-shadow. Those properties are currently supported in Opera 10.50, and other browsers will probably soon follow removing the prefixes.You’ve missed something very important with @font-face – the ability to check to see if the font is available on the client computer before downloading from the web. If you set your source as:
src: local(‘my font’), url(my-font.tff) format(�truetype�);
Then the font will be loaded locally if available, falling back to the online copy if not. Multiple ‘local’ calls can be made to specify alternative names (or postscript names – required in Safari I believe)
CSS3 is already giving me amazing results! I can’t wait to start using multi-columns. This is something the print industry has had so many years! Isnt Text-shadows also CSS3? I’d add that to the list as well, certainly being used heavily in the design community.
Nice Article.
Thanks
Nice theme design too
Hello, I tracked down this web site by accident when I was looking on Google then I went on your website. I must say your website is cool I love your theme! Currently possess any free time at the current moment to fully read your website web sitebut I have bookmarked it. I will come back in a day or two. Thanks for a great site.
Really cool article. Especially love the multiple background images and box shadow. Shame IE hasnt sorted its rendering out yet.
A nice adition to the border-radius for IE is noted in this article – CSS3 rounded corners for every browser
Border radius will make a huge difference to the performance of the whole web. Getting rid of those billions of corner pngs will save huge bandwidth.
Awesome features! Thanks for the collection.
CSS3 offers some really cool features to developers. I found a tut on how to get realistic looking postits just done with pure CSS3. This is absolutely amazing. FYI: http://bit.ly/h3oIB6
It is easy to use and should work on any browser and engine the same. But unfortunately it is until today not. Safari and Chrome (both Webkit-Engine for Layout) are very good. Firefox 4 does it okay. Opera lost it’s leading position on that. Unhappily. (IE? What shall that be?)