Una mera curiosidad pero muy llamativa, un lapiz que dibuja una linea hecha totalmente con CSS, nada de imágenes.
La línea se dibuja mediante la propiedad overflow y el lapiz mediante la propiedad display: block con una altura y anchura determinada y colores definidos.
El código CSS para crearlo es:
<style type="text/css"> #container {display:block; position:relative; width:300px; height:120px; background:#fff;} #pencil {display:block; position:absolute; width:32px; background:#fff; left:0; top:0;} #cap {display:block; width:32px; height:5px; background:#963; border-bottom:2px solid #000; overflow:hidden;} .penl {display:block; position:relative; width:8px; height:70px; background:#b00; overflow:hidden; float:left;} #penm {display:block; position:relative; width:16px; height:70px; background:#e00; overflow:hidden; float:left;} .penlbot {display:block; width:0; height:0; border-top:4px solid #b00; border-left:4px solid #fc3; border-right:4px solid #fc3; position:absolute; bottom:0; left:0; overflow:auto;} .penmbot {display:block; width:0; height:0; border-top:4px solid #e00; border-left:8px solid #fc3; border-right:8px solid #fc3; position:absolute; bottom:0; left:0; overflow:auto;} #pencut {display:block; clear:both; width:16px; height:0; border-top:15px solid #fc3; border-left:8px solid #fff; border-right:8px solid #fff; overflow:hidden;} .pennib {display:block; width:8px; height:15px; background:#fff; float:left; overflow:hidden;} #lead {display:block; width:0; height:0; border-top:15px solid #000; border-left:8px solid #fff; border-right:8px solid #fff; overflow:hidden; float:left;} #line {display:block; width:268px; height:10px; background:#fff; border-top:2px solid #fff; position:absolute; top:106px; left:17px;} a#drawing, a#drawing:visited {color:#e00; background:#fff; display:block; width:300px; margin:0 auto;} a#drawing:hover {color:#000; background:#fffffe; cursor:pointer;} a#drawing:hover #container #pencil {position:absolute; left:268px; top:0;} a#drawing:hover #container #line {border-top:2px solid #000;} </style>
El código HTML:
<a id="drawing" href="#nogo" > <span id="container"> <span id="pencil"> <span id="cap"></span> <span class="penl"><span class="penlbot"></span></span> <span id="penm"><span class="penmbot"></span></span> <span class="penl"><span class="penlbot"></span></span> <span id="pencut"></span> <span class="pennib"></span> <span id="lead"></span> <span class="pennib"></span> </span> <span id="line"></span> </span> </a>
Podemos ver un ejemplo de su funcionamiento.
Muy curioso, ¿verdad?