The Most Important CSS3 Properties Explained

The Most Important CSS3 Properties Explained

It’s an exiting time for web designers. Major new browser releases are coming in very fast and with them massively extended support for CSS3. Especially Google Chrome leading the way and showing what’s possible with today’s technology. But more important than the parade of cutting edge properties is the fact that more and more CSS3 properties arise that have general support in all contemporary browsers. Below I will explain the most important of these.

The Most Important CSS3 Properties Explained

Border-Radius

Probably the property with the highest level of awareness and maybe the synonym for CSS3 for some. It allows you to round the corners of every HTML element that has a border or background set. It’s not only possible to round the corners with quarter circles but also with quarter ellipses.

border-radius: 8px

The radius of the quarter circles that form the corners is equally set for all four edges. With two values set the first applies to the top left and bottom right corner, the second to the top right and bottom left. With three values set the first stands for the top left corner and the last for the bottom right corner. The second value represents the top right and bottom left at the same time. With four values set it is possible to address every individual corner starting top left and running clockwise to the bottom left.

border-radius: 8px / 13px

With the inclusion of a slash it is possible to set the horizontal (first value) and vertical (second value) radii for the rounding of the corners separately. With two different values you get a quarter ellipse instead of a quarter circle. Like with a single one up to four values can be set on each side of the slash. The order and addressed corners are the same as the notation without the slash shown above.

Border Radius

Compatibility

border-radius is supported in all modern browsers with only Firefox 3.6 needing the -moz- prefix. To maintain compatibility with older browser versions it however is also advised to additionally use the -webkit- prefix.

Further Reading

Border-Image

Presumably the CSS3 property that is most difficult to understand. It can be used to replace the standard CSS border with an image based on a single file. The border property must be set to work. It can be used in two ways.

border-image: url(image.png) 1 round stretch

The intended usage of border-image is to provide an image file that represents the four corners and four sides of the border as well as background of the element. In this case the image gets cut into nine slices where each represents a different part of the border. The number sets the area of the four sides that is taken to draw the border. The general shorthand rule applies. stretch means that the left and right sides of the border are stretched to the hole height while round presumes the original dimensions and just fits the image into the border for the top and bottom sides.

Border Image 1

border-image: url(image.png) 100% repeat

For Webkit browsers it is also possible to take the image as a whole to draw the border. In this case the area must be set to 100% or the actual size of the image. repeat means that the image is simply repeated without the attempt to fit.

Border Image 2

Compatibility

border-image is supported in all modern browsers except Internet Explorer 9, however the use of the whole image is only possible in Webkit-Browsers (Safari, Chrome, mobile). The -webkit- prefix is needed for them, Firefox requires -moz- and Opera the -o- prefix.

Further reading

Background (multiple background images)

In the past it was only possible to set a single image file for the background of an element. With CSS3 you can specify multiple background images for rich graphical effects. They can also be mixed with gradients.

background: url(image1.png), url(image2.png), url(image3.png) #000

The background images get stacked atop where the first one is closest to the viewer. The general values from the background property apply. If you want to set a general background color you have to do it on the last background image, separated by no comma.

background: url(image1.png) right top no-repeat, url(image2.png) left bottom repeat-y, linear-gradient(red, blue)

Here we have one background image aligned to the top right corner, a red to blue gradient running from top to bottom and a second image that starts at the bottom left corner and is repeated at the y-axis.

Backgrounds

Compatibility

Multiple backgrounds are supported by all modern browsers.

Further Reading

RGBA

The standard rgb color notation is extented by an alpha channel that sets the opacity of the color. It can be used to set a semi-transparent background color for an element, at gradients, borders or text.

color: rgba(98, 33, 129, 0.5)

A violet with 50% opacity. The first three values represent the red, green and blue values of the color ranging from 0 to 255. The last value sets the opacity where 0 is fully transparent and 1 fully opaque (solid).

background-color: rgba(0, 0, 100%, 0.2)

The color values can also be set in percentages. In this case the red and green values are set to 0% and blue to 100% resulting in a pure blue. The opacity is set to 20%.

RGBA

Compatibility

rgba() is supported by all modern browsers.

Further reading

Opacity

One of my favourite properties. The opacity of an element determines how translucent it is, that is how much the background shines through.

opacity: 0.7

The opacity ranges from 0 (fully transparent) to 1 (opaque, solid). In this case it is set to be 70% opaque.

Opacity

Compatibility

Opacity is supported by all modern browsers.

Further Reading

Linear-gradient

Probably the hottest CSS3 property right now – and one that saves much time. Gradients are smooth transitions from one color to another. rgba() colors can be used as well as the transparent value. Currently only gradients as background images are supported.

linear-gradient: (red, green 30%, blue)

