Créer un effet d’ombre au scroll en CSS pure

Quand j'ai découvert l'article de Lea Verou "Pure CSS scrolling shadows with background-attachment: local", je me suis écriée que cette femme est un génie ! Lorsque l'on pense à ce genre de détail, directement nous nous disons que c'est qu'en JavaScript. Pourtant, avec la propriété background-attachment: local, cela devient un jeu d'enfant.

Pour cet article, le but sera de réaliser ce petit CodePen où l'on peut observer une ombre en haut ou en bas, enfonction de votre position dans la lecture du texte.

See the Pen
Pure CSS Scrolling Shadows by Laura Durieux (@Lauwed)
on CodePen.

Un peu d'explications sur background-attachment

Lorsque nous étions à la version 2.1 du CSS, fixed et scroll étaient les deux seules valeurs disponibles pour la propriété background-attachment. scroll est la valeur par défaut et positionne l'image de fond relativement au bloc auquel il appartient. Tandis que fixed positionne l'image de fond relativement au viewport, ce qui fait que l'image reste fixe lors du scroll.

Avec l'arrivée de Backgrounds and Borders Level 3, une nouvelle valeur fait son entrée ; local. Quand background-attachment: local est appliqué, l'image de fond va être positionnée relativement à son parent, comme la valeur scroll, mais cette fois, le fond bougera lorsque l'on scroll son parent.

Voici un petit CodePen pour vous permettre de regarder la différence, ainsi que de pouvoir un peu chipoter.

See the Pen
background-attachment explanations by Laura Durieux (@Lauwed)
on CodePen.

Utilisation des multiples backgrounds et de background-attachment

Pour réussir a faire l'exemple, nous avons encore besoin d'une dernière notion ; Les multiple-backgrounds. Pour cela, il faut utiliser la propriété backgroundet non background-image et utiliser cette nomenclature.

.maClasse {
  background: background1, background2, ..., backgroundN;
}

Il faut savoir 2 choses ;

1. background1 sera le plus "haut" de la pile, donc le premier que nous verrons. backgroundN est donc le plus "bas" de la pile.
2. Seul le dernier background peut décrire une couleur.

J'ai réalisé un petit CodePen pour vous montrer comment nous allons utiliser background-attachment. Tout d'abord, nous avons 4 fonds différents ; 2 verts et 2 rouges.

background:
    /* Dégradés verts */
    radial-gradient(farthest-side at 50% 0, rgba(#2ecc71,1), rgba(#2ecc71,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(#2ecc71,1), rgba(#2ecc71,0)) 0 100%,
    /* Dégradés rouges */
    linear-gradient(#e74c3c 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), #e74c3c 70%) 0 100%;

Et comme nous pouvons le remarquer, les dégradés verts se trouvent bien au-dessus des dégradés rouges, vu qu'ils sont définis en premier.

Ensuite vient la fameuse propriété background-attachment qui a également 4 valeurs différentes, une pour chaque dégradés. Nous avons 4 images de fond, donc 4 valeurs pour cette propriété.

/* Opera doesn't support this in the shorthand */
background-attachment: scroll, scroll, local, local;

Les dégradés verts restent fixés lorsque nous scrollons le parent, tandis que les dégradés rouges se déplacent avec le scroll grâce à la valeur local.

Voici le petit CodePen.

See the Pen
Pure CSS Scrolling Shadows by Laura Durieux (@Lauwed)
on CodePen.

Réalisation du projet

Maintenant, nous avons toutes les clefs en main pour pouvoir réaliser aisément le projet. Nous pouvons reprendre l'exemple d'au-dessus, sauf que cette fois, il faut inverser l'ordre des images de fonds. En effet, les dégradés verts sont notre effet shadow qui doivent être cachés par les dégradés rouges qui seront blancs, lorsque nous scrollons tout haut ou tout en bas.

See the Pen
Pure CSS Scrolling Shadows by Laura Durieux (@Lauwed)
on CodePen.