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?
