États de case de style amusant de temps de temps

Dans la conception Web, nous pouvons ignorer le style des boîtes de saisie de texte, des liens et même des boutons, mais les cases à cocher sont différentes. Par conséquent, la conception de style de la case à cocher apporte toujours la fraîcheur.

Bien que la conception de la case à cocher ne soit pas compliquée, nous n'avons pas besoin de nous limiter à des changements de couleur d'arrière-plan simples ou à ajouter / supprimer les frontières pour indiquer les modifications de l'État. D'excellents résultats peuvent être facilement obtenus sans de superbes compétences en conception. Cet article montrera plusieurs méthodes pour vous.

Connaissances de base

Dans l'exemple suivant, la case à cocher adopte essentiellement une disposition à trois couches: le bas est la case à cocher et le haut est deux éléments superposés ou pseudo-éléments. En fonction de l'élément visible, il indique l'état sélectionné ou non contrôlé de la case à cocher.

Dans le code, toutes les dispositions (y compris les cases à cocher) utilisent des grilles. Vous pouvez choisir d'autres dispositions appropriées en fonction de la situation réelle. Plus d'instructions pour le code et la conception figurent dans les commentaires du code.

De plus, tout élément superposé en haut de la case a pointer-events: none défini pour éviter de bloquer les utilisateurs de cliquer ou de cliquer sur la case à cocher.

Maintenant, regardons la première approche.

Méthode 1: Mélanger l'arrière-plan comme indicateur d'état

Le mode hybride dans CSS est une technologie polyvalente. La manipulation des couleurs par rapport à deux ou plusieurs éléments ou arrière-plans est très utile dans certains scénarios inattendus.

La case à cocher est un exemple.

 <label for="un">ONU</label>

 entrée [Type = Checkbox] :: avant,
entrée [Type = Checkbox] :: après {
  MODE-MODE-MODED: Light dur;
  Pointer-Events: Aucun;
  / * Plus de styles * /
}
entrée [Type = Checkbox] :: avant {
  Contexte: vert;
  Contenu: «✓»;
  Couleur: blanc;
  / * Plus de styles * /
}
entrée [Type = Checkbox] :: après {
  Contexte: bleu;
  Contenu: «⨯»;
  / * Plus de styles * /
}
entrée [Type = Checkbox]: coché :: après {
  Mode de mélange de mélange: Unset;
  Couleur: transparent;
}

Dans cet exemple, je définis les pseudo-éléments de la case à cocher en vert et bleu, respectivement, les superposer ensemble et définir mix-blend-mode pour chaque élément. Cela signifie que l'arrière-plan de chaque élément est mélangé avec sa couleur d'arrière-plan.

J'ai utilisé la valeur hard-light , qui simule les effets de multiplication ou de filtrage en fonction de la question de savoir si la couleur supérieure est sombre ou claire. Vous pouvez creuser profondément dans les différents modes hybrides sur MDN.

Lorsque la case est sélectionnée, mix-blend-mode du ::after le pseudo-élément est définie sur unset , ce qui entraîne différents effets visuels.

Méthode 2: Créer une animation 3D

Animer les blocs de couleurs est amusant. Il serait préférable que cela se rende 3D. Le CSS peut simuler des éléments de rendu spatial 3D. Nous pouvons donc créer une boîte 3D et la faire pivoter pour indiquer le changement dans l'état de la case à cocher.

<div>
  <div>
<i></i><i></i><i></i><i></i>
</div>
</div>
<label for="un">ONU</label>

 .C-Checkbox> div {
  Transition: Transformer .6S CUBIC-BEZIER (.8, .5, .2, 1.4);
  style transform: Preserve-3d;
  Pointer-Events: Aucun;
  / * Plus de styles * /
}
/*devant*/
.C-Checkbox> Div> i: Premier-enfant {
  Contexte: #ddd;
  Transform: Translatez (-10px);
}
/*dos*/
.C-Checkbox> Div> i: Last-Child {
  Contexte: bleu;
  Transform: Translatez (10px);
}
/*côté*/
.C-Checkbox> Div> i: Nth-of-Type (2),
.C-Checkbox> Div> i: nth-of-Type (3) {
  Transformer: Rotatex (90deg) Rotatey (90deg);
  Position: relative;
  hauteur: 20px;
  En haut: 10px;
}
.C-Checkbox> Div> i: nth-of-Type (2) {
  Contexte: Navy;
  À droite: 20px;
}
.C-Checkbox> Div> i: nth-of-Type (3) {
  Contexte: DarkslateGray;
  Gauche: 20px;
}

Après la case à cocher<div> L'élément devient un conteneur d'espace 3D - après le style de <code>transform transform-style: preserve-3d;<i></i> Éléments (gris et bleu), il y a une certaine distance entre eux. Deux autres éléments pris en sandwich entre eux, couvrant leurs côtés gauche et droit. C'est comme une boîte en carton recouverte du haut et du bas à l'exception du haut et du bas.

