Micaela 21 de septiembre de 2009 a las 16.47
   Imprimir artículo
elWebmaster.com

Cómo dar un efecto Letterpress a tu texto con CSS3


css31Letterpress no es sólo un tipo de método de impresión industrial, sino también un genial efecto que está volviéndose increíblemente popular en la web y el cual podemos implementar en nuestros diseños.

Dado que algunos de los navegadores modernos poseen soporte para la propiedad CSS3 de text-shadow, es muy simple crear este efecto simplemente con CSS y una mínima intervención de algúna aplicación para retoque de imágenes.

Con el soporte reciente de transformación de texto en Safari y Firefox (3.1+) este efecto se puede crear fácilmente sin la necesidad de usar ninguna técnica de reemplazo de imágenes. Esto significa que el texto es mucho más sencillo de editar, y tiene el beneficio de ser renderizado directamente en el navegador.

Haz clic aquí para ver un ejemplo de su implementación»

15

Comienza creando un background simple. En Photoshop crea uno de 100×100px y rellénalo con un gris oscuro. Añade algo de textura utilizando el filtro Noise.

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. Pure CSS Letterpress Effect
  4. <h1>Line25</h1>
  5. <h2>Pure CSS Letterpress Effect</h2>

Crea un documento HTML plano, luego añade un par de líneas de texto para probar el efecto en ellas.

  1. body {
  2. background: #474747 url(bg.png);
  3. }
  4.  
  5. h2 {
  6. font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
  7. text-align: center;
  8. }

Dale estilo al texto usando las propiedades CSS usuales para editar el tamaño y la apariencia básica.

212

Ahora estamos listos para aplicar la propiedad text-shadow. Esto funciona mediante la especificación de un eje x, un eje y, el blur de la sombra y el color preciso de la misma.

  1. color: #222;
  2. text-shadow: 0px 2px 3px #555;

Para crear el efecto Letterpress, necesitamos añadir una sombra que sea más clara que el color del texto y así asegurarnos que el efecto funcione de forma correcta. Aquí estamos usando #555555 contra el #222222 más oscuro del color de texto. Un eje vertical de 2px y un blur muy sutil ayuda a conseguir la apariencia exacta que buscamos.

33

Simple ¿Verdad? Pero no se olviden que los usuarios con navegadores que no soporten esta propiedad sólo verán el texto plano, sin este bonito efecto. Será cuestión de tiempo.

Fuente: Web Builder Zone


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Richardo dice:

    Esta facil de aplicar, gracias por compartirlo 😀

  2. johanso dice:

    si, gracias por el tutorial..

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder