[Tut] Bottom Page Fadeout: Beginner Friendly

2 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

bottompagefadeout.png
The image above is an example of a simple web layout I made for this tutorial/effect, and the web layout is available for download along with the gimp document, photoshop document, images for the effect, codes, etc: (for more included in the download go to the bottom of this post)

NOTE: For this tutorial save all your images on your desktop, or where ever you save your files for this tutorial make sure their all in the same folder/directory just to make this easier for new users to HTML, and CSS.

Step 1: Making The Fade Image
Now first thing were going to do in order to set this tutorial off is we need to make an image that'll display at the bottom of our web page so lets say out background color is white, we need to create an image that is fading from the color white to completely transparent, and for this effect were going to be using Gimp, you can really use any image editor for this effect, just make sure it supports transparency (specifically a transparent background)

So first open up open Gimp, and make the width 600px and height 200px, then open up the advanced options, and change fill with from background color to transparency .

Now your default colors for your FG (foreground color) you have black, and BG (background color) is set to white, you can flip these colors simply by pressing "X" on your keyboard, cause we need white as our FG color, or you can simply double click your FG color and change it manually, but it's just faster pressing "X".

Now grab your Blend Tool "L" and left click from the bottom to the top of the dashed lines, and btw you can hold "SHIFT" while you're clicking and dragging to make a straight line, just make sure the gradient doesn't go past the top dashed lines, you can keep redoing it until you get a result that you like.
bottompagefadeimg.png
Now just go to File/Save As and save it as bottom-fade.png (it can really be saved as whatever.png but this is just gonna tell us what it's for)

Step 2: The Stylesheet
Now open up a text editor and go to File/Save As and save it as style.css, this is going to tell us that this is the style sheet for our website.

So obviously cause we chose a white gradient for our text to fadeout so were going to have our background be white, now by default it's white, but if you really need/wanna make sure and tell your background to be white you can do so with the following code.
Code: Select all
body {
background-color:#FFF;}
TIP: If you don't know hexadecimal colors you can head here to use the hex color generator.

So first lets position our bottom page fadeout image.
Code: Select all
#bottomfade {
	position:fixed;
	left:0px;
	bottom:0px;
	width: 100%;
	height: 200px;
	z-index: 2;
	background-color:transparent;
	background-image:url("bottom-fade.png");
	background-repeat:repeat-x;
	background-position:bottom center;}
The #bottomfade tells us this is the name of our div.

postion:fixed; tells us that when we scroll our fix will follow us when we scroll (meaning it'll stay put, and not move at all which is what we want to do)

left:0px tells us that our div is going to be aligned directly on the left.

bottom:0px tells us that our div is going to be aligned right on the bottom.

width: 100%; tells us that our div is going to fill the whole width of the bottom, so when we put our image down it'll make the text/images fade out, which again is what we want.

height: 200px; Remember we set the height of our bottom-fade.png image to 200px in height, this will let us see the whole image.

z-index: 2; Say we're going to set the z-index of our content div to 1, which is where our content (text/images/etc:) will be so we haft to set our div for our bottom fadeout image to 2 so that it'll display over our content div.

background-image:url("bottom-fade.png"); Now cause we saved our image, and style.css file on our desktop, this is just going to set our bottom fadeout image in our div.

background-repeat:repeat-x; this simply repeats the background image we made so it just don't display at 1 spot, and this will make everything fadeout on the bottom when being scrolled down. (TIP: Smaller images load faster than bigger images)

Now that we've created our div for our bottom page fadeout image, now we need to make a new div for our content (text/images/etc:)
Code: Select all
#content {
	position:absolute;
	top:25px; 
	width:600px;
	height:100%;
	margin-left:300px;}
Now #content tells us that "content" is the name of this div.

position:absolute; tells us that our div will just stay put so when we scroll we can see all the contents that'll show past the scrollbar.

top:25px; tells us that our div will go down 25px down from the top.

width:600px; tells us that our div is 600px in width

height:100%; tells us that our div is filling the whole height of our page.

margin-left:300px; this tells us that we've moved our div 300px to the right (if it was negative it'd be left, if you're confused on your X, and Y coordinate planes please read, and look into the Cartesian Coordinate System)

Step 3: The Site
Now while you still have your text document open go to File/New and make a new document, and save that as index.html as now we need to use HTML (HyperText Markup Language) to put down our text, images, links, videos, etc: for our DIV.

So first lets make our header tags, give our site a display name with the title tags, and incorporate our CSS (Cascading Style Sheets) we created so we have everything positioned and that we want as all we have to do is mark everything up.
Code: Select all
<head>
<title>Site Name: Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Now we need to add our html tags, body tags, and divs.

Whatever's displayed in between the div tags (Make sure the ID is set to the div's name you set it as) like content for example if you just put text there text will show, but it varies from div to div, depending on what you set it's style to in the style sheet.