Lorsque la case est sélectionnée, cette boîte grise et bleue tourne de côté de l'autre côté. Depuis que j'ai déjà<div> Ajout de transitions afin que sa rotation soit animée.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Entrée: div vérifié { transformée: Rotatey (180deg); }</pre><div class="contentsignin">Copier après la connexion</div></div> <h3> Méthode 3: Utilisez les coins arrondis</h3> <p> Changer les coins arrondis de la case à cocher? Rien d'intéressant. Changer les coins arrondis des autres cases à proximité à proximité? C'est un peu intéressant.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;label for=&quot;un&quot;&gt;ONU&lt;/label&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> saisir { Contexte: #ddd; Border-Radius: 20px; / * Plus de styles * / } entrée: pas (: premier de type) :: avant { contenu: ''; Transform: tradlatey (-60px); Pointer-Events: Aucun; } Entrée: vérification * entrée :: avant, Entrée: dernier de type: vérifié { Border-Radius: 20px; Contexte: bleu; } Entrée: Vérification * Entrée: vérification * entrée :: avant { Border-top-Left-Radius: Unset! Important; Border-top-droite-radius: Unset! IMPORTANT; } Entrée: vérifié :: avant { Border-Bottom-Left-Radius: Unset! IMPORTANT; Border-Bottom-droite-radius: Unset! Important; } / * Entre les deuxième et dernières boîtes à cocher * / Entrée: nth-of-type (4): vérifié * Entrée: vérifié { Border-top-Left-Radius: Undet; Border-top-droite-radius: Undet; }</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Si vous avez déjà interagi avec la démo, vous remarquerez que lorsque vous cliquez ou cliquez sur une case à cocher, elle peut non seulement modifier sa propre bordure, mais aussi les bordures de ses cases avant et arrière.</p> <p> Maintenant, nous n'avons pas de sélecteur pour sélectionner l'élément précédent, seulement l'élément suivant. Par conséquent, la façon dont nous contrôlons l'apparence de la case à cocher précédente est d'utiliser la pseudo-élément de la case à cocher pour styliser sa case à cocher précédente. La case à cocher, sauf que la première case à cocher obtiendra un pseudo-élément qui est déplacé en haut de la case à cocher devant elle.</p> <p> Supposons que les cases A, B et C soient organisées une par une. Si je clique sur B, je peux modifier l'apparence de A en définissant la pseudo-élément de B, modifiez l'apparence de B en définissant la pseudo-élément de C et modifiez l'apparence de C en définissant la pseudo-élément de D.</p> <p> À partir de B, les pseudo-éléments de B, C et D sont accessibles - tant que le prochain sélecteur d'élément peut utiliser entre eux dans la disposition.</p> <p> Les quatre coins de chaque case à cocher sont initialement arrondis lorsqu'ils sont sélectionnés et non contrôlés. Cependant, si une case à cocher est sélectionnée, les coins supérieurs de la prochaine case et les coins inférieurs de la case avant deviendront droits (en écrasant et en supprimant leurs coins arrondis).</p> <h3> Méthode 4: Utilisez le masque CSS</h3> <p> Bouettez les boutons… En ce qui concerne le code, ce sont également des cases. Nous pouvons donc concevoir ces cases à cocher en tant que boutons à bascule, ce qui peut être fait à l'aide d'un masque CSS. En bref, il s'agit d'une technique pour utiliser des images pour filtrer leurs parties d'arrière-plan.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.one.skin { Contexte: Centre sans répétition -40px URL ('Photo-1584107662774-8d575e8f3550? W = 350 &amp; q = 100'); } .two.skin { Contexte: Centre sans répétition -110px URL ('Photo-1531430550463-9658d67c492d? W = 350 &amp; q = 100'); - masque: gradient radial (cercle à 45px 45px, rgba (0,0,0,0) 40px, rgba (0,0,0,1) 40px); masque-image: var (- masque); -webkit-mask-image: var (- masque); }</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Deux peaux (montrant des photos de paysage) sont situées en haut de la case à cocher. Le haut obtient une <code>mask-image en forme de bouton à bascule typique - à gauche est un cercle transparent et le reste est de couleur complètement opaque. À travers le cercle transparent, nous pouvons voir la photo ci-dessous, tandis que le reste de mask-image affiche la photo en haut.

Lorsque la case est cliquée, le cercle transparent se déplace vers la droite, afin que nous puissions voir l'image en haut à travers le cercle, tandis que le reste montre la photo en bas.

 Entrée: vérifié ~ .two.skin {
  - masque: gradient radial (cercle à 305px 45px, rgba (0,0,0,1) 40px, rgba (0,0,0,0) 40px);
  masque-image: var (- masque); -webkit-mask-image: var (- masque);
}

Méthode 5: Utilisez l'ombre de la boîte

Enfin, regardons les plus faciles - mais je pense que c'est aussi l'approche la plus efficace -: les ombres à l'intérieur de l'animation.

 <label for="un">ONU</label>

 saisir {
  Transition: Box-Shadow .3S;
  Contexte: Lightgrey;
  / * Plus de styles * /
}
Entrée: vérifié { 
  Box-shadow: insert 0 0 0 20px bleu;
}

Certaines propriétés CSS peuvent être animées par défaut, dont une box-shadow . Cette animation subtile est parfaite pour les thèmes minimalistes.

C'est ça! J'espère que cela vous inspirera la prochaine fois que vous travaillerez sur une case à cocher. CSS nous offre de nombreuses possibilités d'indiquer des changements dans les États, alors amusez-vous et partagez si vous avez des idées intéressantes.