¡Hola! Mi nombre es Nelly Natalí y este es mi blog personal.

Si quieres saber más sobre mí también puedes cotillear mis perfiles en twitter y linkedin.

Categorías
Maquetación

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)!

Deja una respuesta

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