This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.
Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<head>
<title>Fade Out Bottom</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bottom_fade
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottom-fade.png',sizingMethod='scale');
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.clientWidth);
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="page_wrap">
<h1>Fade Out Bottom</h1><br/>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
</p>
<div id="bottom_fade"></div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-68528-29";
urchinTracker();
</script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
border: 0;
}
body
{
font-family: "Lucida Grande", Georgia, sans-serif;
font-size: 67.5%;
}
p
{
font-size: 1.1em;
line-height: 1.6em;
}
#page_wrap
{
width: 600px;
z-index: 1;
margin: 10px auto;
}
#bottom_fade
{
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url("bottom-fade.png") bottom center no-repeat;
}
Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<head>
<title>Fade Out Bottom</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bottom_fade
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottom-fade.png',sizingMethod='scale');
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.clientWidth);
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="page_wrap">
<h1>Fade Out Bottom</h1><br/>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR/><BR/>
</p>
<div id="bottom_fade"></div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-68528-29";
urchinTracker();
</script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
border: 0;
}
body
{
font-family: "Lucida Grande", Georgia, sans-serif;
font-size: 67.5%;
}
p
{
font-size: 1.1em;
line-height: 1.6em;
}
#page_wrap
{
width: 600px;
z-index: 1;
margin: 10px auto;
}
#bottom_fade
{
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url("bottom-fade.png") bottom center no-repeat;
}
No comments:
Post a Comment