Comment utiliser HTML et CSS pour réaliser l'effet de la barre de progression avec des séparateurs transparents en milieu de gradient?

Créer une barre de progression de gradient cool: la combinaison parfaite de HTML et CSS

De nombreux développeurs poursuivent des éléments d'interface utilisateur plus attrayants, tels que les barres de progression avec des gradients et des séparateurs transparents. Cet article expliquera en détail comment utiliser le code HTML et CSS pour implémenter la barre de progression du gradient montré sur l'image et inclure des séparateurs transparents accrocheurs.

La clé de cet effet est d'utiliser intelligemment le fond de gradient linéaire et les attributs mask-image . Tout d'abord, nous avons besoin d'un conteneur contenant la barre de progression et un élément interne qui affiche l'effet de gradient. deux<div> Les éléments peuvent être mis en œuvre: Contaiteur extérieur et barre de gradient intérieur.<p> La structure HTML est la suivante:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;bar&quot;&gt; &lt;div class=&quot;pattern&quot;&gt;&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <p><code>bar définit le style global de la barre de progrès, comme la largeur et la couleur d'arrière-plan. pattern est responsable de la présentation des effets de gradient et de séparation transparente.

Le style CSS est le suivant:

 .bar {
  rembourrage: 0,5EM;
  Largeur: 19EM;
  Color d'arrière-plan: # 000; / * Couleur d'arrière-plan du conteneur, personnalisable * /
}

.bar .Pattern {
  hauteur: 2em; / * Progress Bar hauteur, personnalisable * /
  Contexte: Linear-Gradient (à droite, # 909 0%, # 009 100%) # 000; / * Couleur d'arrière-plan de gradient, personnalisable * /
  Masque-IMAGE: Répéditation-Gradient (à droite, # 000 0, # 000 1EM, transparent 1EM, transparent 1.5EM); / * Créer des diviseurs transparents avec des gradients linéaires répétés * /
}

Dans ce code CSS, linear-gradient crée un gradient linéaire du vert clair au vert foncé. mask-image utilise repeating-linear-gradient pour créer un gradient linéaire répétant comme masque, définissant des zones transparentes et opaques, générant ainsi des séparateurs transparents sur le fond du gradient. #000 0, #000 1em, transparent 1em, transparent 1.5em définit le mode de répétition du masque, #000 signifie opaque et transparent signifie transparence. En ajustant la valeur, la largeur et l'espacement du diviseur peuvent être contrôlés. Notez que mask-image a des problèmes de compatibilité du navigateur et peut nécessiter l'ajout de préfixes de navigateur supplémentaires, tels que -webkit-mask-image .

Grâce à la structure HTML ci-dessus et au style CSS, une barre de progression avec un fond de gradient et un diviseur transparent peut être réalisé. Vous pouvez modifier les styles de couleur, de largeur, de hauteur et de diviseur au besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!