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

var scrollBarWidth = (function(){
    var html = document.documentElement;
    var outer = document.createElement("div");
    var inner = document.createElement("div");
    
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.overflow = "scroll";
    
    outer.appendChild(inner);

yukulele

class EventEmitter{
  constructor(selector){
    this.cb = new Map();
  }
  on(e,f){
    var cb;
    if(!this.cb.has(e))
      this.cb.set(e, cb = new Set());
    else
      cb = this.cb.get(e);

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

/**
 * 3D cube
 */
html,body{
	overflow:hidden;
}
#cube {
	position:relative;
	background:#ccc;
	perspective: 200px;

yukulele

/**
 * Smiling dice
 * http://dabblet.com/gist/3299972
 */

html{
	background: #333;
	color: white;
}
#cube {

yukulele

/**
 * CSS3 transform + transition experiment
 */
@import url("http://fonts.googleapis.com/css?family=Indie+Flower");
#e{
	margin-top:40px;
}
#e>div{
	display:inline-block;
	width:300px;

yukulele

/* font-size tests*/
div{
	background:#eee;
	margin:30px;
}

#d1{
	font-size:38px;
	width:378px;
	height:189px;

yukulele

/* css3 new units: vh, vw, vmin, vmax  */
/* (webkit) */
div{
	position:absolute;
	top:0;
	left:0;
}
#d0{
	
	height:20vmax;