Dans cet article, nous passerons en revue les dégradés CSS en créant différents drapeaux en utilisant un seul élément HTML pour chacun d'eux. Dans le cadre de l'expérience, nous vérifierons également les pseudo-éléments ::before et ::after, ainsi que la propriété clip-path.
Nous coderons des drapeaux simples et éviterons de coder les armoiries car elles seraient difficiles en CSS. Ce ne serait pas impossible, mais ce n’est pas non plus une tâche qui en vaut la peine. Utilisez SVG pour cela.
J'ai utilisé la page Wikipédia pour les différents drapeaux afin d'obtenir les dimensions, tailles, positions et couleurs. Mes excuses d'avance si elles comportent des erreurs.
Commençons par ajouter ce qui sera le code HTML de nos drapeaux, et quelques styles communs :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Voici une brève explication de ce qu'ils font :
Certains d'entre eux font l'objet d'une ingénierie excessive – oui, vous pouvez sur-ingénierier du CSS – car la plupart des indicateurs n'en auront pas besoin. Surtout celles que nous allons coder dans cet article… mais finalement vous en trouverez qui nécessitent les propriétés, et pourquoi ne pas les avoir directement dans la classe, au lieu de devoir les ajouter individuellement plusieurs fois ?
Un dégradé linéaire crée une transition de couleur progressive dans une seule direction (le long d'une ligne, d'où le nom). Par défaut, la direction est verticale de haut en bas, ce qui simplifie la création de drapeaux.
Commençons par le drapeau de la Pologne. Il a deux couleurs qui occupent la même hauteur : le haut est blanc et le bas est rouge. C'est l'un des dégradés les plus simples que vous puissiez trouver.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Ce dégradé définit le blanc comme couleur à partir du haut jusqu'à ce qu'il atteigne 50 % (la moitié du drapeau), puis il passe au rouge, qui commence également à 50 %.
Nous avons également ajouté un rapport hauteur/largeur : 8/5 ; car c'est la proportion officielle du drapeau de la Pologne (5:8). N'hésitez pas à ignorer cette propriété dans les exemples suivants, mais n'oubliez pas de l'ajouter sinon le drapeau n'aura pas de largeur et sera invisible !
Les dégradés CSS ne sont pas limités à deux couleurs, ils peuvent en avoir autant que vous le souhaitez – mais notez que certains navigateurs peuvent ne pas afficher le dégradé correctement s'il y a trop de couleurs.
Un exemple serait le drapeau de l'Allemagne, où nous aurons trois couleurs de haut en bas :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Nous avons volontairement rendu la notation de cet exemple multiligne et extra longue. Remarquez comment nous avons ajouté deux valeurs après la valeur. Ce sont respectivement les arrêts de départ et d’arrivée de chaque couleur. Dans l'exemple ci-dessus, le noir commencera par le haut (0%) et ira jusqu'au tiers du drapeau (33,33%), le rouge commencera directement après (33,33%) et ira jusqu'aux deux tiers du drapeau (66,66% ), et enfin le jaune démarrera directement après 66,66% et ira jusqu'en bas du drapeau (100%). Dans le cas d'un indicateur, les valeurs de fin et de début suivantes correspondront, mais si ce n'est pas le cas, le navigateur fera progressivement la transition des couleurs.
Considérant que la première couleur commencera à 0 et que la dernière se terminera à 100% par défaut, nous pouvons éliminer ces valeurs du dégradé linéaire. De plus, toute valeur de départ inférieure à la fin précédente provoquera un arrêt net entre les couleurs. Nous voulons cela pour nos drapeaux et ne voulons pas trop taper, nous pouvons donc simplement mettre la valeur la plus basse possible pour la valeur de départ : 0 % ou simplement 0. De cette façon, le CSS ci-dessus serait réduit à quelque chose qui donne un résultat similaire, mais qui est considérablement plus court :
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Ce serait ennuyeux –et inutile– si nous pouvions générer uniquement des dégradés linéaires verticaux. Il existe des moyens de changer la direction dans laquelle le dégradé sera dessiné. Vérifions-en quelques-uns :
Prenons l'exemple du drapeau belge. Les couleurs ne sont pas empilées verticalement mais horizontalement : noir, jaune et rouge respectivement de gauche à droite. Nous pouvons y parvenir d'au moins deux manières différentes :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Un dégradé radial crée une transition de couleur progressive d'un point d'origine vers toutes les directions, générant un effet radial qui ressemble à une ellipse de couleur (ou à un cercle si les côtés sont égaux). Par défaut, ce point est le centre absolu de l'élément – horizontalement et verticalement.
Quelques éléments importants à prendre en compte :
Avec ces premières réflexions à l'esprit (et ces mots-clés), créons quelques drapeaux !
Le drapeau du Japon est un grand cercle rouge au centre d'un drapeau blanc. C'est l'un des dégradés radiaux les plus simples que nous puissions trouver, et nous utiliserons le mot-clé cercle que nous avons examiné plus tôt, car le drapeau est rectangulaire, et si nous ne l'utilisons pas, nous obtiendrons une ellipse à la place.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Nous avons combiné le mot-clé taille du côté le plus proche avec le mot-clé forme du cercle pour générer un cercle qui fait 60 % de la hauteur (car les côtés supérieur et inférieur sont plus proches que les côtés gauche et droit).
Si nous pouvions seulement créer des cercles et des ellipses à partir du centre de l'élément, nous pourrions reproduire certains drapeaux avec CSS (par exemple Laos ou Burundi). Pourtant, nous ne pouvions pas en développer d'autres avec des cercles décentrés (par exemple le Costa Rica ou l'Ethiopie).
La méthode radial-gradient() permet d'indiquer le point d'origine du dégradé. Nous le faisons en utilisant at posX posY après les mots-clés size et shape (le cas échéant). Essayons de créer le drapeau du Bangladesh avec :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Que se passe-t-il lorsque nous commençons à déplacer le centre du dégradé ? La distance jusqu'au coin le plus éloigné change ! Cela conduira à des calculs trigonométriques pour ajuster la taille en conséquence… ou à la place, nous pourrions identifier un point de référence différent qui n'est pas le coin le plus éloigné (comme le côté le plus proche dans ce cas).
Pour éviter cela, nous pouvons spécifier une taille absolue pour la largeur et la hauteur. Si nous faisons cela, nous ne pourrons pas identifier s'il s'agit d'un cercle ou d'une ellipse car ces valeurs absolues détermineront la forme.
Un dégradé conique crée une transition de couleur progressive à partir d'un point d'origine tournant autour de lui dans le sens des aiguilles d'une montre. Cela peut paraître complexe à visualiser comme ça, alors je préfère utiliser un exemple lorsque je l'explique aux gens : imaginez un dégradé linéaire régulier imprimé sur un papier (jusqu'ici, tout va bien) ; maintenant, prenez le papier, pliez-le sur un côté et roulez-le en cône (d'où le nom !). La figure résultante ressemblera à un dégradé conique vu d'en haut. J'espère que cela a été utile.
Comme pour les dégradés radiaux, le point d'origine par défaut d'un dégradé conique est le centre absolu de l'élément. De même que les dégradés radiaux, nous pouvons modifier ce point en utilisant at posX posY.
C'est un drapeau assez simple à créer avec un dégradé conique. Il faut d'abord positionner le centre à 40% horizontalement et 50% verticalement, puis préciser les points d'arrêt.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Comme je l'ai dit, c'est du gâteau ! Comme il n'y a pas grand-chose, voici un fait que vous ne connaissez peut-être pas sur le drapeau du Bénin : le jaune représente les trésors de la nation, le rouge représente le courage de leurs ancêtres et le vert représente les espoirs de démocratie.
Sur cette base, voyons une façon de dessiner le drapeau de la République tchèque :
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Cela fonctionne très bien, mais remarquez que nous utilisons #fff deux fois. Ne serait-il pas bien si nous pouvions l'utiliser une seule fois ? Comme vous l’avez peut-être deviné, la réponse est que nous le pouvons ! Un dégradé ne doit pas nécessairement commencer à partir de 0deg. Nous pouvons spécifier une position de départ en utilisant from [angle].
Par exemple, disons que l'on veut partir de la couleur rouge :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
L'angle peut être une valeur positive ou négative, nous déplacerions alors le point de départ respectivement dans le sens des aiguilles d'une montre ou dans le sens inverse.
Nous avons appris à utiliser des dégradés linéaires, radiaux et coniques pour générer des drapeaux relativement simples… mais parfois les drapeaux peuvent devenir compliqués et un seul dégradé ne suffit pas. Que pouvons-nous faire dans ce cas ?
CSS autorise plusieurs images d'arrière-plan (et dégradés) dans un élément. Nous devons séparer leurs valeurs par une virgule. Comme cela peut paraître contre-intuitif, une chose importante à retenir est que les arrière-plans du haut se chevaucheront et masqueront ceux du bas.
Le drapeau de la Suède est une croix jaune sur fond bleu. Nous pouvons générer chaque barre jaune en utilisant un dégradé linéaire transparent-jaune-transparent :
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Cet exemple a plus que ce que l'on voit :
Alors que le drapeau précédent montrait plusieurs dégradés en action, ce n'était pas génial de montrer comment ils s'empilent car il utilisait des transparents. Voyons donc un autre exemple : celui qui utilise plusieurs dégradés de différents types.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Lorsque vous combinez des arrière-plans, vous n'êtes pas limité à un seul type de dégradé. Vous pouvez utiliser n'importe quel type.
Jusqu'à présent, nous avons vu des dégradés linéaires, radiaux et coniques, et comment ils peuvent être combinés. Mais dans tous les cas, le dégradé occupait tout le drapeau. Certains transparents peuvent ne pas donner cette apparence, mais la taille des dégradés était toujours de 100 % de la largeur et de la hauteur.
Mais il existe des moyens de modifier la taille du dégradé pour mieux répondre à nos besoins. Le plus simple consiste à spécifier une taille d'arrière-plan. Si la taille est plus petite que le conteneur, l'arrière-plan se répétera (sauf si nous utilisons quelque chose comme background-repeat: none.)
Reprenons un exemple avec le drapeau du Qatar. Le drapeau répète un motif neuf fois et peut être facilement reproduit avec un dégradé conique. Si nous spécifions que la largeur du dégradé doit être de 100 % de celle du drapeau et sa hauteur d'un neuvième de la hauteur du drapeau, le navigateur répétera l'arrière-plan jusqu'à ce que le conteneur soit rempli, complétant ainsi le dessin pour nous.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Bien sûr, une fois que nous avons spécifié une taille, nous pouvons également spécifier la position où sera situé le dégradé. Nous ferions cela avec background-position (et c'est là que la propriété background-repeat sera utile).
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Remarquez que nous n'avons pas besoin de spécifier une taille et une position pour la dernière couleur. Vous ne pouvez en définir qu'un qui occupera automatiquement tout le conteneur.
Nous pouvons séparer les valeurs des images d'arrière-plan, les tailles et les positions par des virgules. C’est pratique quand il n’y en a que quelques-uns, mais cela peut être un vrai casse-tête si on a plusieurs parcours. Il est facile de se perdre et de mélanger les valeurs.
Au lieu de cela, nous pouvons utiliser la forme courte de la propriété background pour fournir toutes les valeurs à la fois : background : position du dégradé / répétition de la taille, comme indiqué ci-dessous :
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Nous avons vu des dégradés linéaires, radiaux et coniques, mais chaque variation nous permet d'ajouter des « motifs de couleurs ». Les drapeaux sont parfaits pour cela : beaucoup sont constitués de lignes horizontales répétées.
Je parle des dégradés répétitifs. Ils se comportent de la même manière que les dégradés réguliers : ils répètent le motif spécifié jusqu'à ce qu'il atteigne 100 % ou 360 degrés. Il existe trois dégradés répétitifs :
Prenons l'exemple du drapeau grec. Nous pourrions avoir 3 ou 4 grands dégradés linéaires pour y parvenir, ou nous pouvons utiliser trois dégradés linéaires répétitifs :
Pour réaliser la croix en haut à gauche, il faut définir à la fois la position et la taille des deux premiers dégradés linéaires.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}
Le drapeau de l'Ouganda comporte une belle grue à couronne grise que nous ne coderons pas en CSS pour des raisons pratiques. Nous nous concentrerons sur les deux autres parties du drapeau : un cercle blanc au centre et plusieurs lignes horizontales en noir, jaune et rouge.
Cette composition peut être réalisée de deux manières différentes :
La première option serait comme ceci :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
La deuxième option ressemblerait à ceci :
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Mais les deux options finissent par se ressembler. Il est important de se rappeler qu'en CSS, comme dans tout autre style de programmation, il existe généralement plusieurs façons d'atteindre nos objectifs.
Le terme « drapeaux à élément unique » peut être trompeur. Tous les éléments HTML non vides incluent –au moins– deux pseudo-éléments que nous pouvons également utiliser pour dessiner : ::before et ::after. Nous avons donc véritablement trois éléments qui peuvent être stylisés séparément et offrent de nombreuses possibilités :
Si vous avez codé le drapeau du Qatar en utilisant des dégradés comme décrit ci-dessus, vous avez peut-être remarqué que les bords triangulaires du dégradé semblent trop nets et laids sur certains moniteurs. Il existe de nombreuses façons de résoudre ce problème, mais une solution que j'aime consiste à utiliser un pseudo-élément avec un chemin de clip pour créer des lignes plus fluides et plus propres.
Cette option simplifiera le code par rapport à l'utilisation de plusieurs dégradés linéaires et à l'astuce de différence de pixels expliquée dans la section suivante.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Les pseudo-éléments dans ce cas ne doivent pas nécessairement se limiter à des modèles complexes. Prenez par exemple les drapeaux de Cuba, des Bahamas ou de la Jordanie. Ils ont des triangles sur le côté gauche que nous avons dessinés en utilisant des dégradés coniques. Ces dégradés ont un problème : les bords paraîtront trop durs ou pixellisés sur certains moniteurs – il y a une astuce pour résoudre ce problème avec des dégradés linéaires dans la section suivante –. Au lieu de cela, nous pourrions créer le triangle avec un pseudo-élément (un chemin polygonal à trois points) et les bords paraîtront plus lisses. Semblable au drapeau de Bahreïn ci-dessus.
J'ai obtenu les points approximatifs des points sommets d'une étoile à cinq branches et je les ai appliqués à l'aide d'un chemin de détourage dans les pseudo-éléments ::avant et ::après. De nombreux artistes CSS envisageront d'utiliser la triche sur le chemin du clip, et l'étoile peut être dessinée avec des dégradés coniques. Mais par souci de simplicité, je vais le laisser comme chemin de détourage.
En ajoutant un dégradé conique comme fond de drapeau et les étoiles dans les pseudo-éléments, nous pouvons dessiner le drapeau du Panama en un rien de temps :
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
N'oubliez pas que lorsque vous combinez des arrière-plans, ils s'empileront dans l'ordre dans lequel ils sont répertoriés. Cela signifie que le premier ira au-dessus et chevauchera ceux du dessous, puis par la suite.
Bien que cela ait du sens du point de vue de la conception, cela peut être contre-intuitif du point de vue CSS, où la cascade fait que la dernière apparition d'une propriété ou d'une classe a priorité sur celles définies précédemment.
Dans l'article, j'ai mentionné à quel point les bords du dégradé peuvent paraître trop nets ou pixellisés. Cela se produit à cause de la façon dont le navigateur restitue les dégradés – et c'est ennuyeux, surtout parce que cela ne se produit pas pour les bords durs sur SVG.
Par exemple, la ligne ici peut ne pas s'afficher parfaitement sur tous les moniteurs :
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Une astuce pour éviter cela consiste à ajouter une différence de pixels entre le point final et le point de départ suivant. Soit en soustrayant ou en ajoutant respectivement 0,5 px à chacun d'eux ou, plus simple, en soustrayant/ajoutant simplement 1 px à l'un d'eux. Cette ligne apparaîtra fluide sur tous les moniteurs :
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Une erreur courante lorsque l'on travaille avec des dégradés répétitifs est de ne pas ajouter de point de départ pour la première couleur. Cela donnera au dégradé un aspect génial. Si vos dégradés répétitifs ne fonctionnent pas comme prévu, vérifiez toujours que vous y avez ajouté un 0 (ou une autre valeur) !
Les pseudo-éléments peuvent être intimidants au début, mais ils ne sont pas plus différents de tout autre élément, ils sont simplement attachés à l'élément HTML avec eux.
N'oubliez pas d'ajouter la propriété content avec une valeur (une chaîne vide est courante lorsque vous souhaitez uniquement qu'elle apparaisse). Sinon, les pseudo-éléments ne seront pas visibles !
Lors du dessin en CSS et de la création d'art CSS, de nombreuses personnes affirmeront que l'utilisation de la propriété clip-path est de la triche. Cela facilite les choses et constitue un outil utile à votre ceinture. Je ne le jetterais pas simplement parce que c'est de la « triche ».
Apprenez à utiliser le chemin de clip – et le masque ! – Cela finira par s'avérer utile dans un projet.
Il est maintenant temps pour vous de pratiquer les dégradés CSS. Essayez-le et essayez de recréer quelques drapeaux par vous-même. Voici une liste de pays avec de bons drapeaux à pratiquer (triés par ordre de complexité) :
Et rappelez-vous : il n’existe pas de manière unique de coder un drapeau. Chacun d’eux peut être réalisé de différentes manières. Utilisez les dégradés avec lesquels vous êtes plus à l'aise ou dont vous savez qu'ils seront les plus beaux.
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!
Comment mettre à niveau Douyin
Explication détaillée de la commande Linux dd
Comment résoudre le problème que localhost ne peut pas être ouvert
Que dois-je faire si eDonkey Search ne parvient pas à se connecter au serveur ?
Utilisation de la classe Snoopy en php
Méthodes courantes de détection des vulnérabilités des sites Web
La différence entre git et svn
Tutoriel sur l'achat et la vente de Bitcoin sur Huobi.com
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
