5 Features of CSS3 You Can Use Today

A few days ago, the CSS 2.1 specification finally achieved W3C recommendation status. After many years of hard work, CSS 2.1 is now so well supported that upgrading the spec to recommendation status is mostly a formality. On the same day, the CSS 3 Color Module also become a recommendation. All of this is exciting news, because it means that the web is well on its way to a future filled with glorious CSS 3.

While CSS 2.1 now enjoys extremely broad interoperability, the same is not currently true for CSS 3. While the W3C and browser vendors work furiously to build our tomorrow, here are five CSS 3 features that you can start using in your sites today.

Border Radii

The border-radius property allows you to ostensibly curve the corners of an element. Previously, this was a rather tricky thing to do, involving the use of images and extra markup. Now, you can create a curved box like the one you see below.

A rectangle with curved corners.

The Code

To apply a border radius to an element, simply select the element in your CSS code and apply the border-radius property. Then, give the property an absolute or percentage value. The higher the value, the more curvy your corners will appear. To make this work in some browsers, you will need to include what are called vendor prefixes. These are necessary to protect future compatibility, should the W3C decide to change a CSS 3 property.

.myElement {
 
  /* A few vendor-prefixed versions of the property... */
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
 
  /* ...and the 'real' property last. */
  border-radius: 20px;
 
}

Browser Compatibility

Provided that you include the proper vendor prefixes, the border-radius property works in just about every modern browser, including Firefox, Safari, Opera, and Google Chrome. It now also works in Internet Explorer, starting with version 9. Even if the client browser doesn’t support this property, it just means that they will see squared-off corners instead of smooth curves. Remember, webpages don’t need to look exactly the same in every browser; slight cosmetic variations like this are acceptable.

New Color Models

CSS 3 comes with several new properties like border-radius, but it also comes with new units as well. CSS 2.1 offers several different ways to declare colors, such as the hexadecimal format or the named color format. Additionally, CSS 2.1 allowed colors to be specified using a special rgb() function, and CSS 3 builds upon this with rgba(), hsl(), and hsla(). While hsl() allows you to specify color using hue, saturation, and lightness (rather than red, green, and blue colors), it is the a that’s more interesting. In the rgba() and hsla() functions, the a stands for "alpha" and it allows you to adjust the opacity of the color.

A bright orange colored rectangle, with some very slight transparency added..

The Code

To utilize one of the new color models, simply use them anywhere you might use a color. One example of this is of course the background property, which can set the background of an element to a color. To use the rgba() function, supply the red, green, and blue values, separated by commas. These should be numbers between 0 and 255, or percentages. Finally, add in the alpha value, which should be a number between 0 and 1, inclusive. The higher the number, the more opaque the color will appear, with 1 being completely opaque. These new color values do not require the use of any special vendor prefixes.

.myElement {
 
  /* A bright orange color, with some very slight transparency added. */
  background: rgba(255, 128, 0, 0.7);
 
}

The hsla() color model also takes four values. The first value is the hue, and is just an integer. The next two values are for the saturation and lightness, and these should be percentages. Finally, the alpha value functions the same as with the rgba() function, and should be a number between 0 and 1, inclusive.

.myElement {
 
  /* A solid blue color, with the transparency cut in half. */
  color: hsla(240, 100%, 50%, 0.5) }
 
}

Browser Compatibility

These new color models will work in every modern browser. Internet Explorer began supporting CSS 3 color models starting with version 9, and because colors can be more than just aesthetic enhancements, it’s important to make sure they work properly in the majority of clients. So then, what if a browser doesn’t support one of these new color models? As a fallback, you can try something like this:

.myElement {
 
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.9);
 
}

Remember, the rgb() function is a part of CSS 2.1, which is already widely supported. If a browser is capable of utilizing the rgba() function, then the second declaration will override the first. If not, then the second declaration will simply be ignored. The only thing missing in this case will be the slight transparency. As I mentioned previously, slight cosmetic variations like this are acceptable.

Box Shadows

