Creating Web 2.0 Text with Minimal Images

Let's face it Web 2.0 is cool. Eye catching and appealing to the scenes. Web 2.0 gives a smooth side to the harsh tech of the internet. I like to call CSS Pure Internet Wow.

So to begin you need to create two gradient png files. Just like the image below shows.
Gradient Images
Name the soft Gradient.png "gradient_1" and the Hard Gradien.png "gradient_2" both should have demensions of 6px width and 50px height. Now that you have the images come the fun part, making you text internet wow.

Below is the CSS controller for your gardient text. 

<style>
body {
	margin:0;
	padding:2em 4em;
	background:#fff;
	font:90% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1 {
	font-size:300%;
	line-height:1em;
	color:#8bb544;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:-.05em;
	position:relative;	
}
h2 {
	font-size:260%;
	color:#0079b6;
	font-weight:bold;
	letter-spacing:-.05em;
	position:relative;
	margin:.6em 0;
	padding-top:1px; /* use top padding to adjust the start of the gradient  */
	width:100%;
}
h3 {
	font-size:240%;
	color:#7365a0;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:-.05em;
	padding-top:3px;
	position:relative;
	margin:.6em 0;
	width:100%;
}
h4 {
	font-size:220%;
	color:#dc5b24;
	font-weight:normal;
	letter-spacing:-.05em;
	position:relative;
	margin:.6em 0;
	padding-top:1px;
	width:100%;
}

h1 span, h2 span, h3 span, h4 span{
	position:absolute;
	display:block;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:url(gradient_1.png) repeat-x;
}
h1 span, h3 span{background:url(gradient_2.png) repeat-x;}
* html h1 span, * html h3 span{
	background-color:#fff;
	back\ground-color:transparent;
	background-image: url(none.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_2.png", sizingMethod="scale");
}
* html h2 span, * html h4 span{
	background-color:#fff;
	back\ground-color:transparent;
	background-image: url(none.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale");
}
</style >

With all the code entered properly you should get something like this. Remember some variation are to be expected from your gradient and mine. Here is the final Look:

iEntry Inc.

Pure Internet Wow

Powered By Innovation

Code-Sucks.com