Gradients répétés CSS3 [Astuces CSS3]
Il existe de nombreuses fonctionnalités CSS3 qui modifient la manière dont nous décorons un site Web, notamment les dégradés CSS3. Avant CSS3, nous avions absolument besoin d'images pour créer l'effet de dégradé. nous sommes maintenant en mesure de fournir les mêmes (et meilleurs) effets en utilisant uniquement CSS
Dans nos articles précédents, nous avons discuté de deux types de dégradés pouvant être obtenus avec CSS3:
- Radial et
- Gradients Linéaires.
Cette fois, nous allons examiner leur frère: gradients répétés.
Répétition de base
Gradients Répétant est essentiellement une extension. La syntaxe est similaire à la façon dont nous définissons les gradients radiaux et linéaires. Seulement, comme son nom l'indique, les couleurs seront également répétées dans une direction spécifiée. Pour répéter les dégradés linéaires, nous pouvons utiliser cette fonction: répétition-linéaire-gradient, En répétant les dégradés radiaux ou elliptiques, nous utilisons cette fonction: répétant-radial-gradient.
/ * Linear * / .gradient background: répétant-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: répétant-radial-gradient (50% 50%, cercle, # f9f9f9, #cccccc 20px);
Il n’ya pas beaucoup de différence pour le reste du code, à l’exception du répétition des couleurs. Ci-dessous une illustration simple pour décrire le fonctionnement de cette répétition de couleur.
Bien que l'image ci-dessus n'illustre que la répétition de dégradés linéaires, l'idée de base s'applique également aux dégradés radiaux dans lesquels les couleurs se répètent indéfiniment, dans ce cas, dans n'importe quelle direction. Suivez le lien ci-dessous pour voir la démo.
- Voir la démo
Dans la section suivante, nous allons vous montrer comment utiliser CSS3 Repeating Gradients en exemples réels..
Exemple: création de motifs
L’implémentation la plus courante de Gradients Répétant est de créer des modèles de fond. Dans cet exemple, nous allons créer des motifs simples à bandes verticales.
.dégradé arrière-plan: répétant-linéaire-dégradé (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Remarquez comment nous définissons deux couleurs différentes - # f9f9f9 et #cccccc - au même endroit, 20px. Cet exemple accentuera la différence entre ces deux couleurs et éliminera le flou..
Pour diriger l'orientation, nous changeons simplement l'angle - 90deg le dirigera horizontalement tout en 45deg va le diriger en diagonale et ainsi de suite.
- Voir la démo
Exemple: création de Paperline
Dans ce deuxième exemple, nous allons créer une paperline que vous verrez souvent dans un cahier. Pour créer cet effet, nous n'avons besoin que d'un div, pas d'images, seulement CSS.
.dégradé largeur: auto; hauteur: 500px; marge: 0 50 px; arrière-plan: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arrière-plan: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arrière-plan: -o-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arrière-plan: dégradé répétitif-linéaire (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); taille du fond: 100% 21px;
Notez que nous avons également ajouté CSS3 taille de fond propriété pour spécifier les tailles des images de fond pour 100%, 20px. Bien que les dégradés CSS3 affichent des "couleurs", ils sont en réalité classés en tant qu'image., pas de couleur.
Ensuite, nous allons utiliser :avant pseudo-élément ajouter une bande sur le côté gauche du papier.
.dégradé: avant contenu: ""; affichage: inline-block; hauteur: 500px; largeur: 4px; bordure de gauche: double 4px # FCA1A1; position: relative; à gauche: 30px;
Et nous avons fini, c'est vraiment simple non? Nous pouvons maintenant les voir tous en action à partir des liens ci-dessous.
- Voir la démo
- Source de téléchargement
Ressources supplémentaires
- Webkit Gradients CSS3
- Gradients CSS3 sur le réseau de développement Microsoft