The box-shadow property makes it easy to create shadows underneath elements. Prior to CSS 3, this effect was somewhat challenging to produce and almost always required the use of images.

A brightly colored rectangle with a shadow underneath.

The Code

The box-shadow property takes four values. The first two values are the X and Y offsets, and they determine the angle of the light. The third value is the blur radius. The higher the value, the fuzzier the shadow will appear. These first three properties can be absolute or relative values. The last value is a color. Of course, you could use a hexadecimal color, but the box-shadow property is much more interesting when combined with the new color models in CSS 3. Using the rgba() color model allows the opacity of the shadow to be adjusted, making it appear as though the shadow is naturally blending with the background. Similar to the border-radius property, this property also requires the usage of vendor prefixes.

.myElement {
 
  /* A few vendor-prefixed versions of the property... */
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
 
  /* ...and the 'real' property last. */
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
 
}

Browser Compatibility

As is the case with the border-radius property, this CSS 3 feature works in all modern browsers and will work in Internet Explorer 9 and up.

Fonts

Computers have been capable of displaying multiple fonts for several decades now, so it might seem odd that fonts are only just now becoming standardized on the web. However, disagreement on file formats along with complex font licensing issues have turned this into quite a difficult challenge to overcome. Fortunately, CSS 3 has put the spotlight back on web fonts, and the web is rapidly moving into a multi-font future.

A special font that spells out the words 'Lorem Ipsum'.

The Code

Applying various fonts to blocks of text is nothing new. However, the ability to include new font faces is indeed new, where as before, we were limited to the browser defaults. To include a new font, download the font file that you’d like to include, and then use the @font-face rule to specify a name for the font along with a file path. After that, you can use the font as you normally would.

 
@font-face {
 
  /* Pick a name for your font. */
  font-family: orbitron;
 
  /* Then, include the file path to the font file. */
  src: url('orbitron-light.otf');
 
}
 
.myElement {
 
  /* Finally, apply the new font to an element, with some fallbacks. */
  font-family: orbitron, verdana, sans-serif;
 
}

Browser Compatibility

This seems simple enough, and indeed, the @font-face rule works in every browser going all the way back to early versions of Internet Explorer. Including fonts isn’t quite that straightforward due to a few lingering file format compatibility issues, but fortunately, several font services have greatly simplified the process and abstracted away these problems. My favorite font service is Google Web Fonts, and I highly recommend you check it out. You can pick any fully licensed font for free, and then all you have to do is include a CSS file from Google’s fast content delivery network. Once the external CSS file has been included, the new font is available to use in other CSS documents that follow.

Opacity

With CSS 3, you can easily adjust the transparency of an element by using the opacity property. Using CSS 2.1, effects like this were tricky to achieve and in some cases, impossible.

A slightly transparent rectangle layered on top of a brightly colored rectangle.

The Code

To dial down the opacity of an element, simply apply the opacity property. Then, give it a value between 0 and 1, inclusive.

.myElement {
 
  /* This will make the element 70% opaque, or 30% transparent. */
  opacity: 0.7
 
}

Browser Compatibility

As you might expect, this property enjoys broad support from every modern browser. opacity will work in Internet Explorer 9 and up, but to accomodate older versions of Internet Explorer, this property should be used for aesthetic enhancements only.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

