Ejercicio de imágenes, por @robertvalencia

dabblet.css

/**
 * Ejercicio de imágenes, por @robertvalencia
 */


/**
 * El siguiente código aplica un tamaño
 * de 33% de ancho a cada imagen `img`
 */
img{width:33%;}


/**
 * El siguiente código aplica un efecto
 * de escala de grises a cualquier imagen,
 * aunque la original esté a color.
 */
.escala-de-grises{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

/**
 * El siguiente código asigna una imagen
 * de fondo a un elemento HTML.
 * En este caso, a un título `h1`:
 */
h1{
color:white;
background: url('http://farm9.staticflickr.com/8091/8468221133_5f3f4de603_o.jpg');
padding:3em 1em .5em;
font:normal normal normal 3em/1.6 Avenir, sans-serif;
background-size:40% auto;
text-shadow:2px 2px 3px rgba(5,5,5,.7);
}

dabblet.html

<img src="http://farm1.staticflickr.com/1/135247_fbc3026797_o.jpg" alt="coins by MademoiselleChaos">
<img src="http://farm3.staticflickr.com/2410/2498244184_456112e45c_z.jpg?zz=1" alt="Coin Jar by Pics by Mike">
<img class="escala-de-grises" src="http://farm3.staticflickr.com/2410/2498244184_456112e45c_z.jpg?zz=1" alt="Coin Jar by Pics by Mike, Grayscale">
<h1>I love coins!</h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}