yukulele

/*matrix transform experiments*/

div{
	width:200px;
	height:200px;
	margin:50px;
	background:grey;
	transition:transform 1s ease;
	border-top-right-radius:100px;
	transform:matrix(1,0,0,1,0,0);

yukulele

h1 {color: #345; text-shadow: 1px 1px 2px #aaa; font-size:1.8em}
h2 {color: #567; text-shadow: 1px 1px 2px #aaa; font-size:1.1em}
h3 {margin-bottom: 0; color: #678; text-shadow: 1px 1px 2px #aaa; font-size:1em}
#sizer{
	resize:horizontal;
	max-width:800px;
	background:#ccc;
	padding:40px;
	border-radius:20px;
	overflow:hidden;

yukulele

/* Hexagon kitty - By @LeaVerou
   Disappointingly inflexible, but still interesting methinks.
 */

.hexagon {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
	transform: scale(1.25,.707) rotate(-45deg);

yukulele

/* height of higher child */

nav{
	font-size:3em;
	position:absolute;
	z-index:2;
}
a{
	text-decoration:none;
	display:inline-block;

yukulele

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

yukulele

/**
 * Negative animation-delay to start mid-animation
 */

@keyframes test {
	to { background: black }
}

html {
	background: white;

yukulele

/**
 * gracefully degrading switch-style checkboxes
 * 		need <label> wrapper and <span> immediatly after checkbox.
 */
 input[type="checkbox"]+span{display:none}
input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
	display:none;
}
input[type="checkbox"]:not(:checked)+span, 

yukulele

/**
 * rgba with 0 alpha component
 */
ul>li{
	height:30px;
	line-height:30px;
	border:1px dotted grey;
	margin:10px;
	font-family:sans-serif;
}

yukulele

/*
motion blur
*/
html{
	text-align:center;
}
div{
	background:rgba(255,0,0,.1);
	display:inline-block;
	margin:20px;

yukulele

/**
repeating-linear-gradient bug on chrome
 */

html {
    height: 100%;
    background-image:repeating-linear-gradient(45deg, rgb(231, 209, 156), rgb(231, 209, 156) 2px, transparent 2px, transparent 4px);
    /* background-size: 4px 4px; */
}