Efecto gráfico para texto | Oloblogger Esta es una pequeña tontería para resaltar un texto. Simula un papel rasgado y el texto quedaría com...

27 de enero de 2008

Efecto gráfico para texto

Esta es una pequeña tontería para resaltar un texto. Simula un papel rasgado y el texto quedaría como escrito en otro papel que hubiera debajo.

Primero hay que buscar o diseñar una imagen que parezca un papel rasgado. Si no la encontramos, en estos enlaces teneis ambas formas de conseguirla:

Dicen que la realidad suele superar a la ficción, así que si tienes escaner, también puedes rasgar un papel y luego escanearlo. Ponle algún fondo oscuro para poder recortarlo después fácilmente con cualquier programa de dibujo.

Para perezosos, ofrecemos esta imagen, válida para fondos negros

Fondo papel rasgado
Vale. Tenemos la imagen y la partimos en dos, una para arriba y otra para abajo. Ahora recortamos cada parte para dejar justo lo que nos sirve. Tendremos algo así:

Parte inferior


En este ejemplo, la parte que quedará en el centro se ha coloreado de gris. Los bordes tienen que tener el mismo color que luego le pondremos al fondo del texto. Como el fondo será un color plano, los bordes no podrán terner degradados ni similar, para que no se note el "empalme".

Una vez que tenemos las imágenes, el resto es fácil. Este es el código:

<div align="center"><table width="336" cellpadding="20" bgcolor="#000000"><tbody><tr><td><table cellpadding="10" cellspacing="0" width="336"><tbody><tr><td background="http://1.bp.blogspot.com/_0eC4K-qZ7AM/RsB2kElakTI/AAAAAAAABJA/hoR1Qzv1JW8/s400/rasgado+arriba+336x40.jpg" height="40" width="336"></td></tr><tr><td align="center" bgcolor="#b9b99f">AQUI VA LA FRASE</td></tr><tr><td background="http://3.bp.blogspot.com/_0eC4K-qZ7AM/RsB2NklakRI/AAAAAAAABIw/5O8XXmC7OSo/s400/rasgado+abajo+336x40.jpg" height="40" width="336"></td></tr></tbody></table></td></tr></tbody></table></div>

Se sustituye el AQUI VA EL TEXTO por lo que queramos poner y las dos imágenes por las correspondientes vuestras (primera=ARRIBA - segunda=ABAJO). El número 336 hay que sustituirlo por el del ancho de vuestras imágenes, teniendo en cuenta que habrá que reducirlo si el espacio disponible es menor (por ejemplo en una barra lateral) y el 40 hay que cambiarlo por el alto (este siempre será fijo). El primer BGCOLOR es el del margen (en este caso negro=#000000. Si no lo quereis, basta con poner el valor de ese CELLPADDING a 0. El segundo BGCOLOR es el que tiene que coincidir con los bordes de las imágenes que antes citábamos. Los que están en contacto con el centro del conjunto.

El resultado:


AQUI VA LA FRASE, QUE POR MUY LARGA QUE SEA SIEMPRE VA A QUEDAR BIEN. PODEMOS UTILIZAR ESTE EFECTO PARA COLOCAR UNA CITA ALEATORIA. TAMBIEN PODEMOS COLOCAR ENLACES, IMAGENES, ETC.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

6 comentarios :

  1. ESte truquito es muy lindo.
    Intentaré!
    Gracias ♪

    ResponderEliminar
  2. SUPERRRRRR UUUY YEAAAA

    ResponderEliminar
  3. Anónimo19/1/10 0:59

    no entendi nada verro

    ResponderEliminar
  4. hola, Olo, me encanta tu blog. Estoy diseñando un webcómic y este truco es ideal para mi sidebar, pero no termino de entender dónde debo poner el código y cómo lo adapto para toda la sidebar. Muchas gracias, eres un crack.

    ResponderEliminar
  5. David, para la sidebar entera te vendrá mejor esta otra entrada: http://goo.gl/tH3kc. Suerte.

    ResponderEliminar
  6. Realmente hermoso !! En el futuro de seguro me será muy útil (ahora ni hablar, acabo de retomar mi antigua plantilla y primero debo conseguir que las personas no huyan despavoridas al entrar en mi blog) xD Saludos !

    ResponderEliminar