Στο Έπαινο των Σκιών

Αναδημοσίευση από τον Πλάτωνα

Ακολουθούν: 0

Ο αγαπημένος μας φίλος Robin έχει ένα νέο δοκίμιο που ονομάζεται Στο Έπαινο των Σκιών. Τώρα, προτού μεταβείτε εκεί αναζητώντας ψήγματα σε σκιές πλαισίου CSS, σκιές κειμένου και φίλτρα σκιών… αυτό είναι όχι αυτό. Είναι ένα δοκίμιο για τη φωτογραφία και τι έχει μάθει ο Robin σχετικά με το να δίνει σκιές με μια κάμερα.

Λοιπόν, γιατί να το μοιραστείτε αυτό; Γιατί είναι ωραίο που έφτιαξε μια σελίδα που απευθύνεται σε άρθρο αφιερωμένη σε ένα δοκίμιο. Και θα μάθετε πολλά για το CSS αν ανοίξετε τα DevTools σε αυτό:

Τεχνικές κεντραρίσματος. Παρατηρήστε πώς χρησιμοποιείται το CSS Grid στο <body> απλά να κεντράρετε το φυλλάδιο. Έπειτα, ο Ρόμπιν το πιάνει ξανά σε κάθε ένα .frame του δοκιμίου να κάνουμε το ίδιο με το περιεχόμενο.
"Faux" εικόνες φόντου. Ο Robin θα μπορούσε να έχει κάνει πολλή δουλειά για τον εαυτό του δημιουργώντας μια τάξη CSS για τον καθένα .frame για να λάβετε τις εικόνες φόντου. Αντίθετα χρησιμοποιεί object-fit: cover σε ενσωματωμένο HTML <img>s για να διατηρήσετε την αναλογία διαστάσεων ενώ γεμίζετε το .frame δοχείο. (Στην πραγματικότητα είναι γραμμένο για αυτό πριν.) Αυτό σίγουρα εξοικονομεί πολλά CSS, αλλά του επιτρέπει επίσης να χρησιμοποιεί εναλλακτικό κείμενο εάν χρειάζεται. Αναρωτιέμαι αν α <figure>/<figcaption> Η δομή θα μπορούσε να λειτουργήσει εδώ, αλλά αμφιβάλλω ότι θα παρείχε πολύ πρόσθετο όφελος για αυτό που συμβαίνει.
Στοίβαξη πλαισίων. Άλλο ένα πλεονέκτημα από αυτές τις ψευδείς εικόνες φόντου; Χρησιμοποιούν απόλυτη τοποθέτηση που δημιουργεί ένα πλαίσιο στοίβαξης, επιτρέποντας στον Robin να ορίσει ένα z-index: 0 στις εικόνες. Με αυτόν τον τρόπο, το κείμενο στοιβάζεται απευθείας από πάνω z-index: 1. Και πάλι, το CSS Grid χειρίζεται όλο το κεντράρισμα, ώστε τα πράγματα να ευθυγραμμίζονται όμορφα.
Κλείσιμο κύλισης. εγώ πάντα αγάπη όταν βλέπω την κύλιση CSS να σπάει στη φύση. Ο Robin έκανε μια ωραία επιλογή να το χρησιμοποιήσει εδώ, καθώς προσφέρει πραγματικά όλη την εμπειρία στροφής σελίδας κατά την κύλιση στα καρέ. Η οριζόντια κύλιση μπορεί να είναι εκνευριστική, αλλά και εξαιρετικά κομψή όταν εκτελείται καλά, καθώς είναι εδώ στον τρόπο με τον οποίο βελτιώνει τη σχεδίαση της στενής στήλης. Αν θέλετε μια ωραία εξήγηση για το πώς λειτουργούν όλα, ο Robin έχει επίσης γράφτηκε για οριζόντια κοπή κύλισης.