Introduction
If you are a professional web developer chances are you use CSS for styling your web pages. The latest version of CSS – version 3 – adds many features to the CSS2 feature set, making it appealing to any web developer. This article discusses five features of CSS3 that you will find interesting. The features discussed in this article include – New selectors, border images, gradient, setting opacity and multicolumn layouts.
Note:
CSS3 features such as web fonts, transforms and transitions are commonly discussed. This article, therefore, talks about some other features that are worth noting. Of course, you should always check the target browser version and its support for these features.
1. New Selectors
CSS selectors allow you to match elements for the sake of applying styles to them. CSS3 adds several selectors to the existing set of selectors. These selectors can be broadly categorized into two types:
- Attribute substring selectors
- Pseudo-class based selectors
The attribute substring selectors allow you to match elements whose attribute starts with, ends with or contains a specified string. Consider the following examples:
a[href ^= "http://"]
{
...
}
a[href $= ".zip"]
{
...
}
a[href *= "download"]
{
...
}
The first CSS rule selects all anchor elements whose href attribute starts with http://. Notice the use of ^= (attribute starts with selector) to look for an attribute value beginning with a specific string. The second CSS rule selects all the anchor elements whose href attribute ends with .zip. Finally, the third CSS rule selects all the anchor elements whose href attribute contains a string download anywhere in the attribute value.
The pseudo class based selectors allow you to match elements based on their structural position in the DOM tree. Consider a table that has certain rows and columns. You may want to apply a style rule to all the cells from the last row of the table or from a specific column of the table. In such cases pseudo-classes such as :first-child, :last-child and nth-child come in handy (and there are more). The following examples show how they can be used:
tr:last-child
{
...
}
tr:nth-child(odd)
{
...
}
The first selector uses :last-child pseudo-class and matches the <tr> elements that are the last child of their parent. The CSS rule is then applied to those <tr> elements. Similarly, the second selector uses :nth-child() pseudo-class and selects all the <tr> elements that are odd rows of the table. Instead of inbuilt constants odd and even you could have also specified a numeric index of an element.
2. Border Images
Usually borders of DOM elements are rendered in styles such as solid and dashed. CSS3 also allows you to use an image that is used to render the border. This can make borders quite fancy and appealing. Consider the following figure that shows a <div> element with an image used to render the border.
Border image
The CSS rule behind this border image is shown below:
#mydivwithborder
{
text-align:center;
height:100px;
width:100px;
border:30px solid transparent;
border-image:url('images/divborder.png') 30 30 round;
}
The border-image property specifies the URL of the border image followed by image slicing information. The setting of round indicates that the middle part of the border image is repeated for whole number of tiles. Other possibilities for this setting are repeat and stretch. The border property specified above specifies the width to be 30px. So, the border image will be scaled to that width.
3. Gradient
Usually the background of an element is rendered in a solid color. CSS3 allows you to use gradient fill without needing any images. Using gradients you can apply a smooth transition from one color to another. The gradient can be linear or radial. Consider the following figure that shows a <div> element with a linear background.
Background Gradient
The CSS rule behind this linear gradient is as follows:
#mydivwithgradient
{
text-align:center;
height:100px;
width:100px;
background:linear-gradient(to left, blue , green);
}
Notice how the linear-gradient is specified from right to left with start color of blue and end color of green. The other types of gradient can be rendered using radial-gradient(), repeating-linear-gradient() and repeating-radial-gradient().
4. Opacity
In CSS2 you can use rgb() to set the color. CSS3 also offers rgba() that allows you to specify an alpha value in addition to red, green and blue values. The alpha value controls the opacity of an element. It can be any value from 0 to 1, 0 being fully transparent and 1 being fully opaque. Consider the following figure that shows rgba() in action:
Background Opacity
The first <div> is fully opaque and uses rgb() to set its background color. The second <div> is semi-transparent and uses rgba() to set its background color. The following CSS rule shows how rgba() is used:
#mydivwithrgba
{
text-align:center;
height:100px;
width:100px;
background-color:rgba(100,130,35,0.5);
}
Notice how rgba() specifies an alpha value of 0.5 in addition to red, green and blue values.
5. Multicolumn Layout
Displaying text in columns is a tedious task. That’s because CSS2 doesn’t offer an easy way to split the content into columns. In the past developers needed to calculate the text going into respective columns and then populate the columns with that text. This usually needed some server side or client side scripting. Luckily, CSS3 offers a simple solution through the column-count property. Consider the following figure:
Column Count
As you can see the entire text is split into three columns. The CSS rule that makes this work is shown below:
#mydivwithcolumns
{
width: 500px;
margin: 0 auto;
text-align:center;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
}
The column-count property is set to 3. You may need to use browser specific prefixes for the column-count property to make it work on all browsers.
Summary
CSS3 adds many new features that make styling easier for web developers and designers. This article examined some of these features. Specifically you learned about new selectors, border images, gradient, opacity and multicolumn layouts.
