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.
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.
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: 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.
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.
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%.
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.
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.
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.
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.
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.
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!
