Les dégradés en deux façons!


ARC est un forum de Graphisme et de Codage sur le thème des nuages où vous pouvez partager vos créations, commander aux autres membres ou encore papoter tranquillement avec ces derniers ! Vous pourrez aussi retrouver divers tutoriels Photoshop ou autre !
 

Partagez|
Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage

Cumulus

Karunakku

avatar
Féminin Messages : 7
Date d'inscription : 07/06/2015
Age : 16
Localisation : Canada
MessageSujet: Les dégradés en deux façons! Dim 21 Juin - 21:39


 
   
   
 
   

   

Les dégradés


   

 Les dégradés en html ou CSS sont délicat.Il y a même deux façon de les faire.Dépendamment de la personne,un sera plus facile que l'autre.

Les dégradés webkit et moz



Le dégradé Webkit est celui qui ne travaille qu'au codage.C'est pas compliqué,il faut juste bien retenir tout.

Pour faire votre dégradés,il vous faudra commencer avec un CSS ou html(Je suppose que c'est possible mais je ne recommande pas celui-ci pour les forums.),aussi,il ne marche que pour les fonds.J'expliquerai pour les scrollbars plus tard.
Code:

#grad {
  }

Après,webkit ne marche qu'avec Chrome et Safari,donc pour que le dégradé marche dans Firefox aussi,il faudra faire le moz aussi!Mais il restera dans le même ID.
Code:

background: -webkit-linear-gradient(lightpink, peach); /*Chrome et Safari*/
  background: -moz-linear-gradient(lightpink, peach); /*Firefox*/
Ce n'est pas tout!Il faut mettre le dégradé principal avec:
Code:

background: linear-gradient(lightpink, peach);
Si ous voulez que votre dégradé soit de gauche à droite et vice versa:Ajoutez ce qui est présenter dans l'exemple au début du code:
Code:

De gauche à droite:
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , blue); /* Standard syntax */
}
Du côté haut droit au coté bas gauche vice versa:
#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}

Les dégradés image


Ceux-ci,par contre,marchent pour tout!C'est,pour moi,le plus façile.
Commencez par faire votre image avec les dimensions voulu.Il doit être assez long mais pas large du tout,comme ça il se répétera seulement horizontalement.
Après,selon ce que vous voulez faire,c'est toujours background-image.Même chose pour les thumbs et les tracks d'une scrollbar!

Si vous avez des questions,n'hésitez pas!
 


 Code par Karunakku
   

   
 


Revenir en haut Aller en bas
AuteurMessage

Asperatus

Vix

avatar
Féminin Messages : 73
Date d'inscription : 29/05/2015
Age : 18
MessageSujet: Re: Les dégradés en deux façons! Dim 21 Juin - 21:45
Wouah super tuto !
Je suis totalement nulle en codage TT Mais j'essayerai sans doute quand je m'y mettrais !
Merci beaucoup en tout cas ! Razz



Merci ma Biscotte (Prismatic Cool ) ♥️
Revenir en haut Aller en bas
AuteurMessage

Asperatus

Prismatic

avatar
Féminin Messages : 214
Date d'inscription : 29/05/2015
Age : 19
Localisation : Sur un nuage perdu au coeur de l'univers...
MessageSujet: Re: Les dégradés en deux façons! Lun 22 Juin - 9:06
Merci beaucoup pour la technique ! J'avoue que je m'étais jamais penchée sur les dégradés mais mieux vaut tard que jamais I love you



Rejoins nous !


Merci a Vix pour le beau cadeau ♥️ jtem
Revenir en haut Aller en bas
http://aurea-rosa-clavis.forumactif.org/
AuteurMessage


Contenu sponsorisé

MessageSujet: Re: Les dégradés en deux façons!
Revenir en haut Aller en bas

Les dégradés en deux façons!

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» [Résolu] addition de deux variable.
» j'ai deux question qui m'intrigue
» Un ascenseur pour deux memos
» Mise à jour de deux GPS Garmin
» Arrondir un réel à deux chiffres après la virgule

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Aurea Rosa Clavis - Forum de Graphisme et de Codage :: Car on ne s'y connait pas qu'en graph ! :: Codage :: Tutoriels Codage-