Ci-dessous, vous trouverez pour simple information un exemple de code propriétaire Microsoft : il affiche un dégradé sous Internet Explorer mais certains navigateurs l'ignoreront.
code propriétaire : voir aussi licence LGPL
<body style="FILTER: progid:DXImageTransform.Microsoft.GRADIENT(startColorstr=#003366 ,endColorstr=#ffffff ,gradientType=0" bgColor=#ffffff scroll=yes>
Renoncer à l'usage d'un code propriétaire 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, tableau, titre) par l'insertion d'une image répétée.
Principe général:
<h1 style="background:url(nom et chemin de votre image) repeat; width:(largeur de votre image en pourcentage ou en pixels); height: (hauteur de votre image en pourcentage ou en pixels); margin-left: auto; margin-right: auto;"></h1>
N.B. Les propriétés "margin-left: auto; margin-right: auto;" permettent de centrer votre image horizontalement; il vous faut toutefois préciser une largeur à l'image sinon aucun règlage automatique des marges ne se fera.
<p style="background:url(../img/exemple2.png) repeat; width:88%; height: 64px; margin-left: auto; margin-right: auto; color:#f2e8e4;">Cette image de background ou arrière-plan possède les propriétés annoncées par son nom ; vous pouvez écrire un texte situé "devant" votre background.</p>
Cette image de background ou arrière-plan possède les propriétés annoncées par son nom ; vous pouvez écrire un texte situé "devant" votre background.
Vous pouvez placer une image devant votre background :
<p style="background:url(nom et chemin de votre image) repeat; width:88%; height: 64px; margin-left: auto; margin-right: auto; text-align:center;"><img src="nom et chemin de votre image" alt=""></img></p>
Vous pouvez utiliser une image de background complète et ne pas la répéter:
<div style="background:url(nom et chemin de votre image) no-repeat; width: 88%; height: 64px; margin-left: 45%; margin-right: auto; text-align: center;"></div>
L'image de background appliquée à la totalité d'un DIV de grande taille peut ralentir le chargement de la page sur une machine lente.
Certains utilisateurs désactivent dans leur navigateur le chargement automatique des images. Pour éviter que cette zone de votre site ne se retrouve alors avec un fond blanc vous pouvez ajouter un second attribut background-color suivi d'un code de couleur en hexadécimal précédé du caractère dièse.
Vous pouvez facilement vous procurez sur l'internet ces codes de couleurs à partir de palettes conçues à cette effet. Tapez simplement "HTML palettes" dans la barre de votre moteur de recherche.
Vous pouvez aussi utiliser le module Colorzilla de Firefox qui 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 dans la page affichée par Firefox. Ceci fait, Colorzilla vous propose de copier le code hexadécimal de la couleur que vous pouvez alors coller dans Scite. Dans l'exemple ci-dessous, la couleur de fond du paragraphe est #C0C0C0.
<p style="background-color:#C0C0C0;">paragraphe avec une couleur de background #C0C0C0</p>
paragraphe avec une couleur de background #C0C0C0
Background avec répétition verticale depuis la droite, sur une hauteur de 128px :
<div style="background:url(nom et chemin de votre image) repeat-y right; width:88%; height: 128px;"></div>
Background avec répétition verticale depuis la gauche, sur une hauteur de 128px :
<div style="background:url(nom et chemin de votre image) repeat left; width:88%; height: 128px;"></div>
Background avec répétition horizontale depuis la gauche :
<div style="background:url(nom et chemin de votre image) repeat-x left;"></div>
Background avec répétition horizontale depuis la droite :
<div style="background:url(nom et chemin de votre image) repeat-x right;"></div>
Photofiltre V6 écrit par Antonio Da Cruz ne fonctionne que sous Windows. Ce logiciel est un freeware et n'est donc pas un logiciel GNU, Opensource ; peu coûteux en égard de ses usages multiples et quotidien Photofiltre Studio est aussi un logiciel très intuitif et très simple d'usage. Sous GNU/Linux, Photofiltre fonctionne assez bien (malgré quelques plantages occasionels notamment lorsqu'il est ouvert en même temps que Firefox ou une autre application Windows); il faut toutefois installer Wine dans votre distribution GNU/Linux ; ce qui n'est pas du goût de tous les usagers linuxiens (dans ce cas, la seule solution à vos problèmes de graphisme passe par Gimp qui a l'inconvénient d'être aussi complexe que Photoshop, son concurrent commercial direct).
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 :
Votre dégradé réalisé, enregistrez-le au format png ; vous pouvez déjà utiliser l'image en background ; mais vous pouvez aussi l'intégrer dans une page HTML minimaliste que vous ouvrez avec Firefox car vous avez alors en main une palette qu'il vous suffit alors d'exploiter avec le curseur de Colorzilla.
La mise en place du dégradé final sur un titre H1, angles arrondis compris (voir code source de cette page HTML+CSS liée réalisées d'après une recherche de Snicholls), sera peut-être un peu laborieuse... mais vous aurez fait un grand pas dans la recherche d'une solution W3C à la composition d'un dégradé HTML sans utiliser le code propriétaire (gradient) de Microsoft qui ne sera pas validé et, plus grave, non interprété par Firefox. Le travail de Snicholls est une porte immense à des délires sans fin à mi-chemin entre pixel-art et HTML.
Vous pouvez utilisez un tableur comme celui d'OpenOffice 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. D'une manière générale, les tableurs possèdent, potentiellement, de nombreuses possibilités mais, pour y accéder, Il faut renoncer à ses a priori envers les chiffres et les colonnes en songeant qu'une démarche créative, scientifique, mathématique procède de la même nature d'esprit que la démarche qui conduit à la créativité dite "artistique" avec toute l'emphase qui sied aux mondes cloisonnés de la pensée dominante. Un monde de forcenés de la rentabilité n'a guère d'intérêts à voir l'un de ses outils informatiques essentiel entre les mains fantasques de quelque "artiste halluciné".
| #ffa400 | #ffb500 | #ffc600 | #ffd700 | #ffe800 | #fff900 |
Et enfin... pour les impatientes et impatients, un outil en ligne très efficace : skymac.org
et enfin enfin, la solution CSS3 qui a toutefois un gros inconvénient car elle n'est pas interprétée par plusieurs navigateurs dont Internet Explorer : 30minparjour.la-bnbox.fr
Google-image: l'icône TILT! a été réalisée à partir d'un projet d'affiche présenté sur kilobus.com
Formation Ubuntu/Windows, développement et administration de sites
déclaration à la CNIL : n° 1397076
Photographies, logo, illustrations : Pierre BELLENEY
