CSS3 Introduction AND Backgrounds AND color AND border-image Property ,front

              CSS3 Introduction

CSS3 is the latest standard for CSS.

CSS3 is completely backwards-compatible with earlier versions of CSS.

This section teaches you about the new features in CSS3!

---

CSS3 Modules

CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.

Some of the most important CSS3 modules are:

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

Most of the new CSS3 properties are implemented in modern browsers.

CSS3 Backgrounds

CSS3 contains a few new background properties, which allow greater control of the background element.

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following new CSS3 properties:

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

• Example

  #example1 {
      background-image: url(img_flwr.gif), url(paper.gif);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;}

• CSS3 Colors

• 
  

  CSS supports color names, hexadecimal and RGB colors.

  In addition, CSS3 also introduces:

  • RGBA colors
  • HSL colors
  • HSLA colors
  • opacity

  Example

  #p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
  #p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
  #p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

  Try it Yourself »
• 
  

CSS3 border-image Property

The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

We will use the following image (called "border.png"):

Example

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;}

CSS3 Text

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

• text-overflow
• word-wrap
• word-break

CSS3 Web Fonts - The @font-face Rule

Web fonts allow Web designers to use fonts that are not installed on the user's computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your "own" fonts are defined within the CSS3 @font-face rule.http://www.w3schools.com