blog.robtarr.net

No, I’m not lost in the new CSS properties – I’m experimenting with them. About a month and a half ago somebody tweeted something (I tihnk it might have been Cameron Moll) about wanting to see a CSS3 version of the LOST intro.

This sounding appealing to me, so I threw together some code one afternoon, but never really got the finishing polish on it. Frankly, I kind of forgot about it until something made me think about it just now. So, here it is, in it’s unpolished, ready to be criticized and improved.

Check out the DEMO (Currently only works in Safari & Chrome)

The HTML is pretty simple:

	Lost

The CSS really isn’t that bad either:

A little something to set the stage.

html, body {
	background: #000;
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

I used a white text shadow to blur the text and then rotated it to the starting position.

#lost {
	text-shadow: 0px 0px .42em #fff;
	color: rgba(255, 255, 255, 0);
	display: block;
	font-family: Futura, Helvetica, Arial, sans-serif;
	font-size: 4em;
	letter-spacing: .1em;
	position: relative;
	text-transform: uppercase;
	top: 35%;
	-webkit-transform: rotate(-20deg);
}

This is just to get the container into the right position.

#container {
	height: 100%;
	margin: 0 0 0 -150%;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 400%;
}

On hover it uses the CSS transition to gradually change the text shadow from the blur effect to the 3D block effect.

#container:hover #lost {
	color: rgba(255, 255, 255, .7);
	font-size: 85em;
	letter-spacing: .13em;
	text-shadow: 1px 1px 0 #777, 2px 2px 0 #777, 3px 3px 0 #777,
		4px 4px 0 #777, 5px 5px 0 #777, 6px 6px 0 #777,
		7px 7px 0 #777, 8px 8px 0 #777, 9px 9px 0 #777,
		10px 10px 0 #777, 11px 11px 0 #777, 12px 12px 0 #777;
	-webkit-transform: rotate(20deg);

	/* transition */
	-webkit-transition-property: color, font-size, letter-spacing, text-shadow, -webkit-transform;
	-webkit-transition-duration: 8s, 9s, 9s, 5s, 7s;
	-webkit-transition-timing-function: ease-in;
}

Check out the DEMO and let me know what you think, and how you would do it differently.

Technology, Web Development