So here's the code you'd need to finish up this index.html file.
Code: Select all
<html><body>
<div id="content">
Content text all goes here<br /><br /><br /><br /><br /><br /><br /><br />
</div>

<div id="bottomfade"></div>
</body>
</html>
Now you can move the index.html file into your web browser and see your simple web layout you created in action.

Step 4: Full Code

Here's the whole code for your style sheet, which should be saved as style.css.
Code: Select all
body {
font-family:Lucida Grande;
font-size:90%;}

#content {
	position:absolute;
	top:25px; 
	width:600px;
	height:100%;
	margin-left:300px;}

#bottomfade {
	position:fixed;
	left:0px;
	bottom:0px;
	width: 100%;
	height: 200px;
	z-index: 2;
	background-color:transparent;
	background-image:url("bottom-fade.png");
	background-repeat:repeat-x;
	background-position:bottom center;}
Here's the whole code for your index.html file.
Code: Select all
<head>
<title>Bottom Page Fadeout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<html>
<body>
<div id="content">
Turpis, eu aliquam. Elementum sit montes, nunc adipiscing habitasse sit. Montes, etiam tincidunt urna vel, parturient lectus eu lacus pulvinar habitasse odio, mauris aliquet, adipiscing. Turpis lorem, placerat natoque egestas! Lundium mauris amet a massa, aliquet? Cum mauris, sed. Odio. Ac vut tincidunt egestas ultricies, elementum placerat. Parturient tristique cras. Proin ac nec dictumst, elementum in, habitasse elit, ac auctor sagittis integer in cum rhoncus urna? Mid eu, tincidunt amet, montes, rhoncus cras habitasse integer, integer elit sit, cum augue proin cum lectus scelerisque, turpis? Hac placerat! Nunc a adipiscing, mattis ac mid platea nisi mus lacus, parturient pulvinar vel, ut lorem urna sed! Sagittis, auctor tortor nec turpis et in est, integer. A ultricies rhoncus magnis, lacus? Tempor porta.<br /><br />

Nascetur, non egestas odio! Parturient, parturient lectus, porttitor dictumst, a cras, facilisis placerat tortor vut! Ac ut magna ultricies? Eros tristique penatibus ultrices ultricies etiam montes et? Platea ut! Sagittis, turpis placerat. Pulvinar, tincidunt mattis, augue montes pellentesque arcu ac? Ultrices mid est mus turpis platea sit! Risus a diam, urna porttitor magna massa augue! Et a? Adipiscing porta purus massa odio tincidunt scelerisque purus? Hac elementum massa diam dolor turpis augue proin mus? Vut, scelerisque sed nec urna, tincidunt porttitor mattis tincidunt. Ridiculus urna! Placerat facilisis, scelerisque adipiscing. Diam etiam lacus? Mauris penatibus adipiscing sociis et sed placerat placerat odio, integer scelerisque! Elementum porttitor non etiam non habitasse est massa velit. Ridiculus elementum parturient, aliquet rhoncus urna etiam.<br /><br />

Nunc? Augue? Dictumst diam ac mid, dignissim nascetur placerat pellentesque nec? In nunc elit augue, ultrices vel ac, amet sagittis sed urna sagittis tempor ultricies rhoncus facilisis lundium elit, amet in, vel arcu tristique? Penatibus nascetur in integer adipiscing scelerisque turpis odio et ultrices. Dolor? Magnis placerat! Non integer porta turpis in enim cursus adipiscing! Cum! Purus mattis odio egestas adipiscing adipiscing ridiculus integer aenean, facilisis egestas, augue, proin sed augue. Arcu et dictumst, arcu? Nunc sed integer platea est tempor ut augue, elementum, nisi arcu adipiscing arcu nec. Enim lorem, proin diam! Dapibus, dolor, odio eu in! Magnis vut ac etiam enim, etiam? Porttitor dapibus ultricies natoque integer vel dis sagittis nec cursus, sed amet, nec ultrices nunc.<br /><br />

Integer penatibus, massa pid nec vut porta. Hac purus dis amet, nunc augue porttitor. Est sagittis cum et in? Diam pid. Rhoncus adipiscing augue enim natoque rhoncus. Pid et pulvinar turpis, augue porttitor a adipiscing adipiscing sociis quis lorem porta elementum, vel aliquam ut, placerat, tempor ut quis turpis aliquet odio ultricies urna, tortor aenean porttitor augue scelerisque nisi, porta lundium a placerat rhoncus, scelerisque, sociis ac placerat enim dapibus porta. Rhoncus adipiscing! Tristique! Nec parturient sed nascetur ridiculus, integer ut porttitor cras! Ultricies, quis ut vut risus, tempor, auctor in rhoncus lectus tincidunt vut odio risus rhoncus? Ultrices sit est, placerat sed lectus magna integer risus tempor ac nisi eu? Diam aliquam augue pulvinar, ridiculus aenean nisi elementum.<br /><br />