The syntax is pretty simple. The starting color of the gradient is red, at 30% on the gradient axis the color is green (representing a color stop) and the ending color is blue. If no percentage value (a color stop) is set the color transition takes place at its natural position which in this case would be at 50%. Multiple comma separated color stops are possible. By default the gradient runs from top to bottom (top).

linear-gradient: (225deg, orange 20%, black)

The gradient can also have angle applied where 0deg points to the left and 90deg up. In this case the gradient runs from top right to the bottom left corner (same as -135deg). Repeating gradients can be achieved through the repeating-linear-gradient property. Instead of an angle it is also possible to note the same keywords like at the background-position property. left stands for a gradient that runs from left to right, left top sets a gradient starting at the top left corner and running to the bottom right.

Gradient

Compatibility

Gradients are currently not supported by Internet Explorer 9 and Opera, however the latter will support them in the coming version 11.10 (with the -o- prefix). At the moment Safari uses with webkit-gradient(linear) a completely different syntax for gradients, however it will be discarded in the next release. Chrome already orients on the official notation with the
-webkit- prefix. Firefox needs the -moz- prefix.

Further Reading

Box-Shadow

Is used to attach a shadow to an element. Multiple ones can be assigned comma separated.

box-shadow: 8px 10px 5px #646464 

The first value represents the horizontal offset of the shadow. Positive values draw the shadow to the right, negative to the left. The second value sets the vertical offset where positive values draw the shadow above the box and negative values below the box. The last value is responsible for the blur radius. The greater this number the lighter and bigger the shadow gets. If not set the shadow has sharp edges. The color is set to #646464.

box-shadow: 5px 5px 8px 10px #646464 inset

An optional fourth value controls the spread distance making the shadow bigger in all directions. Negative values shrink the shadow. There is also the optional keyword inset which draws the shadow inside the box instead of a standard drop shadow.

Box Shadow

Compatibility

box-shadow is supported by all modern browsers. Safari still needs the -webkit- prefix, Firefox 3.6 the -moz- prefix.

Further Reading

Text-Shadow

Text can also be equipped with shadows. Several can be assigned comma separated.

text-shadow: -2px -3px 5px #000

As with box-shadow the first value stands for horizontal offset where positive values draw the shadow to the right. The second value represents the vertical offset. Negative values draw the shadow above the text. The last numerical value sets the blur radius defining how big and blurred the shadow is. The color is black.

Text Shadow

Compatibility

text-shadow is supported by all modern browsers except Internet Explorer 9.

Further Reading

Transition

Transitions ensure that websites get a bit more dynamic. Instead of a value’s normal behavior to change immediately it is faded smoothly. Many available CSS properties can be transitioned.

transition: background-color 1s

In this case the background-color of the element is transitioned over a period of 1 second. If there is no property set the transition defaults to all, that is, that all of the properties of the element are animated.

transition: color 0.7s 1s ease-in

The color of the element is transitioned for 0.7 seconds. The second numeric value represents the delay after the animation starts, in this case 1 second. The last value is the timing function, where ease-in stands for a smooth acceleration at the beginning and no slowdown at the end. Defaults to ease which results in a fast beginning and a slowdown at the end. Can also be ease-out, which is quite the same but not so fast at the beginning, ease-in-out results in an acceleration and a slowdown and linear with neither.

transition: width 3s, opacity 2s 3s ease-in

Transitions for different properties can also be combined within a single notation. In this case the width is animated over a period of 3 seconds, though the opacity lasts 2 seconds, only starts after 3 seconds and has ease-in set as the timing-function resulting in a smooth acceleration.

Transition

Compatibility

Transitions are not supported by Internet Explorer 9 and Firefox 3.6. Webkit browsers need the -webkit- prefix, Firefox 4 needs the -moz- prefix and Opera -o-.

Further Reading

The Future is Now

Not long ago everyone was annoyed that the shiny new CSS3 was only supported in a limited range of browsers and even then not quite satisfying. Especially Internet Explorer was a big obstacle hindering getting your fingers dirty with CSS3.

A few month later the scene has changed significantly. Every contemporary browser supports a broad range of CSS3 features and even Internet Explorer caught up with version 9. Furthermore IE6 fades very quickly and even IE7 gets more and more replaced by other browsers. But don’t let the IE family be the excuse for not using CSS3. With a little bit of foresight at creation everything degrades gracefully and remains perfectly usable. There has never been a better time to start using CSS3 in your designs!

Christian Krammer is web designer at one of Austria's biggest Newspaper called "Kleine Zeitung" where he worked for nearly ten years. He also is the proud owner of CSS3files.com which he recently launched. A large range of CSS3 properties is explained there for you to learn and look up. Besides that he is the proud father of a 4 years old boy and a passionate gamer.

