Understanding CSS3 – Part 1

CSS is a simple mechanism for adding styles, for example, fonts, colors, spacing, etc. to web documents. It is a collaboration of CSS2 with some new specifications, which we can call as modules.

Given below is a list of styles with explanations on how to add the same:

1. Rounded Corners.
2. Border Image.
3. Multiple Background.
4. Gradient
5. Shadow
6. Text
7. 2D Transformation.
8. 3D Transformation.
9.  Animations
10. Multiple Columns.
11. Box Sizing.
12. Media Query

1. ROUNDED CORNERS:

In CSS3  border-radius  property, you can give any element “rounded corners”.

CSS3 border-radius -Specify Each Corner.

The radius will be applied to all 4 corners.

All four corners are rounded equally.

One value – border-radius: 50px.

.rcorner {
 border-radius: 50px;
 background: #b53781;
 padding: 20px;
 width: 80px;
 height: 70px;
 }

<p id=”corner” class=”rcorner”> </p>

2. BORDER IMAGE:

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

.borderimg {
 border: 10px solid transparent;
 padding: 15px 25px;
 border-image: url(border.png);
 }

<div>
<p class=”borderimg”> Here, the middle sections of the image are repeated to create the border. </p>
</div>

3. MULTIPLE BACKGROUND:

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.

.multiple_bgimg {
 background-image: url(bg4.png), url(bg2.jpg);
 background-repeat: no-repeat, repeat;
 padding: 10px;
 color: #fff;
 }

<div id=”example1″>
<p> Lorem Ipsum Dolor </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </p>
<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit </p>
</div>

4. GRADIENTS:

CSS3 gradients 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:

1. Linear Gradients (goes down/up/left/right/diagonally).
2. Radial Gradients (defined by their center)
3. Linear Gradients:

Top to bottom

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.

.grad1 {
 height: 100px;
 background: linear-gradient(pink, green);
 }

<div id=”grad1″ class=”grad1″> </div>

Left to right

Linear gradients are used to arrange two or more colors in linear formats like left to right.

.grad1 {
 height: 50px;
 background: linear-gradient(left, red, blue);
 width: 50% ;
 }

<div id=”grad1″ class=”grad1″> </div>

Diagonal

Diagonal starts at top left and right button.

.grad1 {
 height: 50px;
 background: linear-gradient(left top, red, bottom right, blue);
 width: 50%;
 }

Multi-color

The following example shows a linear gradient (from top to bottom) with multiple color:

.grad1 {
 height: 50px;
 background: (red, yellow, green);
 width: 50%;
 }

Radial Gradients

Radial gradients appears at center

.grad1 {
 height: 100px;
 width: 660px;
 background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
 background: -o-radial-gradient(red 5%, green 15%, pink 60%);
 background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
 background: radial-gradient(red 5%, green 15%, pink 60%);
 width: 50%;
 }

Repeat Radial Gradients

.grad1 {
 height: 50px;
 width: 660px;
 background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
 background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
 background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
 background: repeating-radial-gradient(blue, yellow 10%, green 15%);
 }

To be continued… Don’t miss Part 2 and Part 3!