Morton 16 de noviembre de 2010 a las 08.31
   Imprimir artículo
elWebmaster.com

CSS3: Gran efecto para mostrar imágenes a través del texto


css3wide1WebKit soporta la nueva propiedad background-clip de CSS3, lo que es una buena noticia ya que puedes utilizarla para lograr este efecto impactante en el que las letras están conformadas por la imagen de fondo. Y lo mejor de todo, es que tan sólo bastan unas pocas lineas de código.

Fuente original del artículo: Dynamic Drive
Traducción realizada por elWebmaster.com

Lo que sigue a continuación es el código necesario para poner este efecto en acción:

[CSS]
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[/CSS]

Eso es todo. Elige una imagen de fondo, colócala en el elemento, luego inserta el efecto y configura el color de relleno del texto como transparente.

imagebehindtext

Haz clic aquí para ver una demostración >>

Compatibilidad

Lamentablemente, este efecto es sólo compatible con navegadores que utilicen Webkit. Por lo tanto, necesitamos un plan B para mostrar correctamente este texto a aquellos con un navegador no compatible.

La mejor herramienta para este tipo de resguardos es Modernizr, del que ya hemos hablado anteriormente. Simplemente a√Ī√°delo a tu sitio, y se ocupar√° de agregar classnames al tag html de tu p√°gina indicando lo que el navegador que est√° siendo utilizado es capaz de hacer. Como Modernizr a√ļn no posee por defecto la propiedad background-clip, se la a√Īadiremos nosotros con el siguiente c√≥digo:

[JAVASCRIPT]


[/JAVASCRIPT]

Si Modernizr detecta que el navegador soporta esta propiedad, le asignar√° al tag html la classbackgroundclip“. De lo contrario, le asignar√° la class “no-backgroundclip“.

Y ahora sí, este es el nuevo código:

[CSS]
.backgroundclip h1 {
background: url(images/west.jpg) -100px -40px no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h1 {
color: orangered;
}
[/CSS]

¡Y listo! Ahora las letras tendran un buen color sólido de fondo en lugar de un efecto incompatible.

properfallback

Haz clic aquí para ver una demostración >>

Fuente original del artículo: Dynamic Drive
Traducción realizada por elWebmaster.com


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

Comentarios (5)

  1. Santi dice:

    Genial. No conocía esta propiedad del CSS3, a ver si termina de implementarse por la totalidad de navegadores. Realmente muy interesante :)

  2. mr.evo dice:

    Excelente tip .. sin embargo, no funcionó ni con FF 3.6.12, ni con Opera 10.63, y, obvio, mucho menos con IE8

    Me hizo falta probar con Chrome y Safari, pero qué navegador es compatible con este efecto?

  3. links for 2010-11-17 | Tombola! dice:

    […] CSS3: Gran efecto para mostrar im√°genes a trav√©s del texto (tags: css3) […]

  4. jorge echeverria dice:

    introduciendome lentamente en estas nuevas posibilidades de comunicacion, aprecio que por ahora la mitad ya la interpreto solo y otros mail con ayuda-muchas gracias

  5. Colocar una imagen como fondo de texto sólo con CSS | SummArg dice:

    […] El Webmaster hablaron de c√≥mo utilizar una imagen para rellenar texto con CSS3, adem√°s de ofrecernos el modo […]

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