LabEx
EntrerRejoindre

Création de texte en gradient avec CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer le concept de texte en gradient dans CSS. Le but de ce laboratoire est de vous aider à comprendre comment créer un texte en gradient à l'aide de la fonction linear-gradient(), ainsi que comment utiliser les propriétés webkit-text-fill-color et webkit-background-clip pour remplir le texte avec un fond en gradient. À la fin de ce laboratoire, vous serez capable de créer un texte en gradient visuellement attrayant qui peut améliorer la conception de vos pages web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Texte en gradient

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour donner à un texte une couleur en gradient, vous pouvez utiliser des propriétés CSS. Tout d'abord, utilisez la propriété background avec une valeur linear-gradient() pour donner à l'élément de texte un fond en gradient. Ensuite, utilisez webkit-text-fill-color: transparent pour remplir le texte avec une couleur transparente. Enfin, utilisez webkit-background-clip: text pour découper le fond avec le texte et remplir le texte avec le fond en gradient comme couleur. Voici un extrait de code d'exemple :

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Texte en gradient. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.