37 comments on “5 Features of CSS3 You Can Use Today

  1. If you’re looking to get into @font-face this is a great place to start: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax Hi Nick!

  2. opacity doesn’t work for older versions of IE. In order to make it work, you have to set an alpha filter like-a-so:

    .myElement {
    filter: alpha(opacity = 70);
    }

  3. The box-shadow property actually accepts 5 variables – the 4th being “spread”, which is a numerical value like the previous 3, followed finally by the color. This widens or narrows the shadow relative to the original shape.

    • You are correct, thanks for sharing. :) That’s one of the things I actually cut out of the article, because it was getting rather long.

  4. Definitely some good uses of CSS3 above, but I am weary of recommending font-face to everybody because most people will ignore the licensing agreements. Someone recently designed a site in Trajan Pro and asked why I coded it up as Times New Roman. They specifically said to use the font-face declaration but that is illegal based on its licensing agreement.
    For those of you that want to use these techniques in IE 6, 7 and 8, check out http://css3pie.com/ – this works wonders after you include an HTC file in the CSS file. Be careful with positioning though – the HTC file seems to disregard background positioning a lot of the time.

    Edit – sorry for the double post. Feel free to delete this one.

    • Using well respected services like Google Web Fonts ensures that you’re clear of font-licensing issues. If the font ever does become a legal issue and it’s taken down, it just means that your text will fall back to the next font you’ve declared. This is not ideal, but it’s not a terrible consequence either.

      Also, yes; CSS3 Pie is a pretty decent way of getting IE 6-8 to cooperate.

  5. Definitely some good uses of CSS3 above, but I am weary of recommending
    font-face to everybody because most people will ignore the licensing
    agreements. Someone recently designed a site in Trajan Pro and asked why
    I coded it up as Times New Roman. They specifically said to use the
    font-face declaration but that is illegal based on its licensing
    agreement.

    For those of you that want to use these techniques in IE 6, 7 and 8,
    check out http://css3pie.com/ – this works wonders after you include an
    HTC file in the CSS file. Be careful with positioning though – the HTC
    file seems to disregard background positioning a lot of the time.

  6. A quick note on the Box-shadows, you listed four properties, x and y offsets, blur, and colour, there is actually one more property that is placed before the colour specification. The fourth value defines the spread distance of the shadow.

    As for opacity, I have run into a few problems with it, mainly trying to have solid, opaque objects inside a container with opacity applied. Even if you have the value [ opacity:1; ] on the object inside the container, that [ 1 ] means the object is 100% of the opacity that the container is.

    For example, I have a container with [ opacity:0.7; ], and object inside of it with [ opacity:1; ] will still be at 70% opacity even though it’s defined as 100%.

    The best get-around for this is to use RGBA and define your background colour and opacity for the container in that property, as it then leaves the objects inside the container unchanged.

    One last thing, with the border-radius you can define different radii for each corner, however the syntax for the different vendors is different, but is something interesting to try/do.

    • My article was becoming rather lengthy so I had to cut it down in a few places, but this is all great additional information. Thanks for sharing! :)

  7. Thank your for the useful article.

    Can you explain to me why it is acceptable that a design does not need to look the same in every browser? If a client approves a design with rounded corners and they view it in IE 8-6 and do not see rounded corners, would they not have issue with this? and rightfully so?

    • Making a website look exactly the same in every browser is a futile effort, but you can get close. There are a few ways you might frame this for a client:

      1. The client should understand that it will cost them more to make the site look the same in every browser, because it’s going to take you longer. Slicing up images for shadows and rounded corners is much more difficult than applying some CSS3.

      2. Adding the additional markup and images necessary will make the site take longer to load. Explain to them how longer load times typically lower conversion rates.

      3. Try using an analogy from another medium. For example, a feature film director should understand that not everyone is going to watch their film on a 70″ 3D television with 10.1 surround sound. Plenty of people still have small standard definition televisions with mono sound. The same is true on the web; some people are using old browsers and some people are using the latest and greatest. In any case, it’s beyond your control.

      As other people in the comments have pointed out, there are JavaScript tools that you can use to make these things work in older version of IE. That’s not a totally ideal solution, but it’s a pretty good one, especially when you consider that there isn’t any 100% ideal solution to begin with.

      • I agree with your point that some users will be giving up certain experiences using older modes of technology (browsers). One could argue that the average user could care less about wether the boxes are rounded or squared.

        My argument was with the comment that I see thrown around by many people, that “webpages don’t need to look exactly the same in every browser; slight cosmetic variations like this are acceptable” and framed more in the eyes of the client. At least in my experiences, the client expects to see the final design reflected in their browsers. I would guess that if you are using rounded corners, drop-shadows, and transparencies in your design, you are using them for a good reason and not just because rounded corners, drop-shadows, and transparencies look cool.  So sacrificing these elements would cause the design to suffer and seeing as around 47% of the population uses IE 6-8 (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2), its less like saying there is a difference in experience between a 3-D TV vs  standard TV’s with rabbit ears and more like saying “If you watch my movie on a Sony the sky will be blue and if you watch it on a Panasonic the sky will be black”.

        It is good that there are JavaScript solutions (however inelegant) that help alleviate this situation and it seems to me that to totally ignore these in-capabilities in IE is a mistake that will not fly with most clients. Especially as handling these things are within your control.

        • This is progressive enhancement of sorts. If your client cares that a site looks the same in IE6 as it does in IE9 then you’d use these as enhancements to the design.

          You also have to remember many clients simply want it to look the way it should in the browser they use. Most of the time the only people looking at a website in multiple browsers are the web designers who built it. Most users use one browser, they don’t know that in a better browser the site may have rounded corners and simply don’t care.

        • I think part of it all depends on the client as well. If it’s a large client with a massive user base then of course there’s validity in the argument that websites should look the same across all browsers. However, if you’re dealing with a small or local company that doesn’t have a lot of customers or a lot of traffic, then it’s not necessary for it to look the exact same. Especially if they don’t have a large sum of money to devote towards a website, whether a few corners are rounded or sharp won’t be their biggest problem.

          While it’s true that quite a few people still use IE 6-8, it also depends on the audience you’re targeting. Take Smashing Magazine for example, I doubt they receive a lot of IE hits because of the content on the website and who it’s aimed at. In some cases websites don’t need to be the same in all browsers, but it’s the designers/developers responsibility to recognize when those cases are and adapt. If the argument gets large enough, who knows, maybe it will even cause some to upgrade their browser so that they can see the nicer version, but the chances of that happening are slim to none.

        • “One could argue that the average user could care less about wether the boxes are rounded or squared.”

          This is also a great angle to take with a client. People that use older browsers are already used to a less-pretty web.

      • I really hope I’m able to convince my clients with these kind of arguments, cause I can’t wait to use CSS3!

        Thank you for your explanation!

  8. Although you can use these features now, it worries me that there are still tons of IE 7 + 8 installations out there, and for that reason I’ll wait until 9 is fully established, however much older versions of IE anger me you can’t can’t ignore the fact that many, many people are still using them.

  9. This was a really clear article. Thanks. These are exactly the CSS3 features I started integrating in my work at the job.  And you explained them really well. Can’t wait to get into deeper stuff.

  10. Its about time bits of CSS3 got recognised in the majority of browsers, I have been looking forward to implementing it into my current designs, but always worried about the fall-back. I’m glad to see the fall-back risks are becoming less! Keep up the great work Nick!

  11. Thanks for the excellent roundup, Nick. I’ve gotten over my bias against using browser prefixes simply because the benefits outweigh the extra two lines of markup I have to add. And, considering the additional browser share that will see these enhancements, it’s not a tough decision to make. 

    I like that Google Web Fonts are available for download so that I can use them within Photoshop in the mock-up stage. They still have a long way to go in getting a serious library together, but this is a great starting point. Also, having Cyrillic, Greek and Khmer options really opens up the technology to the WORLD-wide web. I’m already using them on a few of my sites and am quite pleased with the results. Cheers, Art

  12. I used CSS3 fonts feature in my website and upset to see the result, still it doesnt have 100% support moreover it behaves totally different in many situtations and the total turn down was when I used it in Hebrew website.

    But need to handle it prooperly and learned from expreience that while converting the font to other format when has to totally ignore the online font convertor as it wont help you in the correct file format.

    Thanks.
    Neha
    http://nehadesigner.blogspot.com/2011/06/css3-support-for-newsletters.html

  13. A really clear overview, but I miss the linear gradient, it is also possible in all browsers. I, and other readers are surely thankfull if you could add this to your list.

    Nice, and helpfull work. I hope this list become longer and longer in next time, and that you update it regularly. Thank you very much for it.