Bandes d'arrière-plan animées qui passent au survol

À quelle fréquence devez-vous atteindre le CSS background-size propriété? Si vous êtes comme moi, et probablement comme beaucoup d'autres utilisateurs, c'est généralement lorsque vous background-size: cover une image pour remplir l'espace d'un élément entier.

Eh bien, on m'a présenté un défi intéressant qui nécessitait un dimensionnement d'arrière-plan plus avancé : des bandes d'arrière-plan qui passent au survol. Vérifiez ceci et survolez-le avec votre curseur :

Il se passe beaucoup plus que la taille de l'arrière-plan, mais c'était l'astuce dont j'avais besoin pour faire la transition des rayures. J'ai pensé vous montrer comment j'en suis arrivé là, non seulement parce que je pense que c'est un très bel effet visuel, mais parce que cela m'a obligé à faire preuve de créativité avec des dégradés et des modes de fusion que je pense que vous pourriez apprécier.

Commençons par une configuration très basique pour garder les choses simples. je parle d'un seul

dans le HTML qui est stylisé comme un carré vert :

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Mise en place des bandes de fond

Si votre esprit est allé directement à un dégradé linéaire CSS lorsque vous avez vu ces rayures, alors nous sommes déjà sur la même page. Nous ne pouvons pas exactement faire un dégradé répétitif dans ce cas puisque nous voulons que les bandes occupent des quantités inégales d'espace et les transitionnent, mais nous pouvons créer cinq bandes en enchaînant cinq arrière-plans au-dessus de notre couleur d'arrière-plan existante et en les plaçant au sommet - à droite du conteneur :

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

J'ai fait des rayures horizontales, mais nous pourrions aussi aller verticalement avec l'approche que nous couvrons ici. Et nous pouvons simplifier un peu cela avec des propriétés personnalisées :

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

Ainsi, le --gt la valeur est le gradient et --n est une constante que nous utilisons pour déplacer les rayures vers le bas afin qu'elles soient décalées verticalement. Et vous avez peut-être remarqué que je n'ai pas défini de vrai dégradé, mais plutôt des bandes noires unies dans le linear-gradient() fonction - c'est intentionnel et nous verrons pourquoi j'ai fait cela dans un instant.

Une dernière chose que nous devons faire avant de passer à autre chose est d'empêcher que nos arrière-plans ne se répètent; sinon, ils seront carrelés et rempliront tout l'espace :

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

Nous aurions pu fixer background-repeat dans le background sténographie, mais j'ai décidé de le casser ici pour que les choses restent faciles à lire.

Décaler les rayures

Nous avons techniquement des rayures, mais c'est assez difficile à dire car il n'y a pas d'espace entre elles et elles couvrent tout le conteneur. C'est plus comme si nous avions un carré noir solide.

C'est là que nous arrivons à utiliser le background-size propriété. Nous voulons définir à la fois la hauteur et la largeur des rayures et la propriété prend en charge une syntaxe à deux valeurs qui nous permet de faire exactement cela. Et, nous pouvons enchaîner ces tailles par des virgules en les séparant de la même manière que nous l'avons fait sur background.

Commençons simplement en définissant d'abord les largeurs. Utilisation de la syntaxe à valeur unique pour background-size définit la largeur et la hauteur par défaut à auto. J'utilise des valeurs totalement arbitraires ici, alors définissez les valeurs sur ce qui fonctionne le mieux pour votre conception :

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Si vous utilisez les mêmes valeurs que moi, vous obtiendrez ceci :

Il ne semble pas exactement que nous définissions la largeur de toutes les rayures, n'est-ce pas ? C'est à cause de la auto comportement de hauteur de la syntaxe à valeur unique. La deuxième bande est plus large que les autres en dessous et les recouvre. Nous devons définir les hauteurs afin que nous puissions voir notre travail. Ils devraient tous avoir la même hauteur et nous pouvons en fait réutiliser notre --n variable, encore une fois, pour garder les choses simples :

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

Ah, bien mieux !

Ajout d'espaces entre les rayures

Il s'agit d'une étape totalement facultative si votre conception ne nécessite pas d'espace entre les rayures, mais la mienne l'a fait et ce n'est pas trop compliqué. Nous changeons la hauteur de chaque bande background-size un peu, diminuant la valeur afin qu'ils ne remplissent pas tout l'espace vertical.

