CSS3 is the third major version of the core style sheet language of the World Wide Web, often used in combination with HTML5. The development of CSS Level 3 (CSS3) started in 2005. In contrast to further CSS specifications, CSS3 is modularized. The CSS3 modules are described in separate specifications such as Selectors, Media Queries, Text, Backgrounds and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, and Multi-Columns. The modules are in different stages of development and browser implementation. Until recently, only a few modules had been standardized, such as the Color module, the Namespaces module, the Selectors module, and the Media Queries module.
A variety of new functions and features have been introduced in CSS3 such as border-radius, box-shadow, background-origin; color declaration in HSL, HSLA, and RGBA; text-shadow; text-overflow; word-wrap; box-sizing; attribute selectors; transitions; multiple backgrounds; multicolumn layout; Web Fonts; and speech.
The set of CSS3 properties is a superset of former CSS versions, and the core CSS properties can be used in any version, however, CSS3 introduced many new features and properties.
Most Common CSS3 Features and Properties
With CSS3, you can create rounded borders, add shadow to boxes, use an image as a border, and other advanced styling without creating images in an image processing program such as Photoshop.
border-radius
With CSS3, you can add rounded borders to elements individually using the border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius properties (see Listing 1), or together with their shorthand property, border-radius (see Listing 2).
Listing 1. Border Radii Set Individually for the Four Corners
div {
border: 2px solid;
border-top-left-radius: 2em;
border-top-right-radius: 1.8em;
border-bottom-right-radius: 2.2em;
border-bottom-left-radius: 1.6em;
}
The property value (the radius) can be declared in pixels, ems, or %, which defines the shape of the corners.
Listing 2. Identical Border Radius for All Corners
div {
border: 2px solid;
border-radius: 25px;
}
The radii values are declared in the order top-left, top-right, bottom-right, and bottom-left. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left. If all four radii values are the same, the border-radius shorthand property should be used with that value.
box-shadows
In CSS3, the box-shadow property is used to add shadow to divisions (see Listing 3).
Listing 3. Shadow on the div Elements
div {
box-shadow: 10px 10px 5px #848484;
}
text-shadow
In CSS3, the text-shadow property adds shadow to texts (see Listing 4).
Listing 4. Simple Text Shadow Effect
h2 {
text-shadow: 2px 3px 5px #00f;
}
The first property value defines the x-offset, the second value is the y-offset, the third value is the z-offset (blur), and the last value is the color of the shadow. If you want to add multiple shadows, a comma should be used as the separator (see Listing 5).
Listing 5. Outline Effect Using Multiple Text Shadows
h2 {
text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
color: #fff;
}
Background Size
In CSS3, background images are resizable, making it possible to implement the background image to take up all available space (as shown in Listing 6) or be proportional to the screen, regardless of the width of the browser window.
Listing 6. Stretched Background
body {
background: url('/img/bg.jpg') no-repeat;
background-size: 100% 100%;
}
Multiple Backgrounds
In CSS3, multiple backgrounds can be declared (see Listing 7). The separate background images are separated by a comma.
Listing 7. Two Background Images for One Element
#container {
background: url('/img/bg.jpg') 0 0 no-repeat, url('/img/bg2.jpg') 100% 0 no-repeat;
}
In this example, the first image is placed to the top-left position (0 0), while the second to the top-right position (100% 0). Multiple backgrounds can be especially useful when applying a texture or gradient as the main background, and a photo as the other.
Transitions
With CSS3, we can add effects to elements that will gradually change from one style to another without JavaScript or Flash animations. transition-delay determines when the transition effect should start. transition-duration specifies the length of the transition effect in seconds or milliseconds. transition-property identifies the CSS property the transition effect is applied for. transition-timing-function specifies the speed curve of the transition effect. transition is the shorthand property of the four transition properties.
One of the typical transition effects is associated with the event when a user is moving the mouse over an element (see Listing 8).
Listing 8. Specifying a :hover Effect for div Elements
div:hover {
width: 400px;
}
If there is no duration specified, the transition will have no effect, because the default value is 0. To specify the duration, the CSS property to which the transition will be applied must be defined, followed by the transition length such as transition: width 2s;.
Transition effects can be added to more than one CSS property by separating the properties with a comma (see Listing 9).
Listing 9. Transition Effects for Width, Height, and Transformation
div {
transition: width 2s, height 2s, transform 2s;
}
You can master CSS3 from the book “Web Standards: Mastering HTML5, CSS3, and XML”.