CSS3 Tutorial | CSS3 Borders | CSS3 Rounded Corners | CSS3 Box Shadow | New Border Properties

CSS3 Tutorial | CSS3 Borders | CSS3 Rounded Corners | CSS3 Box Shadow | New Border Properties

CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.


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

border-radius
box-shadow
border-image

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:
Add rounded corners to a div element:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 Box Shadow

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

Example:
Add a box-shadow to a div element:

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

CSS3 Border Image

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

Example:
Use an image to create a border around a div element:

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

New Border Properties

Property	Description	CSS
border-image	A shorthand property for setting all the border-image-* properties	3
border-radius	A shorthand property for setting all the four border-*-radius properties	3
box-shadow	Attaches one or more drop-shadows to the box	3

[Read More...]

CSS3 Tutorial | CSS3 Introduction | CSS3 Modules | CSS3 Recommendation

CSS3 Tutorial

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!
Example:
div
{
transform:rotate(30deg);
}

Here you will find complete CSS3 references of all properties and selectors with syntax, examples, browser support, and more.

CSS3 Introduction

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

CSS3 Recommendation

The CSS3 specification is still under development by W3C.
However, many of the new CSS3 properties have been implemented in modern browsers.

[Read More...]