TDC in CSS3

Earlier this year I was fortunate enough to become acquainted with Brian Hoff through DesignSwap and Dribbble. After being really impressed with his redesign shots for The Design Cubicle , I was thrilled when Paravel got the call from Brian asking us to jump on board to provide the HTML & CSS. Working with Brian has been a privilege and a joy. So much so, that I couldn’t help but spend some free time taking his beautiful masthead design and translating it into CSS. Using the same techniques from my last background-clip & @font-face experiment, came up with this example:

.the {font: 30px "adrianne-1","adrianne-2","Times New Roman", Times, serif;}
.design {font-size: 68px;line-height: .9;text-shadow: #f5f5f5 -1px 1px 0;}
.cubicle {font-size: 40px;letter-spacing: 1px;line-height: .8;font-weight: 500;}
.main {
	font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2";
	text-transform: uppercase;
	line-height:1;
	font-weight: bold;}
.tdc {
	background: url(../img/diag.png) repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	z-index: -5;
	display: block;
	text-shadow: none;
	font-size: 220px;
	margin-top: -112px;
	height: 160px;
	font-weight: 700;}
.diamond {
	margin-bottom: 12px;
	margin-top:0px;
	font: italic 14px/0 "Times New Roman", Times, serif;}
.view {
	font: 15px "adrianne-1","adrianne-2", serif; margin-top: 10px;}
.explanation{
	font: 12px/1.7 "adrianne-1","adrianne-2",serif;
	margin-top: 0px;
	margin-bottom: 30px;}
 .line-left, .line-right {
 	border-bottom: 1px solid #f8f8f8;
 	width: 150px;
 	display: inline-block;
 	margin-bottom: -30px;
 	border-top: 1px solid #cdcdcd;}
.line-left {float: left;margin-top: 0px;}
.line-right {float: right;margin-top: -17px;}

I think I came pretty close. The main differences are related to the fonts I used, as Tungsten and Sentinel aren’t yet @font-face-able. Fortunately, Typekit was able to serve up Refrigerator Deluxe and Adriane as more than suitable replacements. Just like my last last experiment, 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.

4 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Auré

    What an impressive rendering.
    CSS3 amazed me everyday.

    How will you manage the rendering on other browsers ?
    Same rendering everywhere (using images?) or graceful degradation ?

    The rendering of :

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    is really interesting.

    • Trent

      Auré, glad you like it... Unfortunately, I wouldn’t recommend implementing these techniques outside of experimentation for the time being. My hope is that soon, all browsers will let us use the -background-clip property on text.

  • chriskalani

    Hot + Sexy dude. Decent use of your time I’d say.

  • Paris Vega

    Beautiful.

    “-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;”

    Didn’t even know those were things! Thanks for the enlightenment!

Leave a Reply