CSS Techniques with CSS3

1. Rounded Corners

<style type=text/css>
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class=box></div>

2.Box Shadow

<style type=text/css>
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class=box></div>

3. Text Shadow

<style type=text/css>
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class=font></span>

4. Fancy Font

<style type=text/css>
@font-face {
font-family: Loyal;
src: url(font.ttf);
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class=font></span>

5. Opacity

<style type=text/css>
.box {
opacity: .6;
}
</style>
<div class=box></div>

6. RGBA

<style type=text/css>
.box {
background-color: rgba(0, 54, 105, 0.5)
}
</style>
<div class=box></div>

7. Background Size

<style type=text/css>
.box {
background: #ccc url(image.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>
<div class=box></div>

8. Multiple Backgrounds

<style type=text/css>
.box {
width: 200px;
height: 150px;
background: url(text.png) center center no-repeat, url(bg.png) repeat-x;
}
</style>
<div class=box></div>
<style type=text/css>
.box {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}
</style>

9. Columns

<style type=text/css>
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class=box><p></p><p></p></div>

10. Border Image

<style type=text/css>
.box {
border-width: 20px;
-webkit-border-image: url(border.png) 27 round;
-moz-border-image: url(border.png) 27 round;
border-image: url(border.png) 27 round;
}
</style>
<div class=box></div>

11. Animations

<style type=text/css>
.box {
position: relative;
-webkit-transition: top 200ms linear;
}

.box:hover {
top: 20px;
}
</style>
<div class=box></div>

11. Gradients

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

12. Border Color

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

13. HSL

background-color: hsl(209,41.2%, 20.6%);

13. Transform

-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg)