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)