Pseudo Classes and Background Clip
When I built my site I was pretty happy with its design and build, then I read Ethan Marcottes Responsive Web Design and went back and rethought some things. The site as it stands now is pretty responsive. The idea with responsive design is making the site adhere to the size of the viewport that it is being seen through. As you can imagine images can pose a problem with responsive design, you either have images that are too small being stretched to meet the size of the screen, or an image that is being shrunk down so it looks right. Neither are ideal. So any time you can replace and image with CSS is good idea.
With this in mind I looked at the “MATTHEWCARLETON” logo in the header of my site and realized that it would be nice if I could figure out a way to make it more responsive. This is where CSS3 comes in.
Here is the mark up:
<h1>matthewcarleton</h1>I started to play around with the new background clip that can be used through webkit browsers. It allowed me to take my text and use it to mask out the image I was using to give it that textured look.
h1{
background: url(bg.jpg)0 50% no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
}
That worked pretty good, but it caused an issue, I could not apply the text shadow on the h1 due to the text-fill-color. So to resolve this I used a little pseudo class action and positioning and got it working. Really easy.
h1:after{
content:"matthewcarleton";
text-shadow:-1px 1px 0px #999, -2px 2px 0px #999, -3px 3px 0px #999, -4px 4px 0px #999, -5px 5px 0px #999, -6px 6px 0px #999, -7px 7px 0px #999, -8px 8px 0px #999, -9px 9px 0px #999, -10px 10px 0px #999, 1px 1px 0px #000, 2px 2px 0px #000, 3px 3px 0px #000, 4px 4px 0px #000, 5px 5px 0px #000, 6px 6px 0px #000, 7px 7px 0px #000, 8px 8px 0px #000, 9px 9px 0px #000, 10px 10px 0px #000, 11px 11px 0px #000, 12px 12px 0px #000, 13px 13px 0px #000, 14px 14px 0px #000, 15px 15px 0px #000, 16px 16px 0px #000, 17px 17px 0px #000, 18px 18px 0px #000, 19px 19px 0px #000, 20px 20px 0px #000, 21px 21px 0px #000, 22px 22px 0px #000, 23px 23px 0px #000;
top:0px;
left:.1px;
z-index:-1;
}
This isn’t an indepth look at how I build the whole thing, so if you want to peek behind the current check out the demo here. *Make sure to look at it a webkit browser. Check out the image below for a screen cap to compare.
In the end I stuck to the image for the logo after all. This site is meant for only modern browsers, but I want to make sure I don’t go too far by only targeting webkit users. Hopefully the next version of Firefox will support background-clip and I can then consider using this.
Tweet