Designer Trent Walton‘s CSS3 Background Clip is his version of the Quoting Lebowski series’ design, mimicking its styles, fonts and colors without the use of any Photoshop. Just pure CSS, folks!

Here is the CSS structure.

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;}

Note: This works on webkit so if you’re using Chrome, Safari or Firefox, set it aside for the meantime to view the uber-cool DEMO.

Incoming search terms for the article:

• css style font
• bistro script free
• bistro script web free
• web css structure
• line height css3
• kerning in css
• text font css3
• css3 styles pdf file
• bistro script
• css3 background-size hatched