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:
-
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:
-
<script src=»modernizr-1.6.min.js»></script>
-
<script>
-
Modernizr.addTest(‘backgroundclip’,function(){
-
var div = document.createElement(‘div’);
-
if (‘backgroundClip’ in div.style) return true;
-
‘Webkit Moz O ms Khtml’.replace(/([A-Za-z]*)/g,function(val){
-
if (val+’BackgroundClip’ in div.style) return true;
-
});
-
});
-
</script>
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:
-
.backgroundclip h1 {
-
background: url(images/west.jpg) -100px -40px no-repeat;
-
-webkit-background-clip: text;
-
-webkit-text-fill-color: transparent;
-
}
-
h1 {
-
color: orangered;
-
}
¡Y listo! Ahora las letras tendran un buen color sólido de fondo en lugar de un efecto incompatible.
Haz clic aquí para ver una demostración >>
Fuente original del artículo: Dynamic Drive
VIa: www.elwebmaster.com