Nous pouvons continuer à utiliser notre --n variable, mais soustrayez une petite quantité, disons 5px, en utilisant calc() pour obtenir ce que nous voulons.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

Cela fait beaucoup de répétitions que nous pouvons éliminer avec une autre variable :

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Masquage et mélange

Échangeons maintenant le palegreen couleur d'arrière-plan que nous avons utilisée à des fins visuelles jusqu'à présent pour le blanc.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

Un motif noir et blanc comme celui-ci est parfait pour le masquage et le mélange. Pour ce faire, nous allons d'abord envelopper notre

dans un nouveau conteneur parent et introduisez un deuxième

dessous:

Nous allons faire un peu de refactorisation CSS ici. Maintenant que nous avons un nouveau conteneur parent, nous pouvons passer le fixe width ainsi que height propriétés que nous utilisions sur notre

là bas:

section {
  width: 500px;
  height: 500px;
} 

Je vais aussi utiliser CSS Grid pour positionner les deux

éléments les uns sur les autres. C'est la même astuce que Temani Afif utilise pour créer son galeries d'images super cool. L'idée est que nous plaçons les deux divs sur le conteneur complet en utilisant le grid-area propriété et alignez le tout vers le centre :

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

Maintenant, regarde ça. La raison pour laquelle j'ai utilisé un dégradé solide qui va du noir au noir plus tôt est de nous préparer à masquer et à mélanger les deux

couches. Ce n'est pas du vrai masquage dans le sens où nous appelons le mask propriété, mais le contraste entre les calques contrôle les couleurs visibles. La zone couverte de blanc restera blanche et la zone couverte de noir fuira. Documentation de MDN sur les modes de fusion a une belle explication de la façon dont cela fonctionne.

Pour que cela fonctionne, j'appliquerai le vrai dégradé que nous voulons voir sur le premier

tout en appliquant les règles de style de notre

sur le nouveau, en utilisant le :nth-child() pseudo-sélecteur :

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Si nous nous arrêtons ici, nous ne verrons en fait aucune différence visuelle par rapport à ce que nous avions auparavant. C'est parce que nous n'avons pas encore fait le mélange réel. Alors, faisons cela maintenant en utilisant le screen mode de fusion:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

J'ai utilisé une couleur de fond beige dans la démo que j'ai montrée au début de cet article. Cette sorte de coloration blanc cassé légèrement plus foncée permet à un peu de couleur de saigner à travers le reste de l'arrière-plan :

L'effet de survol

La dernière pièce de ce puzzle est l'effet de survol qui élargit les rayures sur toute la largeur. Tout d'abord, écrivons notre sélecteur pour cela. Nous voulons que cela se produise lorsque le conteneur parent (

dans notre cas) est survolé. Lorsqu'il est survolé, nous allons changer la taille de fond des rayures contenues dans le second

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

Nous voudrons changer le background-size des rayures sur toute la largeur du contenant tout en conservant la même hauteur :

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

Cela "aligne" l'arrière-plan sur toute la largeur. Si on rajoute un peu transition à cela, nous voyons alors les rayures s'étendre au survol :

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Voici à nouveau cette démo finale :

J'ai seulement ajouté du texte là-dedans pour montrer à quoi cela pourrait ressembler d'utiliser ceci dans un contexte différent. Si vous faites la même chose, assurez-vous qu'il y a suffisamment de contraste entre la couleur du texte et les couleurs utilisées dans le dégradé pour respecter Directives WCAG. Et pendant que nous abordons brièvement l'accessibilité, cela vaut la peine en tenant compte des préférences de l'utilisateur pour un mouvement réduit quand il s'agit de l'effet de survol.

C'est un wrap!

Plutôt chouette, non ? Je le pense certainement. Ce que j'aime aussi à ce sujet, c'est qu'il est assez maintenable et personnalisable. Par exemple, nous pouvons modifier la hauteur, les couleurs et la direction des rayures en modifiant quelques valeurs. Vous pouvez même varier quelques éléments supplémentaires - comme les couleurs et les largeurs - pour le rendre encore plus configurable.

Je suis vraiment intéressé si vous auriez abordé cela d'une manière différente. Si oui, merci de partager dans les commentaires ! Ce serait bien de voir combien de variations nous pouvons collecter.