Gradients

Linear Gradient:

Diagonal gradient with multiple color stops:background: linear-gradient(225deg, red, green 20%, yellow 70%, black)

Angeled gradient with just color stops:

background: linear-gradient( 105deg,  black 20%,  magenta 80%)

Radial Gradient:
General Gradient:

background: radial-gradient( 60px 45px,  circle  closest-side,  red,  blue  60%,  green)

Circular gradient ending at the closest corner:

background: radial-gradient( 60% 55%,  circle  closest-corner,  red,  green 20%,  yellow 70%,  black)

Elliptical gradient ending at the farthest side

background: radial-gradient( 20px 40px,  farthest-side,  white 20%,  magenta)

Note: Since the default value (respectively the default shape) for a radial gradient is an ellipse it doesn’t have to be specified.

Repeating Radial Gradient:

Smooth gradient repeated two times:

background: repeating-radial-gradient( closest-side,  red,  green 20%,  blue 50%) 

Note: Since the default starting point for a radial gradient is at the center of the gradient box it doesn’t have to be specified. The same goes for the shape. Based on the centered staring point it is a circle.

Sharp transitioning gradient repeated indefinitely:

background: repeating-radial-gradient( 30% 40%,  red,  red 11px,  black 11px,  black 22px)

Animations

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.box').hover(function(){
        $(this).stop().animate({
            top: '20px'
        }, 300);
    }, function(){
        $(this).stop().animate({
            top: '0'
        }, 300);
    });
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

Border Image

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
    $('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

<style type="text/css">
.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;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

Columns

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
    $('.columns').columnize({
        columns: 2
    });
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
 
<div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

CSS3 Method:

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
 
<div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Multiple Backgrounds

Old Method:

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
    .box2 {
    width: 100%;
    height: 100%;
    background: url(images/text.png) center center no-repeat;
    }
</style>
 
<div class="box">
    <div class="box2">
        <!--CONTENT-->
    </div>
</div>

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn’t it?

CSS3 Method:

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

Background Size

Classic Method:

<style type="text/css">  

.box {  

position: relative;  

overflow: hidden;  

}  

    .box img {  

    position: absolute;  

    top: 0;  

    left: 0;  

    width: 50%;  

    height: 50%;  

    z-index: 100;  

    }  

    .box .content {  

    position: absolute;  

    z-index: 200;  

    }  

</style>  

  

<div class="box">  

    <div class="content">  

        <!--CONTENT-->  

    </div>  

    <img src="123.jpg" alt="" />  

</div>  

CSS3 Method:

<style type="text/css">  

.box {  

background: #ccc url(123.jpg) no-repeat;  

-webkit-background-size: 50%; /* Safari */  

-o-background-size: 50%; /* Opera */  

-khtml-background-size: 50%; /* Konqueror */  

}  

</style>  

  

<div class="box">  

    <!--CONTENT-->  

</div>  

RGBA

PHP Old Method:

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
 
header('Content-type: image/png');
imagepng($image);
?>

Now just apply that to a div…

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

Opacity

Old Method:

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

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

Fancy Font

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
    Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
 
<span class="font">The quick brown fox jumps over the lazy dog.</span>

CSS3 Method:

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
 
<span class="font">The quick brown fox jumps over the lazy dog.</span>

Text Shadow

Old Method:

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
 
<div class="fonts">
    <span class="font">The quick brown fox jumps over the lazy dog.</span>
    <span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

CSS3 Method:

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
 
<span class="font">The quick brown fox jumps over the lazy dog.</span>  

Box Shadow

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
    $('.box').dropShadow({
        left: 5,
        top: 5,
        opacity: 1.0,
        color: 'black'
    });
});
</script>

<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

<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">
    <!--CONTENT-->
</div>

Round Corners

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
    $('.box').corners('10px');
});
</script>
 
<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

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