We shouldn’t be use old techniques when there’s a new age coming. New age includes the use of CSS3. OK! I will show some tutorials for CSS3. You can learn easily with CSS3. You can learn following in this tutorials. Box shadow, Text shadow, Rounded corners, multiple backgrounds and Columns.

Box Shadow CSS3

.box {

box-shadow: 5px 5px 2px black;

-moz-box-shadow: 5px 5px 2px black;

-webkit-box-shadow: 5px 5px 2px black;

}

Text shadow CSS3

.font {

font-size: 20px;

color: #2178d9;

}

.font {

text-shadow: 0 1px 0 #000;

}

Rounded Corners CSS3

.box {

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

Multiple Backgrounds CSS3

.box {

width: 200px;

height: 150px;

background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;

}

Columns CSS3

.columns {

-moz-column-count: 2;

-webkit-column-count: 2;

}

This articles is second part of Five Effects of CSS3. Now, I will show some of CSS3 generation.

Text Shadow

.font {

font-size: 20px;

color: #2178d9;

}

.font {

text-shadow: 0 1px 0 #000;

}

Fancy Font

@font-face {

font-family: ‘Loyal’;

src: url(‘loyal.ttf’);

}

.font {

font-family: Loyal;

font-size: 20px;

}

Opacity

.box {

opacity: .6;

}

RGBA

.box {

background: rgba(239, 182, 29, .25);

}

Border Images

.box {

border-width: 20px;

-webkit-border-image: url(images/border.png) 27 round;

-moz-border-image: url(images/border.png) 27 round;

border-image: url(images/border.png) 27 round;

}

Animation

.box {

position: relative;

-webkit-transition: top 300ms linear;

}

.box:hover {

top: 20px;

}