CSS: Escribe tu nombre sin escribirlo!

Después de leer el artículo Formas divertidas con CSS [en] de NETTUTS, se me han venido a la cabeza un montón de formas para crear.

Es una lástima no tener más tiempo para poder jugar un ratito con esto, pero se me ha antojado trastearlo un poco y al final he sacado mi nombre xD Es una forma divertida de conocer un poquito más las oportunidades que nos dan los estilos.

Letras con css
Flickr: Letras con css

↑ Haz click sobre la imagen (o aqui) para ver el ejemplo en css.
Lo he hecho de forma muy cuadriculada, también se podría hacer con los bordes redondeados, pero eso lo dejamos para otro día.

Te cuento un poquito cómo lo he hecho por si te animas a escribir el tuyo :)

1.- He hecho un boceto con mi nombre para saber en cuantas partes debía dividirlo:

Preparando las letras
Flickr: Preparando las letras

2.- La extructura es la siguiente: un blockquote que contiene el texto, con posición relativa y dentro un span para cada parte con posiciones absolutas, asi los puedo colocar «al pixel».

<blockquote>
< span class="nuno" />
< span class="ndos" />
< span class="ntres" />
< span class="ncuatro" />
</blockquote>

3.- A las partes rectas simplemente debes añadirle el ancho y alto, nada de bordes:

.ncuatro { width:20px; height:80px; background:#00cccc; position:absolute; left:0; top:-80px;}

↑ este seria el ultimo bloque recto de la N.

4.- Para las formas triangulares debemos jugar con los bordes:

.ndos { border-bottom:40px solid #00cccc; border-left:none; border-right:30px solid white; position:absolute; left:20px; }

↑ este seria el comiendo de la inclinación de la N.

Y con esto ya deberías de poder sacarlo, ánimate y pruébalo que luego te sentirás orgulloso de haberlo conseguido :P

Por cierto, es CSS y HTML válido y compatible con todos los navegadores (si si IE6 incluido)!

  • 6 abril 2009
  • css

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *