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.
News
Assassin Creed Odyssey Medusa : Vidéo 4K de la statuette
Une vidéo en haute qualité , très zoomé de chaque détail de la statuette
Benchmark Assassin Creed Odyssey sur GTX 1080 @ i5 8400
Voyons les performances d'un jeu qui met à bout nos machines de gamer
Iphone XR : Liste des couleurs
Liste des couleurs de l'iphone XR
Script : Afficher une publicité même avec Adblock
Exemple de Script pour afficher une publicité même quand une personne vient avec Adblock
Où sont les radars à Perpignan ?
Quand l 'état met la carte officielle et complète des radars sur le territoire français
1 logiciel et 4 astuces pour booster la productivité de son restaurant
Des astuces et un logiciel pratique pour son restaurant
Astuce pour lancer sa boutique en ligne de matériel informatique
Quand les prix du matériel informatique augmentent...
Tutoriel lié
Créer bouton 3D glossy sans PhotoshopUtilisation de Freshgenerator.com
Du Glossy CSS en ligneUn chouette générateur en ligne glossy, simple et style photoshop
Changer le skin de FacebookMieux qu'un fond d'écran, changement de skin du réseau social
BBCODE définition et tipsBBCODE , mise en style des messages / articles / post (dans les forums)
Cas pratique et concret pour décrypter Youtube
La fameuse habitude de 1and1.fr pour renouveller le site
Liste des commentaires pour Du Glossy CSS en ligne °° Tutoriel
cool merci pour l'article.
Laissez un commentaire sur cet article.
Pseudo :
Facultatif : Cliquez ici pour choisir une tête
Votre email ( non publié ) :
Image anti spam :
Recopier les 5 chiffres de cette image :
Les lecteurs ont donné une note moyenne de :
Note: 6 sur 10
Donnez votre note à ce tuto sur 10 :