Love Dager Love Dager - 12 days ago 10
CSS Question

Transparent text cut out of background

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?

It would be sad to lose all precious SEO because of images replacing text.

Transparent text cut out of background

I first thought of shadows but I can't figure anything out...

The image is the site background, an absolute positioned

<img>
tag

Answer

It's possible with css3 but it's not supported in all browsers

With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page

style:

body {
  background: url(http://www.crystalxp.net/galerie/img/img-wallpapers-colors-krystof-----15400.jpg) repeat;
  margin:10px;
}
h1 { 
  background-color:#fff; overflow:hidden;
  display:inline-block; 
  padding:10px; 
  font-weight:bold;
  font-family:arial;
  font-size:200px;
}
span { 
  background: url(http://www.crystalxp.net/galerie/img/img-wallpapers-colors-krystof-----15400.jpg) -20px -20px repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display:block;
}

html

<h1><span>ABCDEFGHIKJ</span></h1>​

http://jsfiddle.net/JGPuZ/1/

Automatic alignment

with a little javascript you can align the background automatic:

$(document).ready(function(){
  var position = $("h1").position(); //Position of the header in the webpage
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});

http://jsfiddle.net/JGPuZ/2/

Comments