Bottom Page Fadeout Website: Beginner Friendly

Posted by mikethedj4
Created Mar 2, 2011
Category Fun
Views 5,768
Favourites 1  

Have the bottom page of your website fadeout to give your site a nice good looking feel, strictly done in HTML, and CSS, using Gimp to create the bottom image (gradient to transparent) for the page to fadeout.

Loading Image

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.

Loading Image

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.

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.

#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:)

#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.

Site Name: Homepage

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.

Content text all goes here

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.

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.

Bottom Page Fadeout
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.

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.

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.

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.

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.

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.

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.

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.

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.

You can download the project files for this tutorial on GimpPimp's downloads page.

Don't forget to checkout GimpPimp at GimpPimp.TK, and don't forget to become a fan on out Facebook Fanpage.

View the Tutorial →


  1. Login or register to add your comment.