Η δημιουργία ενός πλέγματος εικόνων είναι εύκολη, χάρη στο CSS Grid. Αλλά κάνοντας το πλέγμα να κάνει φανταχτερά πράγματα μετά οι εικόνες που έχουν τοποθετηθεί μπορεί να είναι δύσκολο να βγουν.
Ας πούμε ότι θέλετε να προσθέσετε κάποιο φανταχτερό εφέ αιώρησης στις εικόνες όπου μεγαλώνουν και μεγεθύνονται πέρα από τις γραμμές και τις στήλες όπου βρίσκονται; Μπορούμε να το κάνουμε αυτό!
Cool, σωστά; Εάν ελέγξετε τον κώδικα, δεν θα βρείτε JavaScript, σύνθετους επιλογείς ή ακόμη και μαγικοί αριθμοί. Και αυτό είναι μόνο ένα παράδειγμα ανάμεσα σε πολλά που θα εξερευνήσουμε!
Χτίζοντας το πλέγμα
Ο κώδικας HTML για τη δημιουργία του πλέγματος είναι τόσο απλός όσο μια λίστα εικόνων μέσα σε ένα κοντέινερ. Δεν χρειαζόμαστε περισσότερο από αυτό.
<div class="gallery">
<img>
<img>
<img>
<!-- etc. -->
</div>Για το CSS, ξεκινάμε πρώτα ρυθμίζοντας το πλέγμα χρησιμοποιώντας τα εξής:
.gallery {
--s: 150px; /* controls the size */
--g: 10px; /* controls the gap */
display: grid;
gap: var(--g);
width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
aspect-ratio: 1;
grid-template-columns: repeat(3, auto);
}Εν ολίγοις, έχουμε δύο μεταβλητές, μία που ελέγχει το μέγεθος των εικόνων και μία που ορίζει το μέγεθος του κενού μεταξύ των εικόνων. aspect-ratio βοηθά στη διατήρηση των αναλογιών.
Ίσως αναρωτιέστε γιατί ορίζουμε μόνο τρεις στήλες αλλά όχι γραμμές. Όχι, δεν ξέχασα τις σειρές — απλά δεν χρειάζεται να τις ορίσουμε ρητά. Το CSS Grid έχει τη δυνατότητα αυτόματης τοποθέτησης στοιχείων σιωπηρές σειρές και στήλες, που σημαίνει ότι λαμβάνουμε όσες σειρές χρειάζονται για οποιονδήποτε αριθμό εικόνων ρίχνουμε σε αυτό. Μπορούμε να ορίσουμε ρητά τις σειρές, αλλά πρέπει να προσθέσουμε grid-auto-flow: column για να βεβαιωθούμε ότι το πρόγραμμα περιήγησης θα δημιουργήσει τις απαραίτητες στήλες για εμάς.
Ακολουθεί ένα παράδειγμα για την απεικόνιση και των δύο περιπτώσεων. Η διαφορά είναι ότι κάποιος ρέει σε α row κατεύθυνση η άλλη σε α column κατεύθυνση.
Αναχωρώ αυτό το άλλο άρθρο έγραψα για περισσότερα σχετικά με τα σιωπηρά πλέγματα και τον αλγόριθμο αυτόματης τοποθέτησης.
Τώρα που έχουμε το πλέγμα μας, ήρθε η ώρα να διαμορφώσουμε τις εικόνες:
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}Το φαινόμενο αιώρησης που δημιουργούμε βασίζεται σε αυτό το CSS. Μάλλον σας φαίνεται παράξενο το γεγονός ότι φτιάχνουμε εικόνες που δεν έχουν πλάτος ή ύψος αλλά έχουν ελάχιστο πλάτος και ύψος 100%. Αλλά θα δείτε ότι είναι ένα αρκετά προσεγμένο κόλπο για αυτό που προσπαθούμε να πετύχουμε.
Αυτό που κάνω εδώ είναι να λέω στο πρόγραμμα περιήγησης ότι οι εικόνες πρέπει να έχουν 0 πλάτος και ύψος, αλλά πρέπει επίσης να έχουν ελάχιστο ύψος ίσο με 100%… αλλά 100% από τι? Όταν χρησιμοποιείτε ποσοστά, η τιμή είναι σε σχέση με κάτι άλλο. Σε αυτή την περίπτωση, η εικόνα μας τοποθετείται μέσα σε α κελί πλέγματος και πρέπει να γνωρίζουμε αυτό το μέγεθος για να ξέρουμε τι είναι 100% είναι σχετική με.
Το πρόγραμμα περιήγησης θα αγνοήσει πρώτα min-height: 100% για να υπολογίσει το μέγεθος των κελιών του πλέγματος, αλλά θα χρησιμοποιήσει το height: 0 στον υπολογισμό του. Αυτό σημαίνει ότι οι εικόνες μας δεν θα συνεισφέρουν στο μέγεθος των κελιών του πλέγματος… επειδή τεχνικά δεν έχουν φυσικό μέγεθος. Αυτό θα έχει ως αποτέλεσμα τρεις ίσες στήλες και σειρές που βασίζονται στο μέγεθος του πλέγματος (το οποίο ορίσαμε στο .galleryπλάτος του και aspect-ratio). Το ύψος κάθε κελιού πλέγματος δεν είναι παρά η μεταβλητή --s ορίσαμε (το ίδιο για το πλάτος).
Τώρα που έχουμε τις διαστάσεις των κελιών του πλέγματος μας, το πρόγραμμα περιήγησης θα το χρησιμοποιήσει με min-height: 100% (και min-width: 100%) που θα αναγκάσει τις εικόνες να γεμίσουν πλήρως το χώρο κάθε κελιού πλέγματος. Το όλο θέμα μπορεί να φαίνεται λίγο μπερδεμένο, αλλά η κύρια ιδέα είναι να βεβαιωθείτε ότι το πλέγμα καθορίζει το μέγεθος των εικόνων και όχι το αντίστροφο. Δεν θέλω η εικόνα να ορίζει το μέγεθος του πλέγματος και θα καταλάβετε γιατί αφού προσθέσετε το εφέ αιώρησης.
Δημιουργία του εφέ αιώρησης
Αυτό που πρέπει να κάνουμε είναι να αυξήσουμε την κλίμακα των εικόνων όταν αιωρούνται. Μπορούμε να το κάνουμε αυτό προσαρμόζοντας μια εικόνα width και height on :hover:
.gallery {
--f: 1.5; /* controls the scale factor */
}
.gallery img:hover{
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}Πρόσθεσα μια νέα προσαρμοσμένη μεταβλητή, --f, στη μίξη ως παράγοντα κλίμακας για τον έλεγχο του μεγέθους κατά την αιώρηση. Παρατηρήστε πώς πολλαπλασιάζω τη μεταβλητή μεγέθους, --s, με αυτό για τον υπολογισμό του νέου μεγέθους εικόνας.
Αλλά είπατε ότι το μέγεθος της εικόνας πρέπει να είναι 0. Τι συμβαίνει; Χάθηκα…
Αυτό που είπα εξακολουθεί να ισχύει, αλλά κάνω μια εξαίρεση για την αιωρούμενη εικόνα. Λέω στο πρόγραμμα περιήγησης ότι μόνο μία εικόνα θα έχει μέγεθος που δεν είναι ίσο με το μηδέν — επομένως θα συμβάλλει στη διάσταση του πλέγματος — ενώ όλες οι άλλες παραμένουν ίσες με 0.
Η αριστερή πλευρά δείχνει το πλέγμα στη φυσική του κατάσταση χωρίς αιωρούμενες εικόνες, κάτι που δείχνει η δεξιά πλευρά. Όλα τα κελιά πλέγματος στην αριστερή πλευρά έχουν ίσο μέγεθος, καθώς όλες οι εικόνες δεν έχουν φυσικές διαστάσεις.
Στη δεξιά πλευρά, τοποθετείται η δεύτερη εικόνα στην πρώτη σειρά, η οποία της δίνει διαστάσεις που επηρεάζουν το μέγεθος του κελιού πλέγματος. Το πρόγραμμα περιήγησης θα κάνει το συγκεκριμένο κελί πλέγματος μεγαλύτερο κατά την αιώρηση, γεγονός που συμβάλλει στο συνολικό μέγεθος. Και δεδομένου ότι το μέγεθος ολόκληρου του πλέγματος έχει ρυθμιστεί (γιατί ορίσαμε ένα σταθερό width σχετικά με την .gallery), τα άλλα κελιά πλέγματος θα ανταποκριθούν λογικά με το να γίνουν μικρότερα για να διατηρήσουν το .galleryτο συνολικό μέγεθος του σε διακριτικότητα.
Αυτό είναι το εφέ ζουμ μας στη δράση! Αυξάνοντας το μέγεθος μιας μόνο εικόνας επηρεάζουμε ολόκληρη τη διαμόρφωση του πλέγματος και είπαμε προηγουμένως ότι το πλέγμα καθορίζει το μέγεθος των εικόνων έτσι ώστε κάθε εικόνα να εκτείνεται μέσα στο κελί πλέγματος της για να γεμίσει όλο τον χώρο.
Σε αυτό, προσθέτουμε μια πινελιά transition Και χρήση object-fit για να αποφευχθεί η παραμόρφωση της εικόνας και η ψευδαίσθηση είναι τέλεια!
Ξέρω ότι η λογική πίσω από το κόλπο δεν είναι εύκολο να κατανοηθεί. Μην ανησυχείτε αν δεν το καταλαβαίνετε πλήρως. Το πιο σημαντικό είναι να κατανοήσετε τη δομή του κώδικα που χρησιμοποιείται και πώς να τον τροποποιήσετε για να λάβετε περισσότερες παραλλαγές. Αυτό θα κάνουμε στη συνέχεια!
Προσθήκη περισσότερων εικόνων
Δημιουργήσαμε ένα πλέγμα 3×3 για να εξηγήσουμε το κύριο κόλπο, αλλά μάλλον έχετε μαντέψει ότι δεν χρειάζεται να σταματήσουμε εκεί. Μπορούμε να κάνουμε μεταβλητές τον αριθμό των στηλών και των γραμμών και να προσθέσουμε όσες εικόνες θέλουμε.
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}Έχουμε δύο νέες μεταβλητές για τον αριθμό των γραμμών και των στηλών. Στη συνέχεια απλά ορίζουμε το πλάτος και το ύψος του πλέγματος μας χρησιμοποιώντας τα. Το ίδιο για grid-template-columns που χρησιμοποιεί το --m μεταβλητός. Και όπως και πριν, δεν χρειάζεται να ορίσουμε ρητά τις σειρές, καθώς η δυνατότητα αυτόματης τοποθέτησης του CSS Grid θα κάνει τη δουλειά για εμάς ανεξάρτητα από το πόσα στοιχεία εικόνας χρησιμοποιούμε.
Γιατί όχι διαφορετικές τιμές για το πλάτος και το ύψος; Μπορούμε να το κάνουμε αυτό:
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--h: 120px; /* control the height */
--w: 150px; /* control the width */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}
.gallery img:hover{
width: calc(var(--w)*var(--f));
height: calc(var(--h)*var(--f));
}Αντικαθιστούμε --s με δύο μεταβλητές, μία για το πλάτος, --wκαι άλλο ένα για το ύψος, --h. Στη συνέχεια προσαρμόζουμε όλα τα άλλα ανάλογα.
Έτσι, ξεκινήσαμε με ένα πλέγμα με σταθερό μέγεθος και αριθμό στοιχείων, αλλά στη συνέχεια φτιάξαμε ένα νέο σύνολο μεταβλητών για να λάβουμε οποιαδήποτε διαμόρφωση θέλουμε. Το μόνο που έχουμε να κάνουμε είναι να προσθέσουμε όσες εικόνες θέλουμε και να προσαρμόσουμε τις μεταβλητές CSS ανάλογα. Οι συνδυασμοί είναι απεριόριστοι!
Μια συλλογή εικόνων πλήρους οθόνης
Τι γίνεται με μια έκδοση πλήρους οθόνης; Ναι, είναι επίσης δυνατό. Το μόνο που χρειάζεται είναι να γνωρίζουμε ποιες τιμές πρέπει να εκχωρήσουμε στις μεταβλητές μας. Αν θέλουμε N σειρές εικόνων και θέλουμε το πλέγμα μας να είναι σε πλήρη οθόνη, πρέπει πρώτα να λύσουμε για ύψος 100vh:
var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vhΊδια λογική για το πλάτος, αλλά με χρήση vw αντί του vh:
var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vwΚάνουμε τα μαθηματικά για να πάρουμε:
--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)Εγινε!
Είναι το ίδιο ακριβώς HTML, αλλά με ορισμένες ενημερωμένες μεταβλητές που αλλάζουν το μέγεθος και τη συμπεριφορά του πλέγματος.
Σημειώστε ότι έχω παραλείψει τον τύπο που ορίσαμε προηγουμένως στο .gallery'μικρό width και height και τα αντικατέστησε 100vw και 100vh, αντίστοιχα. Η φόρμουλα θα μας δώσει το ίδιο αποτέλεσμα, αλλά αφού ξέρουμε ποια αξία θέλουμε, μπορούμε να παραλείψουμε όλη αυτή την πρόσθετη πολυπλοκότητα.
Μπορούμε επίσης να απλοποιήσουμε το --h και --w αφαιρώντας το κενό από την εξίσωση υπέρ αυτού:
--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */Αυτό θα κάνει την αιωρούμενη εικόνα να μεγαλώσει λίγο περισσότερο από το προηγούμενο παράδειγμα, αλλά δεν είναι μεγάλη υπόθεση αφού μπορούμε να ελέγξουμε την κλίμακα με το --f μεταβλητή που χρησιμοποιούμε ως πολλαπλασιαστή.
Και επειδή οι μεταβλητές χρησιμοποιούνται σε ένα μέρος, μπορούμε ακόμα να απλοποιήσουμε τον κώδικα αφαιρώντας τες εντελώς:
Είναι σημαντικό να σημειωθεί ότι αυτή η βελτιστοποίηση ισχύει μόνο για το παράδειγμα πλήρους οθόνης και όχι για τα παραδείγματα που καλύψαμε. Αυτό το παράδειγμα είναι μια συγκεκριμένη περίπτωση όπου μπορούμε να κάνουμε τον κώδικα πιο ελαφρύ αφαιρώντας μέρος της πολύπλοκης εργασίας υπολογισμού που χρειαζόμασταν στα άλλα παραδείγματα.
Στην πραγματικότητα έχουμε όλα όσα χρειαζόμαστε για να δημιουργήσουμε το δημοφιλές μοτίβο των επεκτεινόμενων πάνελ:
Ας σκάψουμε ακόμα πιο βαθιά
Παρατηρήσατε ότι ο συντελεστής κλίμακας μπορεί να είναι μικρότερος από 1? Μπορούμε να ορίσουμε το μέγεθος της εικόνας που τοποθετείται στο ποντίκι να είναι μικρότερο από --h or --w αλλά η εικόνα μεγαλώνει κατά την αιώρηση.
Το αρχικό μέγεθος κελιού πλέγματος είναι ίσο με --w και --h, γιατί λοιπόν οι μικρότερες τιμές κάνουν το κελί του πλέγματος μεγαλύτερος? Δεν πρέπει το κύτταρο να πάρει μικρότερος, ή τουλάχιστον να διατηρήσει το αρχικό του μέγεθος; Και ποιο είναι το τελικό μέγεθος του κελιού πλέγματος;
Πρέπει να εμβαθύνουμε στο πώς ο αλγόριθμος CSS Grid υπολογίζει το μέγεθος των κελιών πλέγματος. Και αυτό περιλαμβάνει την κατανόηση της προεπιλογής του CSS Grid ευθυγράμμιση τεντώματος.
Εδώ είναι ένα παράδειγμα για να καταλάβετε τη λογική.
Στην αριστερή πλευρά της επίδειξης, όρισα μια δίστηλη με auto πλάτος. Λαμβάνουμε το διαισθητικό αποτέλεσμα: δύο ίσες στήλες (και δύο ίσα κελιά πλέγματος). Αλλά το πλέγμα που έστησα στη δεξιά πλευρά της επίδειξης, όπου ενημερώνω τη στοίχιση χρησιμοποιώντας place-content: start, φαίνεται να μην έχει τίποτα.
Το DevTools μας βοηθά να δείξουμε τι πραγματικά συμβαίνει και στις δύο περιπτώσεις:
Στο δεύτερο πλέγμα, έχουμε δύο στήλες, αλλά τα πλάτη τους είναι ίσα με το μηδέν, οπότε λαμβάνουμε δύο κελιά πλέγματος που συμπτύσσονται στην επάνω αριστερή γωνία του κοντέινερ πλέγματος. Αυτό είναι δεν ένα σφάλμα αλλά το λογικό αποτέλεσμα της ευθυγράμμισης του πλέγματος. Όταν μετράμε μια στήλη (ή γραμμή) με auto, σημαίνει ότι το περιεχόμενό του υπαγορεύει το μέγεθός του — αλλά έχουμε ένα κενό div χωρίς περιεχόμενο για να δημιουργηθεί χώρος.
Αλλά από τότε stretch είναι η προεπιλεγμένη στοίχιση και έχουμε αρκετό χώρο μέσα στο πλέγμα μας, το πρόγραμμα περιήγησης θα τεντώσει και τα δύο κελιά πλέγματος εξίσου για να καλύψει όλη αυτή την περιοχή. Έτσι τελειώνει το πλέγμα στα αριστερά με δύο ίσες στήλες.
Από η προδιαγραφή:
Σημειώστε ότι ορισμένες τιμές του
justify-contentκαιalign-contentμπορεί να προκαλέσει απόσταση μεταξύ των κομματιών (space-around,space-between,space-evenly) ή για αλλαγή μεγέθους (stretch).
Σημειώστε το "να αλλάξει μέγεθος" που είναι το κλειδί εδώ. Στο τελευταίο παράδειγμα, χρησιμοποίησα place-content που είναι η συντομογραφία για justify-content και align-content
Και αυτό είναι θαμμένο κάπου μέσα τον αλγόριθμο Grid Sizing διόπτρα:
Αυτό το βήμα επεκτείνει τα κομμάτια που έχουν ένα αυτόματη λειτουργία μέγιστου μεγέθους κομματιού διαιρώντας τυχόν υπόλοιπο θετικό, σαφής ελεύθερος χώρος εξίσου μεταξύ τους. Αν ο ελεύθερος χώρος είναι αόριστος, Αλλά η δοχείο πλέγματος έχει μια οριστική ελάχ. πλάτος/ύψος, χρησιμοποιήστε αυτό το μέγεθος για να υπολογίσετε τον ελεύθερο χώρο για αυτό το βήμα.
Το "Εξίσου" εξηγεί γιατί τελειώνουμε με ίσα κελιά πλέγματος, αλλά ισχύει για τον "ελεύθερο χώρο" που είναι πολύ σημαντικό.
Ας πάρουμε το προηγούμενο παράδειγμα και ας προσθέσουμε περιεχόμενο σε ένα από τα divs:
Προσθέσαμε ένα τετράγωνο 50px εικόνα. Ακολουθεί μια απεικόνιση του τρόπου με τον οποίο κάθε πλέγμα στο παράδειγμά μας ανταποκρίνεται σε αυτήν την εικόνα:
Στην πρώτη περίπτωση, μπορούμε να δούμε ότι το πρώτο κελί (με κόκκινο) είναι μεγαλύτερο από το δεύτερο (με μπλε). Στη δεύτερη περίπτωση, το μέγεθος του πρώτου κελιού αλλάζει για να ταιριάζει στο φυσικό μέγεθος της εικόνας, ενώ το δεύτερο κελί παραμένει χωρίς διαστάσεις. Ο ελεύθερος χώρος διαιρείται εξίσου, αλλά το πρώτο κελί έχει περισσότερο περιεχόμενο μέσα, γεγονός που τον κάνει μεγαλύτερο.
Αυτά είναι τα μαθηματικά για να καταλάβουμε τον ελεύθερο χώρο μας:
(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px Διαιρούμενο με δύο - τον αριθμό των στηλών - παίρνουμε πλάτος 72.5px για κάθε στήλη. Αλλά προσθέτουμε το μέγεθος της εικόνας, 50px, στην πρώτη στήλη που μας αφήνει με μία στήλη στο 122.5px και το δεύτερο ίσο με 72.5px.
Η ίδια λογική ισχύει και για το πλέγμα των εικόνων μας. Όλες οι εικόνες έχουν μέγεθος ίσο με 0 (χωρίς περιεχόμενο) ενώ η αιωρούμενη εικόνα συμβάλλει στο μέγεθος — ακόμα κι αν είναι απλώς 1px — κάνοντας το κελί του πλέγματος μεγαλύτερο από τα άλλα. Για το λόγο αυτό, ο συντελεστής κλίμακας μπορεί να είναι οποιαδήποτε τιμή μεγαλύτερη από 0 ακόμη και δεκαδικά μεταξύ τους 0 και 1.
Για να λάβουμε το τελικό πλάτος των κελιών του πλέγματος, κάνουμε τον ίδιο υπολογισμό για να λάβουμε τα εξής:
(container width) - (sum of all gaps) - (hovered image width) = (free space)Το πλάτος του δοχείου ορίζεται από:
var(--m)*var(--w) + (var(--m) - 1)*var(--g)…και όλα τα κενά είναι ίσα με:
(var(--m) - 1)*var(--g)…και για την αιωρούμενη εικόνα έχουμε:
var(--w)*var(--f)Όλα αυτά μπορούμε να τα υπολογίσουμε με τις μεταβλητές μας:
var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))Ο αριθμός των στηλών ορίζεται από --m , έτσι διαιρούμε αυτόν τον ελεύθερο χώρο ίσα για να πάρουμε:
var(--w)*(var(--m) - var(--f))/var(--m)…που μας δίνει το μέγεθος των εικόνων που δεν αιωρούνται. Για τις αιωρούμενες εικόνες, έχουμε αυτό:
var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))Αν θέλουμε να ελέγξουμε το τελικό μέγεθος της εικόνας που βρίσκεται στο ποντίκι, θεωρούμε τον παραπάνω τύπο για να πάρουμε το ακριβές μέγεθος που θέλουμε. Αν, για παράδειγμα, θέλουμε η εικόνα να είναι διπλάσια:
(var(--m) - var(--f))/var(--m) + var(--f) = 2Έτσι, η τιμή του πολλαπλασιαστή της κλίμακας μας, --f, πρέπει να είναι ίσο με:
var(--m)/(var(--m) - 1)Για τρεις στήλες θα έχουμε 3/2 = 1.5 και αυτός είναι ο παράγοντας κλίμακας που χρησιμοποίησα στην πρώτη επίδειξη αυτού του άρθρου επειδή ήθελα να κάνω την εικόνα διπλάσια στο hover!
Η ίδια λογική ισχύει και για τον υπολογισμό του ύψους και σε περίπτωση που θέλουμε να ελέγξουμε και τα δύο ανεξάρτητα, θα πρέπει να λάβουμε υπόψη δύο παράγοντες κλίμακας για να βεβαιωθούμε ότι έχουμε ένα συγκεκριμένο πλάτος και ύψος στο hover.
.gallery {
/* same as before */
--fw: 1.5; /* controls the scale factor for the width */
--fh: 1.2; /* controls the scale factor for the height */
/* same as before */
}
.gallery img:hover{
width: calc(var(--w)*var(--fw));
height: calc(var(--h)*var(--fh));
}Τώρα, ξέρετε όλα τα μυστικά για να δημιουργήσετε οποιοδήποτε είδος πλέγματος εικόνας με ένα δροσερό εφέ αιώρησης ενώ παράλληλα έχετε τον έλεγχο του μεγέθους που θέλετε χρησιμοποιώντας τα μαθηματικά που μόλις καλύψαμε.
Ολοκληρώνοντας
Σε μου τελευταίο άρθρο, δημιουργήσαμε ένα πλέγμα με σύνθετη εμφάνιση με μερικές γραμμές CSS που χρησιμοποιούν το έμμεσο πλέγμα και τις λειτουργίες αυτόματης τοποθέτησης του CSS Grid. Σε αυτό το άρθρο, βασιστήκαμε σε κάποιο κόλπο για το μέγεθος του πλέγματος CSS για να δημιουργήσουμε ένα φανταχτερό πλέγμα εικόνων που μεγεθύνουν κατά την τοποθέτηση του ποντικιού και αναγκάζουν το πλέγμα να προσαρμοστεί ανάλογα. Όλα αυτά με έναν απλοποιημένο κώδικα που είναι εύκολο να προσαρμοστεί χρησιμοποιώντας μεταβλητές CSS!
Στο επόμενο άρθρο θα παίξουμε με τα σχήματα! Θα συνδυάσουμε το πλέγμα CSS με τη μάσκα και τη διαδρομή κλιπ για να αποκτήσουμε ένα φανταχτερό πλέγμα εικόνων.
