CSS3 Introduction

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-radius	5.0 4.0 -webkit-	9.0	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

---

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:

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-radius - Specify Each Corner

If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

However, you can specify each corner separately if you wish. Here are the rules:

• Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
• Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
• Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
• One value: all four corners are rounded equally

Here are three examples:

1. Four values - border-radius: 15px 50px 30px 5px:

2. Three values - border-radius: 15px 50px 30px:

3. Two values - border-radius: 15px 50px:

Here is the code:

Example

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

You could also create elliptical corners:

Example

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; }

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    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.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

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

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

Note: For border-image to work, the element also needs the border property set!

Here, the middle sections of the image are repeated to create the border:

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 Colors

CSS supports color names, hexadecimal and RGB colors.

In addition, CSS3 also introduces:

• RGBA colors
• HSL colors
• HSLA colors
• opacity

CSS3 Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors.

Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

Read More

Hi I am Rasel Ahmed

I Am Working in my Office


My Facebook ID Is

Click Hear

Read More

My About

• Hi

Welcome everyone to my world
 I am Md rasel Molla from Faridpur, Dhaka, Bangladesh.I am a web designer & also work with Search Engine Optimization (SEO). Though I'm bit new in Freelancing market place but working personally with some individuals & local parties.
First i heard about Search Engine Optimization from one of my friends who was earning handsome amount of money through internet. Then i search about SEO in internet & found some good learning materials and information which made me more curious. I studied a lot about those & also took help from my friends.

I started my carrier as a Search engine optimizer with some demo keyword research & link building work (without payment). I got a lot of helpful ideas whenever i met with an excellent and well established Blogger. seo trainer -click here

Read More