CSS 3

• CSS3 Techniques You Should Know
• CSS3 Hover Tabs without JavaScript
• Quickie CSS3 Tricks with Fallbacks
• HTML5 CSS3 starting template

Information taken from: 11 Classic CSS Techniques Made Simple with CSS3

Rounded Corners

Classic

 <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

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

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

Box Shadow

Classic

 <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

 <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>

Text Shadow

Classic

 <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

 <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>

Fancy Font

Classic

 <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

 <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>

Opacity

Classic

 <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

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

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

RGBA

Classic

 <?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);
 ?>

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

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

CSS3

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

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

Multiple Backgrounds

Classic

 <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>

CSS3

 <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>

Columns

Classic <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

 <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>

Border Image

Classic

 <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

 <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>

Animation

Classic

 <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

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

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