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
Grand tableau pour école : ActivBoard
Un tableau interactifs moderne !
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...
Pourquoi une batterie explose ?
Pourquoi et comment une batterie qu'on a dans nos téléphone explosent ?
Autonomie de Mario Odyssey sur Nintendo Switch
Quelle est l'autonomie moyenne en mode portable ?
Savoir si on capte la 4G chez soi
Un site bien pratique !
Test de la box 4G de Bouygues
Avis : Que vaut la Box 4G illimité de Bouygues ?
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)
Le géant de la musique légale en ligne lance une nouvelle gamme tarifaire. Intéressant ou pas ?
Bonus Et Casinos En Ligne : Rentabiliser Les Offres Gratuites
Copier coller automatiquement le contenu d'une page et envoyé par email
Le géant de la musique légale en ligne lance une nouvelle gamme tarifaire. Intéressant ou pas ?
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 :