The CSS3 @font-face Rule

Before CSS3, web designers had to use fonts that were already installed on the user's computer.
With CSS3, web designers can use whatever font he/she likes.
When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined in the CSS3 @font-face rule.

Browser Support

Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts).
Internet Explorer 9+ supports the new @font-face rule, but it only supports fonts of type .eot (Embedded OpenType).
Note: Internet Explorer 8 and earlier versions, do not support the new @font-face rule.

Using The Font You Want

In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example 
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style> 

Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

Example
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.

CSS3 Font Descriptors

The following table lists all the font descriptors that can be defined inside the @font-face rule:

CSS3 Text Effects

CSS3 contains several new text features.
In this chapter you will learn about the following text properties:

• text-shadow
• word-wrap

Browser Support

Internet Explorer does not yet support the text-shadow property.
Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.

CSS3 Text Shadow

In CSS3, the text-shadow property applies shadow to text.


You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Example  (Add a shadow to a header)
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3 Word Wrapping

If a word is too long to fit within an area, it expands outside:









In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:










Example (Allow long words to be able to break and wrap onto the next line)
p {word-wrap:break-word;}

CSS3 contains several new background properties,
which allow greater control of the background element.
In this chapter you will learn about the following background properties:

• background-size
• background-origin 
• background-clip

You will also learn how to use multiple background images.

Browser Support

• Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property.
• Safari 4 requires the prefix -webkit- to support the new background properties.
• Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties.

CSS3 The background-size Property

The background-size property specifies the size of the background image.
Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.
You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

Example (resize a background image)
div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

Example (stretch the background image to completely fill the content area)
div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

CSS3 The background-origin Property

The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.


Example (position the background image within the content-box)
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 Multiple Background Images

CSS3 allows you to use several background images for an element. 

Example (set two background images for the body element)
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

CSS3 background-clip Property

The background-clip property is supported IE9+, Firefox 4+, Opera, and Chrome.
Safari supports an alternative, the -webkit-background-clip property. 

Syntax
background-clip: border-box|padding-box|content-box; 

Example (specify the painting area of the background) 

div
{
background-color:yellow;
background-clip:content-box;
-webkit-background-clip:content-box; /* Safari */
}

Browser Support 

• Internet Explorer 9 supports two of the new border properties. 
• Firefox requires the prefix -moz- for border-image. 
• Chrome and Safari requires the prefix -webkit- for border-image. 
•  Opera requires the prefix -o- for border-image. 
• Opera supports the new border properties. 

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:

Example
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
} 

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

Example
div
{
box-shadow: 10px 10px 5px #888888;
} 

- the first 10px refers the "x" coordinates from left of the div
- the second 10px refers the "y" coordinates from top of the div
- the 5px is the shadow spread
- the #888888 is the shadow color  

CSS3 Border Image

With the CSS3 border-image property you can use an image to create a border:

 The original image used to create the border above:








Example
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
} 

  

CSS is used to control the style and layout of Web pages. CSS3 is the latest standard for CSS. This tutorial teaches you about the new features in CSS3!

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

CSS3 Modules

CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.
Some of the most important CSS3 modules are:

• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface