WebInspectInc

/**
 * Pseudo Element Transformation Tests
 * A test of 2-dimensional transforms on pseudo-elements.
 */

.content {
background:grey;
}
.content:after {
position:absolute;

WebInspectInc

/*
 *Some <hr> Tests
 */
body {
text-align:center;
}
#rule1 {
height:1px;
background:red;
border:2px dashed white;

WebInspectInc

/**
 * Wazzat Do?
 * An interactive Web Platform Diagram. 
 * Inspired by Paul Irish: https://github.com/paulirish/lazyweb-requests/issues/38
 */

h1 {
	font-size:2em;
	padding:3px 10px;
	transition:all 0.5s linear;

WebInspectInc

/**
 * Dabble it!
 * A nice li'l bookmarklet that makes it easy to open a GitHub Gist in Dabblet.
 * Created by Timothy Miller, 2012. http://q-bobble.com/blog/
 * Free for you to use however you wisheth.
 */

section {
	width:70%;
	margin:30px auto;

WebInspectInc

/**
 * Random color pallete
 */
h1 {
	margin:0;
	padding:50px;
}
h1:first-child {
	background:#1F5EFF;
}

WebInspectInc

/**
 * Pure CSS magic line system
 * Inspiration: http://css-tricks.com/jquery-magicline-navigation/
 * This is a WIP.
 */
a:link, a:visited {
	color:black;
	text-decoration:none;
}
a:hover ~ .magicline {

WebInspectInc

/**
 * Border-Box Tests
 */
div {
	width:80%;float:left;
	height:200px;
	background:blue;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:30px;

WebInspectInc

/**
 * 3D Transforms Tests
 */
div, div:before {
	color:white;
	position:absolute;
	width:500px;height:200px;
	background:rgba(31, 111, 155,1);
	transition:all 2s linear;
	perspective:200px;

WebInspectInc

/**
 * CSS Tabs Testing Groundz
 */

#tabarea1 {
	position:relative;
	background:slategrey;
	height:200px;
}
#tabarea1 > .tab > label {

WebInspectInc

/**
 * Page flipper
 */
* {
	box-sizing:border-box;
}
.pages {
	position:relative;
	width:30%; height:250px;