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?

Compartir/Guardar