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

WebKit 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:

PLAIN TEXT

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;

}

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.

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:

PLAIN TEXT

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

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

PLAIN TEXT

.backgroundclip h1 {

        background: url(images/west.jpg) -100px -40px no-repeat;

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

}

h1 {

        color: orangered;

}