À l'éloge des ombres

Republié par Platon

Suiveurs: 0

Notre cher ami Robin a un nouvel essai intitulé Éloge des ombres. Maintenant, avant de sauter là-bas à la recherche de pépites sur les ombres de boîte CSS, les ombres de texte et les filtres d'ombre… c'est pas ça. C'est un essai sur la photographie et sur ce que Robin a appris sur la manipulation des ombres avec un appareil photo.

Alors, pourquoi partager ça ? Parce que c'est cool comme diable qu'il ait fait une page dirigée par un article dédiée à un essai. Et vous en apprendrez beaucoup sur CSS si vous ouvrez DevTools dessus :

Techniques de centrage. Remarquez comment CSS Grid est utilisé sur le <body> simplement pour centrer la brochure. Puis Robin l'atteint à nouveau sur chaque .frame de l'essai de faire la même chose avec le contenu.
"Faux" images d'arrière-plan. Robin aurait pu faire beaucoup de travail en créant une classe CSS pour chaque .frame pour obtenir les images de fond. Au lieu de cela, il utilise object-fit: cover sur le HTML en ligne <img>s pour conserver le rapport hauteur/largeur tout en remplissant .frame récipient. (Il est en fait écrit à ce sujet avant.) Cela économise certainement beaucoup de CSS, mais cela lui permet également d'utiliser du texte alternatif si nécessaire. Je me demande en quelque sorte si un <figure>/<figcaption> la structure aurait pu fonctionner ici à la place, mais je doute que cela apporterait beaucoup d'avantages supplémentaires pour ce qui se passe.
Contextes d'empilement. Un autre avantage de ces fausses images d'arrière-plan ? Ils utilisent le positionnement absolu qui crée un contexte d'empilement, permettant à Robin de définir un z-index: 0 sur les images. De cette façon, le texte s'empile directement au-dessus avec z-index: 1. Encore une fois, CSS Grid gère tout le centrage afin que les choses soient bien alignées.
Faites défiler l'accrochage. Je toujours love quand je vois le défilement CSS se casser dans la nature. Robin a fait un bon choix de l'utiliser ici, car il se prête vraiment à toute l'expérience de rotation de page tout en faisant défiler les cadres. Le défilement horizontal peut être exaspérant, mais aussi extrêmement élégant lorsqu'il est bien exécuté, car il améliore la conception de la colonne étroite. Si vous voulez une bonne explication de la façon dont tout cela fonctionne, Robin a également écrit sur l'accrochage de défilement horizontal.