Simple Example

Stories
In
Flight

Here we have a simple stack of three divs and we are using transforms to move the second ("In") and third ("Flight") div up to overlay the first div ("Stories").

Please note that while the content of the divs has been visually transformed, the original div placement is still in effect for the original page layout, so the following div (containing this sentence) is placed under the area where the content of examplediv3 would have been. This same effect can also be observed with transform scaled objects, so while the content of a div may be visually smaller, the original object still requires space in the page.

Also note: Opera seems currently (April 2010) not to be able to render negatve values for the transform translation, so the text elements do not overlap in that browser.


<div id="examplediv1">Stories</div>
<div id="examplediv2">In</div>
<div id="examplediv3">Flight</div>
<style>
	#examplediv1 {
		-moz-transform: translate(0px,20px);
		-webkit-transform: translate(0px,20px);
		-o-transform: translate(0px,20px);
		transform: translate(0px,20px);
		opacity: 0.5;
		font-size: 100px;
		line-height: 100px;
	}
	#examplediv2 {
		-moz-transform: translate(20px,-40px);
		-webkit-transform: translate(20px,-40px);
		-o-transform: translate(20px,-40px);
		transform: translate(20px,-40px);
		opacity: 0.3;
		font-size: 100px;
		line-height: 100px;
	}
	#examplediv3 {
		-moz-transform: translate(60px,-100px);
		-webkit-transform: translate(60px,-100px);
		-o-transform: translate(60px,-100px);
		transform: translate(60px,-100px);
		opacity: 0.2;
		font-size: 100px;
		line-height: 100px;
	}
</style>
						

Logo in CSS

Stories
In
Flight

Here we take the same layout we've created in the first example and added a container div with overflow:hidden and few other CSS flourishes.

There seems to be still a small difference between the WebKit and Firefox implementatons, since in Mozilla the text sits a few pixels higher in the container, but the difference is not big enough to be a problem for this specific example.

This is essentially the code being used for the logo at the top of these pages, the only difference being the overall size.


<div id="logocontainer">
	<div id="logodiv1">Stories</div>
	<div id="logodiv2">In</div>
	<div id="logodiv3">Flight</div>
</div>
<style>
	#logocontainer {
		overflow: hidden;
		width: 300px;
		height: 150px;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		font-family: Helvetica, Arial, sans-serif;
		color: #666666;
		background-color: #eeeeee;
		background: -webkit-gradient(linear, left top, right bottom, from(#d8d8d8), to(#f0f0f0));
		background: -moz-linear-gradient(left,  #d8d8d8,  #f0f0f0);
	}
	#logodiv1 {
		transform: translate(0px,-20px);
		-moz-transform: translate(0px,-20px);
		-webkit-transform: translate(0px,-20px);
		-o-transform: translate(0px,-20px);
		opacity: 0.5;
		text-shadow: #666666 3px 3px 4px;
		font-size: 100px;
		line-height: 100px;
	}
	#logodiv2 {
		transform: translate(20px,-80px);
		-moz-transform: translate(20px,-80px);
		-webkit-transform: translate(20px,-80px);
		-o-transform: translate(20px,-80px);
		opacity: 0.3;
		text-shadow: #666666 4px 4px 6px;
		font-size: 100px;
		line-height: 100px;
	}
	#logodiv3 {
		transform: translate(60px,-140px);
		-moz-transform: translate(60px,-140px);
		-webkit-transform: translate(60px,-140px);
		-o-transform: translate(60px,-140px);
		opacity: 0.2;
		text-shadow: #666666 7px 7px 9px;
		font-size: 100px;
		line-height: 100px;
	}
</style>
						

Discussion

Name *:        Email *:        URL:
SUBMIT
no comments yet...