Friday, 7 April 2017

FadeOutBottom

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;
}

No comments:

Post a Comment