Bordure et Dégradé

Ayfoth vous propose de réaliser la création suivante : Tutoriel : Bordure et Dégradé

Sommaire

  1. La Bordure
  2. Le dégradé
  3. La bordure en dégradé

A l'issu de ce tutoriel, vous serez en mesure de créer une bordure et de lui appliquer un dégradé.

La Bordure

La bordure contient 3 éléments clés dans son code, sa couleur définie par border-color, son type définie par border-style qui peut être défini en solid, dashed, etc et son "épaisseur" définie par border-with.
Ainsi un code simple de bordure peut s'écrire de cette façon 
  1.  border-color : rebeccapurple ;

    

     border-style : solid ;

    

     border-width : 5px ;



Le dégradé

Un dégradé s'écrit avec linear-gradient, et ses spécificités peuvent être multiples.

Un dégradé simple s'écrira comme ceci : 
  1. linear-gradient(orientationdudégradéendegres, couleur1, couleur2)




Un dégradé radial s'écrira comme ceci : 

  1. radial-gradient(couleur1, couleur2)




Un dégradé conique s'écrira sous cette forme : 

  1.  conic-gradient(from orientationendegré, couleur1, couleur2);



La bordure en dégradé

Pour ajouter le dégradé à la bordure il faut passer par border-image puis à la fin du dégradé rajouté un chiffre qui indique la répétition du dégradé par exemple : 
  1. border-style : solid ;

    

     border-width : 10px ;

    

     border-image : linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1 ;


Bien sûr de nos jours il éxiste de nombreux outils pour générer le code du dégradé :
Générateur de dégradé
Générateur de bordure en dégradé

Rendus

Personne n'a encore essayé ce tutoriel. Soyez le premier !

Commentaires

Ce tutoriel n'a pas reçu de réponses pour le moment. Soyez le premier à le commenter !

Répondre

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.

↑
↓