Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

Faire des dégradés en CSS Empty Faire des dégradés en CSS

le Sam 11 Mai - 22:35

CSS

Faire des dégradés


Hello Smile

Ici, nous allons parlé de dégradés à réaliser en CSS uniquement. Il en existe 2 types :
  • linéaire,
  • circulaire.


Les dégradés linéaires

Un dégradé linéaire se déclarera de la façon suivante : l'axe/la direction, la couleur de départ et la couleur d'arrivée. Voici quelques exemples :

* Dégradé haut/bas
Code:
.degrade1{
         background: blue;
         background: -webkit-linear-gradient(top, blue, purple);
         background: -moz-linear-gradient(top, blue, purple);
         background: linear-gradient(top, blue, purple);
      }

<div class="degrade1">
   Dégradé haut/bas - Bleu vers mauve
</div>

Spoiler:
Faire des dégradés en CSS Degrade1_zpsb0adaa04

* Dégradé gauche/droite
Code:
.degrade2{
         background: green;
         background: -webkit-linear-gradient(right, green, orange);
         background: -moz-linear-gradient(right, green, orange);
         background: linear-gradient(right, green, orange);
      }
      
      <div class="degrade2">
         Dégradé gauche/droite - orange vers vert
      </div>
Spoiler:
Faire des dégradés en CSS Degrade2_zps31850499

* Dégradé en diagonale avec 4 couleurs
Code:
.degrade3{
         background: green;
         background: -webkit-linear-gradient(-45deg, blue 0, purple 33%, orange 66%, green 100%);
         background: -moz-linear-gradient(135deg, blue 0, purple 33%, orange 66%, green 100%);
         background: linear-gradient(135deg, blue 0, purple 33%, orange 66%, green 100%);
      }

<div class="degrade3">
         Dégradé en diagonale haut gauche vers bas droite - bleu vers mauve vers orange vers vert
      </div>
Spoiler:
Faire des dégradés en CSS Degrade3_zps462f2e11

Exclamation Ne pas oublier d'indiquer avant de déclarer les dégradés une couleur de fond (dans le cas où les dégradés ne seraient pas pris en compte)

Les dégradés circulaires

Un dégradé circulaire se déclarera de la façon suivante : le type (cercle ou ellipse) et l'axe/la direction, la couleur de départ et la couleur d'arrivée. Voici quelques exemples :

* Dégradé circulaire centre vers extérieur
Code:
.degrade4{
         background: purple;
         background-image: -webkit-radial-gradient(circle, blue 0, purple 100%);
         background-image: -moz-radial-gradient(circle, blue 0, purple 100%);
         background-image: radial-gradient(circle, blue 0, purple 100%);
      }
      
      <div class="degrade4">
         Dégradé centre vers extérieur - Bleu vers mauve
      </div>
      
Spoiler:
Faire des dégradés en CSS Degrade4_zpse8eb37cc

* Dégradé "ellipse" centre vers coin le plus proche
Code:
   .degrade5{
         background: green;
         background-image: -webkit-radial-gradient(ellipse closest-corner, orange 0, green 100%);
         background-image: -moz-radial-gradient(ellipse closest-corner, orange 0, green 100%);
         background-image: radial-gradient(ellipse closest-corner, orange 0, green 100%);
      }
      
      <div class="degrade5">
         Dégradé centre vers coin le plus proche - orange vers vert
      </div>
Spoiler:
Faire des dégradés en CSS Degrade5_zps78dfed5d

Je ne mets que 2 exemples ici, mais il y a 4 types d'axe/direction :
-> le bord le plus proche : closest-side
-> le bord le plus éloigné : farthest-side
-> le coin le plus proche : closest-corner
-> le coin le plus éloigné : farthest-corner

Idea Personnellement, je ne retiens jamais les dégradés :=): Mais j'ai un site super génial enjoycss qui les fait pour moi et je n'ai plus qu'à copier/coller le code et à le nettoyer un peu.




C'est tout pour cette fois Smile Si tu as des questions, n'hésite surtout pas Smile



Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 339
http://ecofriends.forumactif.com/

Faire des dégradés en CSS Empty Re: Faire des dégradés en CSS

le Ven 17 Mai - 21:07
C'est le même code pour faire un dégradé dans les pseudos des membres?
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

Faire des dégradés en CSS Empty Re: Faire des dégradés en CSS

le Ven 17 Mai - 21:44
Coucou

Pour les pseudos sur les forums, il faut "colorer" chaque lettre du pseudo et l'appeler en javascript. On peut en faire un tutoriel si tu le souhaites ?

En tout cas, ici Miettes ne parle que des couleurs de fonds en dégradé.

_________________
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 339
http://ecofriends.forumactif.com/

Faire des dégradés en CSS Empty Re: Faire des dégradés en CSS

le Ven 17 Mai - 21:47
D'accord Smile Oui je veux bien un tuto pour ça Smile
Contenu sponsorisé

Faire des dégradés en CSS Empty Re: Faire des dégradés en CSS

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses