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.

Tag(s): CSSCSS3Markup