Accueil > css > degrade-footer

{ Degradé bas de page }

Introduction

Comment obtenir un superbe dégradé, constant et qui s'adapte à votre contenu peut importe la longueur du scroll ? La réponse à votre question se trouve dans les lignes ci-dessous !
En effet, cette technique CSS utilise une image dégradé de 600 X 200 qui restera collé en bas de votre page, ainsi peut importe la hauteur de la page, celle-ci sera toujours couverte du dégradé en bas de page.

Mise en place en 4 étapes :

fadeOutBottom

Téléchargement de l'archive -->

Balise html

<div id="bottom_fade"></div>

La feuille de style

Dans l'archive que vous avez télécharger se trouve d'autres propriété CSS qui ont été ajoutée pour la présentation de la page de démo contenu dans l'archive mais seule la propriété de la balise 'bottom_fade' nous intéresse.

#bottom_fade {
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url("bottom-fade.png") bottom center no-repeat;
}

ça y est ! Vous avez un beau dégradé en bas de votre page et rien de mieux pour donner un petit effet en plus sur votre site !

Options supplémentaires

Si vous le souhaitez vous pouvez modifier la taille du dégradé en éditant le fichier 'bottom fade.psd' présent dans l'archive avec Photoshop (si vous l'avez bien sur).

Hacks IE

La page d'exemple offre également un hacks pour Internet Explorer qui ne gère malheureusement que trop mal la transparence des .png

<!--[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]-->