Arcu etiam pid est et, platea natoque nunc porttitor, in elit, mattis? Sed? Tristique duis, dolor placerat ridiculus. Habitasse, nec dis augue sed? Vel integer. Mid sociis ut rhoncus adipiscing elit dis placerat massa, parturient dapibus? Eu aenean facilisis aliquet tincidunt, ac sit sit turpis aliquam a proin integer phasellus integer, integer adipiscing natoque egestas tristique magna tincidunt mauris, elementum lorem, proin augue? In lorem. Tincidunt phasellus. Ut placerat porttitor lundium pulvinar nec? Ut phasellus, augue et. Enim sit! Platea, porta urna amet tincidunt parturient enim rhoncus in habitasse tristique magna! Sit ac sit eros augue magna cum ac nisi elementum ut cras. Rhoncus est, in auctor. Pulvinar, parturient, ultricies, rhoncus aenean. Odio! Auctor hac. Integer nisi ultrices sit.<br /><br />

Nec et urna. Proin lorem nunc sagittis ut in? Natoque dolor, a amet integer ultrices sociis hac, tortor nec, duis, enim, urna lacus turpis mus eu lorem placerat tristique ac lacus, auctor pid lundium penatibus duis, arcu magnis turpis, sit massa? Nisi, purus? Amet tempor! Enim augue. Ultrices pellentesque enim? Nec mus elementum pulvinar tristique! Sit cras diam velit. Porttitor platea. Est platea vut, nunc? Quis lacus rhoncus ut, scelerisque dictumst, lectus dolor rhoncus risus porttitor enim mus urna, turpis turpis massa natoque? Ridiculus quis lorem? Mattis a urna tincidunt magnis, ac a mid pellentesque tempor platea tincidunt ac! Pulvinar ultrices sed nisi, ridiculus risus penatibus tortor et porta. Porttitor et risus turpis urna natoque arcu sed montes elit.<br /><br />

Risus, aliquam penatibus pid nunc natoque placerat urna urna scelerisque aenean? Adipiscing vel est magna non platea, a arcu lacus? Ridiculus. Mus turpis? Dis massa adipiscing enim, sagittis mattis hac, mauris enim, sociis? Tincidunt quis. Tempor mus mid! Ac nunc ac nascetur et vel platea platea pid. Ultrices a, tempor magna augue ut porta amet? Adipiscing magna turpis mus aliquam a urna etiam? Sociis velit! Porttitor amet nec etiam, velit habitasse, in tempor magna, sit, enim enim nec, aenean? Mid massa ac urna aenean? In, augue scelerisque aenean augue! Aenean a urna etiam. Et sed, dapibus porttitor tristique, nunc, tincidunt aliquam cum massa elit tortor duis in, scelerisque magnis amet, a diam penatibus nascetur egestas. Odio risus magnis turpis.<br /><br />

Cursus? Placerat hac dapibus. Massa ac dapibus sociis facilisis parturient sagittis sociis dapibus ultricies, integer! Lundium magna turpis ultricies, proin, in tincidunt porta! Facilisis augue in integer dolor enim? Natoque purus ultricies tempor sed elementum turpis est montes, massa etiam ut quis nisi odio augue, in magnis! Augue, urna elementum? Vut sed et, magna turpis massa, dapibus scelerisque non! Mus, habitasse vel ut, egestas, turpis, turpis! Magna sit, sit montes tortor ultrices elementum pellentesque montes et tortor, odio porta sociis, mattis augue, adipiscing. Nunc mid integer, integer, porttitor sagittis, mus porttitor. Et pulvinar parturient platea. Quis parturient. Arcu diam! Aliquet adipiscing? Cras pulvinar elementum, cras tincidunt sagittis augue mus? Aenean elit! Lorem arcu arcu placerat, tristique, et a platea.<br /><br /><br /><br /><br /><br /><br /><br />
</div>

<div id="bottomfade"></div>
</body>
</html>
You've now made a simple bottom page fadeout effect for your website, and hopefully you learned some easy, and simple stuff here regarding CSS. If you have any questions or concerns feel free to ask.

NOTE: The zip file includes 3 folders "Plain Black", "Plain White", and "Styled Web Layout", you'll also come across a README text document, as well as the screenshot you've seen at the beginning of this tutorial.

The plain white folder just includes the same files as we created in this tutorial as well does the plain black folder as well, just tweaked a bit for text color, background color, and link colors/rollovers.

The Styled Web Layout folder contains the same things as before except positioning is different, another readme text document, JQuery is enabled for a nice rollover effect, and added images for a nice web layout.
Bottom Page Fadeout.zip
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Fri Apr 22, 2011 11:54 pm, edited 1 time in total.
User avatar
kolega28
VIP - Donator
VIP - Donator
Posts: 338
Joined: Mon Jan 17, 2011 7:12 pm

love it
Image
2 posts Page 1 of 1
Return to “Tutorials”