Very easy to learn CSS3

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 .

  CSS3 Rounded Corners

With the CSS3 border-radius property, you can give any element "rounded corners

CSS3 border-radius Property

With CSS3, you can give any element "rounded corners", by using the border-radius property.

Here are three examples:

1. Rounded corners for an element with a specified background color:

2. Rounded corners for an element with a border:

3. Rounded corners for an element with a background image:

Example

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; }

CSS3 Border Images

With the CSS3 border-image property, you can set an image to be used as the border around an element.

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"):

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.

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 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 

  CSS3 Multiple Backgrounds

• CSS3 allows you to add multiple background images for an element, through the background-image property.

  The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

  The following example has two background images, the first image is a flower (aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

  Example

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

• CSS3 Colors

  In addition, CSS3 also introduces:
  • RGBA colors
  • HSL colors
  • HSLA colors
  • opacity
  • CSS supports color names, hexadecimal and RGB colors.

  • RGBA Colors

  • RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

    An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

  • 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 */
  • 
    

    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 Text Overflow

      The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
      It can be clipped:
      This is some long text that will not fit in the box
      or it can be rendered as an ellipsis (...):
      This is some long text that will not fit in the box
      The CSS code is as follows:

      Example

      p.test1 {
          white-space: nowrap; 
          width: 200px; 
          border: 1px solid #000000;
          overflow: hidden;
          text-overflow: clip; }
      
      p.test2 {
          white-space: nowrap; 
          width: 200px; 
          border: 1px solid #000000;
          overflow: hidden;
          text-overflow: ellipsis; }