CSS3 Background-Clip & @Font-Face

With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. That being said, here is another experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this. Here is the webkit happy code for this live example, sparing you all the structural bits from style.css:

.itried {font-size: 50px;}
.css {font-size: 206px;letter-spacing: 5px;line-height: 1;}
.itworked {
	font: italic 60px/0 "bistro-script-web-1","bistro-script-web-2", cursive;
	text-transform: lowercase;
	margin-bottom: 20px;
	margin-top:20px;
	}
.hoo {font-size: 258px;letter-spacing: 5px;line-height: 1;}
.view {font-size: 57px;margin-top: -15px;}
.hoo, .css {text-shadow: #4a8d97 3px 3px 0;}
.css:after, .hoo:after {
	background: url(../img/crosshatch.png) repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	display: block;
	z-index: -5;
	}
.css:after {content:"CSS Three";margin-top: -198px;margin-left: 16px;}
.hoo:after {content:"Hooray!"; margin-top: -250px;margin-left: 18px;}

.line-left, .line-right {
	border-bottom: 2px solid #2a4f54;
	width: 160px;
	display: inline-block;
	margin-bottom: -30px;
	}
.line-left {float: left;margin-top: 36px;margin-left: 15px;}
.line-right {float: right;margin-top: -34px;margin-right: 15px;}

Some of the class styles may seem oddly titled. I sourced them from the first few letters from each line of text. At the moment this will only work in webkit, so fire up Safari or Google Chrome and check out the example.

Update: Thanks to Jess Brown‘s recent contribution via Dribbble, I’ve been able to revise the code, retaining the double shading effect without having to resort to coding the same text twice: View Example