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
16 Responses
Leave a comment or contact me via Twitter @TrentWalton
I know it normally is frowned upon to use cuss words in comments BUT...
You are a f*&^ing badass. I can’t believe you pulled that off with code. (And the design is awesome, too)
I want to start a site similar to Will It Blend and call it “Will it CSS”
I second Christopher Meeks. Your work makes me feel like an idiot child.
Love the “Will it CSS” idea. I want in. :-)
I second that, the stuff you have been doing lately is freaking awesome.
Niiiice.
In the words of Futurama’s 80’s guy: “AWESOME. AWESOME TO THE MAX.”
Very neat and cleaver, an optimal solution would be not to have to hack the HTML and avoid the repetition to achieve the same effect.
Frank, Thanks for bringing that up. Just the kick in the pants I needed to incorporate Jess Brown’s improvement.
A way to avoid repetition and keep your content out of the css is to use the title attribute of the element, so instead of:
.css:after {content:“CSS Three”;}
use
.css:after {content:attr(title);}
This promotes semantic markup as well as keeping your content strictly in the html.
More info here...
http://sixrevisions.com/css/snazzy-hover-effects-using-css/
@Trent: hah! …and then, after you CSS it, you can say “don’t breathe this, it’s CSS dust.”
I’m looking forward to it :)
it doesn’t work on FF
@davide: Yup... mentioned that in the 2nd paragraph :)
Lovely use of the property you found there!
I would never come up with such use for that CSS rule =)
SVG emulation of -webkit-background-clip:text (except IE):
http://www.myadzel.ru/tests/html/text-background/
Nice article, Trent. Just wanted to let you know I’d used this technique on a little site I built a couple of weeks back: http://dispatch.decafsucks.com/
I played around with this tutorial and made this blog post about it
http://www.andyfoley.co.uk/post.php?blog=0229
That’s pretty cool! Quoting Lebowski, is always a nice thing to do! “It’s a league game, Smokey”