schadeck

.slider {
	/* set initial width */
	width: 520px;
		   
	/* hide the content that overflows (to allow second box to show through) */
	overflow: hidden;
	display: inline-block;
		   
	/* skew container so that it has angled edge, and set up transition */
	transform: skewX(-20deg);

schadeck

/**
 * Absolute Centering
 */

div { width: 300px; height: 250px; background: green; position: relative;}
div div { width: 50%; height: 50%; background: blue;}
.center {
position: absolute;
top:0;
left:0;

schadeck

/**
 * Absolute Centering
 */

div { width: 300px; height: 250px; background: green;}
div div {width: 50%; height: 50%; background: blue; opacity: .3; }
.center {
position: absolute;
top:0;
left:0;

schadeck

/**
 * CSS3 Auto Scroll with Left Float
 */


.container {
	width:400px; 
	height:500px;
	overflow: auto;
	background:green;

schadeck

/**
 * CSS3 Auto Scroll with Left Float
 */


.container {
	width:400px; 
	height:500px;
	overflow: auto;
	background:green;

schadeck

/**
 * CSS3 Auto Scroll with Left Float
 */


.container {
	width:400px; 
	height:500px;
	overflow: auto;
	background:green;

schadeck

/**
 * Playing with :before, and :after pseudo-elements
 */
.example { 
	background: #bada55;
	display: inline-block;
 }
.example:before {
	content: ">";
	width: 2em;

schadeck

/**
 * Playing with :before, and :after pseudo-elements
 */
.example { 
	background: #bada55;
	display: inline-block;
 }
.example:before {
	content: ">";
	width: 2em;

schadeck

/**
 * Playing with :before, and :after pseudo-elements
 */
.example { 
	background: #bada55;
	display: inline-block;
 }
.example:before {
	content: ">";
	width: 2em;

schadeck

/**
 * CSS3 Auto Scroll
 */


.container {
	width:400px; 
	height:500px;
	overflow: auto;
	background:green;