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)