WebKit (Safari, Google Chrome, Epiphany, Midori y alguno que otro más) soportan una caracteristica de CSS 3 bastante llamativa llamada background-clip, la cual se puede utilizar para hacer algunos efectos bien majos.
Vamos allá. Vamos a usar una imagen que será visible a través del texto.
La Idea
h1 {
color: white; /* Fallback: si por lo que sea no funciona hay que darle un color al texto, no? */
background: url() no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Ahí está, bien sencillo. Se establece un fondo para el elemento, se recorta y se establece que el color de relleno va a ser tranparente.
El Problema
Pues el gran problema es que esto solo funciona, como dijimos antes, con navegadores basados en webkit. Asi que, ¿qué ocurre si vemos la web en un navegador que no lo es?
Como puedes ver en el codigo de arriba, hemos declarado un color como color principal del texto. Este valor será invalidado por -webkit-text-fill-color en los navegadores que lo soporten, y en los que no, como tambien ignorarán -webkit-background-clip veremos la imagen realmente de fondo del texto (que estará en blanco, como definimos al principio)
Bueno, no es que sea lo mejor del mundo ¿verdad? Vamos a ver si lo podemos mejorar
Un “Falback” mejor
La herraienta definitiva para mejorar las degradaciones es Modernizr. Simplemente hay que incluir un pequeño Javascript en la página y añadir las clases al h1 de tu página indicando que el actual navegador es capaz de ello.
Aunque un no hay un test de esta caracteristica en Modernizr, pero por suerte hay un “hook” para ello.
<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>
Ahora sabemos con certeza si el navegador con que estamos viendo la web soporta background-cpli o no, si lo hace, el tag h1 tendrá la clase backgroundclip, y si no, la no-backgroundclip. Así que ahora solo se aplicará el fondo si el navegador acepta background-clip.
.backgroundclip h1 {
background: url(images/west.jpg) -100px -40px no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
color: orangered;
}
Ver demo
Fuente: CSS-tricks
