▼ Table des matières
LES DÉGRADÉS
Codes privateurs
Exemple de code privateur
Ce code HTML Microsoft affiche un dégradé sous Internet Explorer mais certains navigateurs l'ignoreront.
<body style="FILTER:progid:DXImageTransform.Microsoft.GRADIENT(startColorstr=#003366,endColorstr=#ffffff ,gradientType=0" bgColor=#ffffff scroll=yes>
Images et background
Renoncer à l'usage d'un code privateur entraîne la recherche d'une solution alternative par introduction d'une image en background ; purement HTML cette solution est donc indépendante de tout éditeur de logiciels et permet de programmer un dégradé en fond de page ou de n'importe quel élément de type bloc (voir aussi : arrière-plan, tableaux, titres) par l'insertion d'une image répétée.
Principe général
- 1.Créez, avec un logiciel de dessin, une ligne verticale ou horizontale contenant un dégradé de couleur.
- 2. Donnez-lui une dimension de 1 pixel de haut (barre horizontale) ou 1 pixel de large (barre verticale).
- 3. Choisissez la seconde dimension en fonction de la hauteur ou de la largeur de votre page ou de votre corps de page : par exemple, 800 pixels ; ou en fonction de l'effet de répétition que vous voulez obtenir.
- 4. Intégrez votre image dans le code HTML
<div style="background:url(nom et chemin de votre image) repeat; width:(largeur du bloc en pourcentage ou en pixels); height: (hauteur du bloc en pourcentage ou en pixels); margin-left: auto; margin-right: auto"></div>
Exemple
Les propriétés "margin-left: auto; margin-right: auto;" permettent de centrer votre bloc horizontalement; il vous faut toutefois préciser la largeur du bloc sinon aucun réglage automatique des marges ne se fera..
"" <div style="background:url(/images/exemple1.png) repeat; width:auto; height:auto; margin-left: auto; margin-right: auto; margin-top:1em; padding:2em"> </div> ""
Image devant le background
Attention: certains utilisateurs désactivent dans leur navigateur le chargement automatique des images (lien externe) EN.
<div style="background:url(/images/exemple2.png) repeat; width:90%; height:32px; margin-left: auto; margin-right: auto; text-align:center;padding:0.5em"><img src="/images/tux-yes1.png" alt="tux" /> </div>
Image de background non répétée
L'image de background appliquée à la totalité d'un DIV de grande taille peut ralentir le chargement de la page.
<div style="border:solid gold 0.1em; background:url(/images/zecyborg-big.png) no-repeat; background-position: center;width: 90%; height: 288px; margin-left: auto; margin-right: auto; text-align: center"> </div>
Vous pouvez facilement vous procurez sur l'internet des codes de couleurs hexadecimaux à partir de palettes conçues à cet effet. Tapez simplement "HTML palettes" dans la barre de votre moteur de recherche.
Le module Colorzilla (Firefox et Chrome) est très simple d'utilisation et très pratique car il permet, à l'aide d'une pipette, de prélever n'importe quelle couleur (format hexadécimal, RGB) dans la page affichée par le navigateur.
Background avec répétition verticale sur la gauche
<div style="background:url(/images/exemple4.png) repeat-y left; height: 400px; width:64px;float:left">
</div>
<div style="background-color:white;height: 400px">
<p style="background-color:white;color:#222222;padding:2em;margin-left:64px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Pst canata tari est paroy malardi dalr sahit ya kho ral labass erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
</p>
</div>
Exemple de background avec répétition verticale sur la gauche
Background avec répétition horizontale depuis la gauche
<div style="background:url(/images/exemple4.png) repeat-x left;height:64px"> </div>
Background avec répétition horizontale depuis la droite
<div style="background:url(/images/exemple4.png) repeat-x right; height: 64px;"> </div>
Dégradés avec Photofiltre
Photofiltre V6 (lien externe) écrit par Antonio Da Cruz est un freeware (mais pas un logiciel libre) ; sa licence pro est à un prix abordable, et ses usages multiples et quotidiens sont intuitifs.
Photofiltre se complète de nombreux plugins et grâce à l'un d'entre-eux, vous pouvez concevoir très rapidement un dégradé à usage d'arrière-plan : Filtre >>> Couleurs >>> Dégradé
Votre dégradé réalisé, enregistrez-le au format png ; vous pouvez utiliser l'image en background ; vous pouvez aussi l'intégrer dans une page HTML minimaliste que vous ouvrez avec Firefox ou Chrome; vous avez en mains une palette qu'il vous suffit alors d'exploiter avec le curseur de Colorzilla
Sous Linux, Photofiltre fonctionne assez bien (malgré quelques plantages occasionnels notamment lorsqu'il est ouvert en même temps que Firefox); il faut toutefois installer Wine dans votre distribution; ce qui n'est pas du goût de tous les uitlisateurs linuxiens.
Solutions alternatives
- Installer Gimp qui a l'inconvénient d'être aussi complexe que Photoshop, son concurrent commercial direct ou Pinta (lien externe), beaucoup plus simple d'utilisation.
Installer Gimp
sudo apt-get install gimp
Installer Pinta
sudo apt-get install pinta
Dégradés avec un Tableur
Vous pouvez utilisez un tableur comme celui de LibreOffice afin de créer automatiquement (par copie incrémentale) des suites logiques de chiffres et de lettres répartis sur 6 colonnes avec une septième colonne invariante (la première), comportant le signe # (000000, 0000aa, 0000bb, 0000cc, 0000ee, 0000ff etc...). Ceci demande toutefois une certaine connaissance de l'utilisation des tableurs et de la logique des couleurs en hexadécimal.
Pressé-e ?
Remerciements
- l'icône TILT! a été réalisée à partir d'un projet d'affiche présenté sur kilobus.com (lien externe)