Comments

    • Xavi,
    • April 6, 2011
    / Reply

    Very detailed and clarifying!
    I started using CSS3 a while ago since only 15% of my visitors use IE. 76% of these use IE8 and only 3% use IE6.
    Thanks for the article Christian, I have been reading a lot about the new features along with HTML5 ones but didn’t have a clue about border-image which sounds really cool and a huge time-saver for both website coding and loading times.

  1. / Reply

    Nice post, but what specific browsers and versions do you mean by “is supported by all modern browsers”?

    Thanks

  2. / Reply

    Thanks, useful for read this and need to know.

  3. / Reply

    I am very sorry that I didn’t further clarify that. By “modern browsers” I mean: Firefox 3.6 (and of course Firefox 4), Safari 5 (including the latest version of Chrome), Internet Explorer 9 and Opera 11.

  4. / Reply

    detailed and informative this awesome and finally that explained what is border image

    • CJ,
    • April 7, 2011
    / Reply

    Great list. In order to shortcut some of the shortfalls of Internet Exploder, I have resorted to using CSS3 PIE, which hopefully will not be necessary as CSS3 standards come into play. The only downfall of this is that it uses javascript (not so great if disabled) and can conflict with mootools or jQuery, severly downgrading performance. (ie8, ie7) but it allows me to have CSS3 fun in all other browsers knowing that the poor IE users will still get some visual satisfaction from my site(s) without having to load a plethora of images

    1. / Reply

      You right, CSS3 PIE is really great. I have written a little article about it: http://www.css3files.com/2011/04/05/css3-for-everyone-even-ie6/

  5. / Reply

    Very detailed article!! Great list

    • Dusan,
    • April 7, 2011
    / Reply

    Nice article!
    I like HTML5 and CSS3 too
    Hope that CSS3 compatible browsers grow marketshare fast

    By the way, I also live in Austria ;)

  6. / Reply

    Thanks for making note of compatibility. That’s a big reason I’ve held off using some of these techniques. I’m feeling like I can give some of them a shot now.

    1. / Reply

      Yeah, go for it. I’ll promise you that you really will get excited about the magic of CSS3.

    • andy,
    • April 9, 2011
    / Reply

    Great article…but I’m not sure I would count out IE8. CSS3 is great and all, but IE still dominants majority of browser usage and IE9 isn’t gaining enough user to use your recommended css3 properties yet.

  7. / Reply

    But you can not care about IE8 if you want to unleash the full potential of CSS3. It almost supports nothing of it – but that’s really no problem. The IE8 users won’t even realize that they miss something at a site that makes heavy use of CSS3. “Graceful degradation” is the keyword. If you have the IE users a little bit in mind at the creation of a website you won’t even run into problems (maybe a few in IE7 and some more in IE6). But that’s it. Nevetheless you have a site that’s on the pulse of time. Just try it …

  8. / Reply

    The latest spec for box shadow has changed a few things around. It now takes either 2 or 4 length parameters instead of 2 or 3.

    See http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-box-shadow for the details.

    1. / Reply

      That’s exactly what I state at the second example of “box-shadow”. I mention four properfies, the first beeing the horizontal offset , the second the vertical, the third the blur radius and the fourth the spread distance. That makes 4 properties if I am able to count correctly …;)

      1. / Reply

        Quite true. :)

        I was ineffectively trying to point out that the 3 lengths version is not in spec any more, and I forgot to mention in things like the WebKit Nightly they have updated to the current spec, so the 3 lengths won’t work in the next round of official updates. Sorry about that.

        1. / Reply

          No problem, every comment is welcome. :)

  9. / Reply

    Thanks Krammer. This is great article and very useful.

    • Mark,
    • April 15, 2011
    / Reply

    Nice roundup, I never knew you could control horizontal and vertical values for border-radius before so that may come is useful now!

    Just a thought, wasn’t opacity part of CSS2?

    1. / Reply

      Glad that I could help, Mark.

      I am not really shure if opacity is CSS2 or 3, at least the W3C states that it is level 3: http://www.w3.org/TR/css3-color/#transparency

  10. / Reply

    Very nice collection of css properties. + compatibility. Thanks a lot !

  11. / Reply

    I totally agree that the “Future” is now. I’ve been trying to convince my bosses that we should be using these tools NOW and just make sure the sites degrade for the less than capable browsers, but they’re stuck in their ways. If they continue to be stuck in their ways they’ll soon find the sites that we create will soon be left behind by the more advanced websites.

    1. / Reply

      So true! Maybe your bosses are the ones that also care for that IE6 will never die out …

  12. / Reply

    This is so useful, thanks a lot

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.