yukulele

/**
 * urlencoded SVG checkerboard
 */
 
html{
	min-height: 300px;
	background: tan center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%2358a"><rect x="50" width="50" height="50" /><rect y="50" width="50" height="50" /></svg>');
	background-size: 20px;
	transition:2s all;
}

yukulele

/* My first 3D trasform + transition test */

#c
{

	left: 50%;
	perspective: 230px;
	perspective-origin: 50% 80%;
	position: absolute;
	top: 50%;

yukulele

/**
 * 3D cube
 */

#cube {
	position:relative;
	background:#ccc;
	width:300px;
	height:300px;
	margin:0 auto;

yukulele

/**
 * Testing mailto forms
 */

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

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

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;

yukulele

// if Navigation Timing is not supported, fallback to Date.naw() called on start (sufficient in many cases)
// Date.now is also polyfilled
(function(p){
  if(!Date.now)
    Date.now = function(){return +new Date};
  
  if (!p.now){
    var start = (p.timing && p.timing.navigationStart) || Date.now();
    p.now = function now(){
      return Date.now() - start;