Du Glossy CSS en ligne
Parfois, on veut créer des images ou des fond de div en css sans avoir l'envie d'installer photoshop ou simplement de s'y mettre. Car tout le monde ne sait pas gérer ce (superbe) programme. Qu'importe, il existe quelques générateurs en ligne parfaitement adapté à cette situation. Colorzilla nous propose ce principe, comme vous pouvez le voir en bas de page.
Concrètement on choisit l'intensité de l'effet glossy ( Gradient ), la couleur, le départ de la démarcation ainsi que le choix de couleur sur le partie gauche de la page web.
On peut ajuster les règlages comme l'intensité, l'opacité, les couleurs ou la saturation. Le truc génial, vraiment dans ce générateur, c'est qu'on a une interface trèèèès proche du photoshop, mais dédié uniquement à l'effet glossy.
Reste plus qu'à admirer le résultat dans la preview à droite et de profiter du simple copier coller du code css.
Et ça nous donne un div de ce genre.
Prenons le temps de comprendre le code. Ce générateur donne simplement un code que vous devez intégrer dans vos classes css. En gros, pour afficher ce petit div, je lui ai attribué le nom de divxemple, et j'ai donc nommé ce style #divexemple. J'ai copié le code donné, l'ai nommé ( #divexemple { ) et ça donne quelque chose comme :
[code=css]
#divexemple {
background: #87e0fd;
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
}
[/code]
Puis bien sûr, on créé le div :
[code=html]
<div id='divexemple' style="width:500px; height:40px">On met un style ici pour bien se démarquer du reste, mais c'est inutile</div>
[/code]
Adresse : http://colorzilla.com/gradient-editor/#_

Capture d'écran d'exemple du site.
Les lecteurs ont donné une note moyenne de :
Note: 1 sur 10
Donnez votre note à ce tuto sur 10 :