Du Glossy CSS en ligne °° Tutoriel
Tayo
Astuce et Tutorial » Le Web » Internet vrac » tutoriel rédigé par Zabuza
Description de cet article : Un chouette générateur en ligne glossy, simple et style photoshop 		Lire les commentaires

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/#_



 



Glossy Css

Capture d'écran d'exemple du site.



réduireNews
réduireTutoriel lié
  • Créer bouton 3D glossy sans Photoshop
    Utilisation de Freshgenerator.com
  • Du Glossy CSS en ligne
    Un chouette générateur en ligne glossy, simple et style photoshop
  • Changer le skin de Facebook
    Mieux qu'un fond d'écran, changement de skin du réseau social
  • BBCODE définition et tips
    BBCODE , mise en style des messages / articles / post (dans les forums)
    • réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 1
    Note: 1 sur 10
    Donnez votre note à ce tuto sur 10 :

    Liste des commentaires pour Du Glossy CSS en ligne °° Tutoriel


    Il y a 2 années, 10 mois
    cool merci pour l'article.
    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).