Εντάξει, λοιπόν τελευταία φορά που κάναμε check in, χρησιμοποιούσαμε CSS Grid και τα συνδυάζαμε με CSS clip-path και mask τεχνικές για να δημιουργήσετε πλέγματα με φανταχτερά σχήματα.
Εδώ είναι μόνο ένα από τα φανταστικά πλέγματα που φτιάξαμε μαζί:
Έτοιμοι για τον δεύτερο γύρο; Εξακολουθούμε να εργαζόμαστε με το CSS Grid, clip-path, να mask, αλλά μέχρι το τέλος αυτού του άρθρου, θα καταλήξουμε με διαφορετικούς τρόπους για να τακτοποιήσουμε τις εικόνες στο πλέγμα, συμπεριλαμβανομένων ορισμένων εφέ αιώρησης rad που δημιουργούν μια αυθεντική, διαδραστική εμπειρία προβολής εικόνων.
Και μάντεψε τι? Χρησιμοποιούμε το την ίδια σήμανση που χρησιμοποιήσαμε την προηγούμενη φορά. Ορίστε πάλι αυτό:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Όπως και στο προηγούμενο άρθρο, χρειαζόμαστε μόνο ένα δοχείο με εικόνες μέσα. Τίποτα περισσότερο!
Ένθετο πλέγμα εικόνων
Την τελευταία φορά, τα πλέγματα μας ήταν τυπικά πλέγματα εικόνων. Εκτός από τα προσεγμένα σχήματα με τα οποία τα καλύψαμε, ήταν αρκετά τυπικά συμμετρικά πλέγματα όσον αφορά το πώς τοποθετούσαμε τις εικόνες μέσα.
Ας προσπαθήσουμε να τοποθετήσουμε μια εικόνα στο κέντρο του πλέγματος:
Ξεκινάμε ορίζοντας ένα πλέγμα 2✕2 για τέσσερις εικόνες:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Τίποτα σύνθετο ακόμα. Το επόμενο βήμα είναι να κόψουμε τη γωνία των εικόνων μας για να δημιουργήσουμε χώρο για την ένθετη εικόνα. Έχω ήδη ένα αναλυτικό άρθρο για πώς να κόψετε τις γωνίες χρησιμοποιώντας clip-path και mask. Μπορείτε επίσης να χρησιμοποιήσετε το δικό μου διαδικτυακή γεννήτρια για να λάβετε το CSS για κάλυψη γωνιών.
Αυτό που χρειαζόμαστε εδώ είναι να κόψουμε τις γωνίες σε γωνία ίση με 90deg. Μπορούμε να χρησιμοποιήσουμε το ίδιο τεχνική κωνικής κλίσης από αυτό το άρθρο για να το κάνετε αυτό:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }Θα μπορούσαμε να χρησιμοποιήσουμε το clip-path μέθοδος κοπής γωνιών από το ίδιο αντικείμενο, αλλά η κάλυψη με διαβαθμίσεις είναι πιο κατάλληλη εδώ επειδή έχουμε την ίδια διαμόρφωση για όλες τις εικόνες — το μόνο που χρειαζόμαστε είναι μια περιστροφή (που ορίζεται με τη μεταβλητή --_a) λάβετε το εφέ, επομένως καλύπτουμε από μέσα αντί από τις εξωτερικές άκρες.
Τώρα μπορούμε να τοποθετήσουμε την ένθετη εικόνα μέσα στον καλυμμένο χώρο. Αρχικά, ας βεβαιωθούμε ότι έχουμε ένα πέμπτο στοιχείο εικόνας στο HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Θα βασιστούμε στην καλή απόλυτη τοποθέτηση για να το τοποθετήσουμε εκεί:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Η inset Η ιδιότητα μας επιτρέπει να τοποθετήσουμε την εικόνα στο κέντρο χρησιμοποιώντας μία μόνο δήλωση. Γνωρίζουμε το μέγεθος της εικόνας (που ορίζεται με τη μεταβλητή --s), και γνωρίζουμε ότι το μέγεθος του δοχείου ισούται με 100%. Κάνουμε κάποια μαθηματικά και η απόσταση από κάθε άκρη πρέπει να είναι ίση με (100% - var(--s))/2.
Ίσως αναρωτιέστε γιατί χρησιμοποιούμε clip-path καθόλου εδώ. Το χρησιμοποιούμε με την ένθετη εικόνα για να έχουμε ένα σταθερό κενό. Αν το αφαιρούσαμε, θα παρατηρούσατε ότι δεν έχουμε το ίδιο κενό μεταξύ όλων των εικόνων. Με αυτόν τον τρόπο, κόβουμε λίγο από την πέμπτη εικόνα για να έχουμε τη σωστή απόσταση γύρω από αυτήν.
Ο πλήρης κωδικός ξανά:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Τώρα, πολλοί από εσάς μπορεί επίσης να αναρωτιέστε: γιατί τόσο πολύπλοκα πράγματα όταν μπορούμε να τοποθετήσουμε την τελευταία εικόνα στην κορυφή και να προσθέσουμε ένα περίγραμμα σε αυτήν; Αυτό θα έκρυβε τις εικόνες κάτω από την ένθετη εικόνα χωρίς μάσκα, σωστά;
Αυτό είναι αλήθεια και θα λάβουμε τα εξής:
Οχι maskόχι clip-path. Ναι, ο κώδικας είναι εύκολο να κατανοηθεί, αλλά υπάρχει ένα μικρό μειονέκτημα: το χρώμα του περιγράμματος πρέπει να είναι το ίδιο με το κύριο φόντο για να γίνει η ψευδαίσθηση τέλεια. Αυτό το μικρό μειονέκτημα είναι αρκετό για να κάνω τον κώδικα πιο περίπλοκο με αντάλλαγμα πραγματική διαφάνεια ανεξάρτητη από το φόντο. Δεν λέω ότι μια προσέγγιση στα σύνορα είναι κακή ή λάθος. Θα το συνιστούσα στις περισσότερες περιπτώσεις όπου το υπόβαθρο είναι γνωστό. Αλλά είμαστε εδώ για να εξερευνήσουμε νέα πράγματα και, το πιο σημαντικό, να δημιουργήσουμε στοιχεία που δεν εξαρτώνται από το περιβάλλον τους.
Ας δοκιμάσουμε ένα άλλο σχήμα αυτή τη φορά:
Αυτή τη φορά, κάναμε την ένθετη εικόνα κύκλο αντί για τετράγωνο. Αυτό είναι ένα εύκολο έργο με border-radius Πρέπει όμως να χρησιμοποιήσουμε α κυκλική αποκοπή για τις υπόλοιπες εικόνες. Αυτή τη φορά, όμως, θα βασιστούμε σε ένα radial-gradient() αντί για conic-gradient() για να έχετε αυτή την ωραία στρογγυλεμένη εμφάνιση.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Όλες οι εικόνες χρησιμοποιούν την ίδια διαμόρφωση με το προηγούμενο παράδειγμα, αλλά ενημερώνουμε το κεντρικό σημείο κάθε φορά.
Το παραπάνω σχήμα απεικονίζει το κεντρικό σημείο για κάθε κύκλο. Ωστόσο, στον πραγματικό κώδικα, θα παρατηρήσετε ότι υπολογίζω επίσης το κενό για να διασφαλίσω ότι όλα τα σημεία βρίσκονται στην ίδια θέση (το κέντρο του πλέγματος) για να πάρουμε έναν συνεχή κύκλο αν τα συνδυάσουμε.
Τώρα που έχουμε τη διάταξή μας, ας μιλήσουμε για το φαινόμενο hover. Σε περίπτωση που δεν το προσέξατε, ένα δροσερό εφέ αιώρησης αυξάνει το μέγεθος της ένθετης εικόνας και προσαρμόζει όλα τα άλλα ανάλογα. Η αύξηση του μεγέθους είναι μια σχετικά εύκολη εργασία, αλλά η ενημέρωση της διαβάθμισης είναι πιο περίπλοκη, καθώς, από προεπιλογή, οι διαβαθμίσεις δεν μπορούν να κινηθούν. Για να το ξεπεράσω αυτό, θα χρησιμοποιήσω α font-size hack για να είναι σε θέση να κινήσει την ακτινωτή κλίση.
Εάν ελέγξετε τον κωδικό της διαβάθμισης, μπορείτε να δείτε ότι προσθέτω 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Είναι γνωστό ότι em οι μονάδες είναι σχετικές με αυτές του γονικού στοιχείου font-size, οπότε αλλάζοντας το font-size του .gallery θα αλλάξει επίσης το υπολογισμένο em αξία — αυτό είναι το κόλπο που χρησιμοποιούμε. Εμείς εμψυχώνουμε το font-size από μια τιμή του 0 σε μια δεδομένη τιμή και, ως αποτέλεσμα, η διαβάθμιση κινείται, κάνοντας το αποκομμένο τμήμα μεγαλύτερο, ακολουθώντας το μέγεθος της ένθετης εικόνας που μεγαλώνει.
Εδώ είναι ο κώδικας που επισημαίνει τα μέρη που εμπλέκονται στο εφέ αιώρησης:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}Η font-size Το κόλπο είναι χρήσιμο εάν θέλουμε να κάνουμε κίνηση διαβαθμίσεων ή άλλων ιδιοτήτων που δεν μπορούν να κινηθούν. Οι προσαρμοσμένες ιδιότητες που ορίζονται με το @property μπορούν να λύσουν ένα τέτοιο πρόβλημα, αλλά υποστήριξη για αυτό εξακολουθεί να λείπει τη στιγμή της συγγραφής.
Ανακάλυψα το font-size τέχνασμα από @SelenIT2 ενώ προσπαθεί να λύσει μια πρόκληση στο Twitter.
Άλλο σχήμα; Πάμε!
Αυτή τη φορά κόψαμε την ένθετη εικόνα σε σχήμα ρόμβου. Θα σας αφήσω να αναλύσετε τον κώδικα ως άσκηση για να καταλάβετε πώς φτάσαμε εδώ. Θα παρατηρήσετε ότι η δομή είναι η ίδια όπως στα παραδείγματά μας. Οι μόνες διαφορές είναι πώς χρησιμοποιούμε την κλίση για να δημιουργήσουμε το σχήμα. Σκάψτε και μάθετε!
Πλέγμα κυκλικής εικόνας
Μπορούμε να συνδυάσουμε όσα μάθαμε εδώ και σε προηγούμενα άρθρα για να δημιουργήσουμε ένα ακόμα πιο συναρπαστικό πλέγμα εικόνων. Αυτή τη φορά, ας κάνουμε όλες τις εικόνες στο πλέγμα μας κυκλικές και, όταν τοποθετούμε τον δείκτη του ποντικιού, επεκτείνουμε μια εικόνα για να αποκαλύψουμε ολόκληρο το πράγμα καθώς καλύπτει τις υπόλοιπες φωτογραφίες.
Η δομή HTML και CSS του πλέγματος δεν είναι κάτι καινούργιο από πριν, οπότε ας παραλείψουμε αυτό το μέρος και ας επικεντρωθούμε στο κυκλικό σχήμα και το εφέ αιώρησης που θέλουμε.
Θα χρησιμοποιήσουμε clip-path και της circle() λειτουργία σε — το μαντέψατε! — κόψτε έναν κύκλο από τις εικόνες.
Αυτό το σχήμα απεικονίζει το clip-path χρησιμοποιήθηκε για την πρώτη εικόνα. Η αριστερή πλευρά δείχνει την αρχική κατάσταση της εικόνας, ενώ η δεξιά δείχνει την κατάσταση αιώρησης. Μπορείς να χρησιμοποιήσεις αυτό το ηλεκτρονικό εργαλείο για να παίξετε και να οραματιστείτε το clip-path αξιών.
Για τις υπόλοιπες εικόνες, μπορούμε να ενημερώσουμε το κέντρο του κύκλου (70% 70%) για να λάβετε τον ακόλουθο κωδικό:
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}Σημειώστε πώς ορίζουμε το clip-path αξίες ως εναλλακτική στο εσωτερικό var(). Αυτός ο τρόπος μας επιτρέπει να ενημερώνουμε πιο εύκολα την τιμή κατά την τοποθέτηση του δείκτη, ορίζοντας την τιμή του --_c μεταβλητός. Οταν χρησιμοποιείτε circle(), η προεπιλεγμένη θέση του κεντρικού σημείου είναι 50% 50%, οπότε μπορούμε να το παραλείψουμε για πιο συνοπτικό κώδικα. Γι' αυτό βλέπετε ότι μόνο στήνουμε 50% αντί του 50% at 50% 50%.
Στη συνέχεια, αυξάνουμε το μέγεθος της εικόνας μας κατά την τοποθέτηση του δείκτη στο συνολικό μέγεθος του πλέγματος, ώστε να μπορούμε να καλύψουμε τις άλλες εικόνες. Εξασφαλίζουμε επίσης την z-index έχει υψηλότερη τιμή στην αιωρούμενη εικόνα, επομένως είναι η κορυφαία στην εικόνα μας στοίβαγμα του πλαισίου.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}Τι συμβαίνει με το
place-selfιδιοκτησία? Γιατί το χρειαζόμαστε και γιατί κάθε εικόνα έχει μια συγκεκριμένη αξία;
Θυμάστε το θέμα που είχαμε στο προηγούμενο άρθρο όταν δημιουργώντας το πλέγμα των κομματιών του παζλ? Αυξήσαμε το μέγεθος των εικόνων για να δημιουργήσουμε υπερχείλιση, αλλά η υπερχείλιση ορισμένων εικόνων ήταν εσφαλμένη. Τα διορθώσαμε χρησιμοποιώντας το place-self ιδιοκτησία.
Το ίδιο θέμα εδώ. Αυξάνουμε το μέγεθος των εικόνων, ώστε η καθεμία να ξεχειλίζει τα κελιά πλέγματος της. Αλλά αν δεν κάνουμε τίποτα, όλα θα ξεχειλίσουν στη δεξιά και στην κάτω πλευρά του πλέγματος. Αυτό που χρειαζόμαστε είναι:
- η πρώτη εικόνα που ξεχειλίζει την κάτω δεξιά άκρη (η προεπιλεγμένη συμπεριφορά),
- η δεύτερη εικόνα που ξεχειλίζει το κάτω αριστερό άκρο,
- την τρίτη εικόνα που ξεχειλίζει την επάνω δεξιά άκρη και
- την τέταρτη εικόνα που ξεχειλίζει την επάνω αριστερή άκρη.
Για να το καταλάβουμε, πρέπει να τοποθετήσουμε σωστά κάθε εικόνα χρησιμοποιώντας το place-self ιδιοκτησία.
Σε περίπτωση που δεν είστε εξοικειωμένοι με place-self, είναι η συντομογραφία του justify-self και align-self για να τοποθετήσετε το στοιχείο οριζόντια και κάθετα. Όταν παίρνει μία τιμή, και οι δύο ευθυγραμμίσεις χρησιμοποιούν την ίδια τιμή.
Επέκταση πλαισίων εικόνων
Σε προηγούμενο άρθρο, δημιούργησα ένα δροσερό εφέ ζουμ που εφαρμόζεται σε ένα πλέγμα εικόνων όπου μπορούμε να ελέγξουμε τα πάντα: αριθμό σειρών, αριθμό στηλών, μεγέθη, συντελεστή κλίμακας κ.λπ.
Μια ιδιαίτερη περίπτωση ήταν τα κλασικά επεκτεινόμενα πάνελ, όπου έχουμε μόνο μια σειρά και ένα δοχείο πλήρους πλάτους.
Θα πάρουμε αυτό το παράδειγμα και θα το συνδυάσουμε με σχήματα!
Πριν συνεχίσουμε, προτείνω ανεπιφύλακτα να διαβάσετε το δικό μου άλλο άρθρο για να καταλάβουμε πώς λειτουργούν τα κόλπα που πρόκειται να καλύψουμε. Ελέγξτε το και θα συνεχίσουμε εδώ να επικεντρωνόμαστε στη δημιουργία των σχημάτων του πίνακα.
Αρχικά, ας ξεκινήσουμε απλοποιώντας τον κώδικα και αφαιρώντας ορισμένες μεταβλητές
Χρειαζόμαστε μόνο μία σειρά και ο αριθμός των στηλών πρέπει να προσαρμόζεται με βάση τον αριθμό των εικόνων. Αυτό σημαίνει ότι δεν χρειαζόμαστε πλέον μεταβλητές για τον αριθμό των σειρών (--n) και στήλες (--m ) αλλά πρέπει να χρησιμοποιήσουμε grid-auto-flow: column, επιτρέποντας στο πλέγμα να δημιουργεί αυτόματα στήλες καθώς προσθέτουμε νέες εικόνες. Θα εξετάσουμε ένα σταθερό ύψος για το δοχείο μας. από προεπιλογή, θα είναι πλήρους πλάτους.
Ας κόψουμε τις εικόνες σε λοξό σχήμα:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Για άλλη μια φορά, κάθε εικόνα περιέχεται στο κελί του πλέγματος της, επομένως υπάρχει περισσότερος χώρος μεταξύ των εικόνων από ό,τι θα θέλαμε:
Πρέπει να αυξήσουμε το πλάτος των εικόνων για να δημιουργήσουμε μια επικάλυψη. Αντικαθιστούμε min-width: 100% με min-width: calc(100% + var(--s)), Όπου --s είναι μια νέα μεταβλητή που ελέγχει το σχήμα.
Τώρα πρέπει να διορθώσουμε την πρώτη και την τελευταία εικόνα, έτσι ώστε να βγαίνουν από τη σελίδα χωρίς κενά. Με άλλα λόγια, μπορούμε να αφαιρέσουμε την κλίση από την αριστερή πλευρά της πρώτης εικόνας και την κλίση από τη δεξιά πλευρά της τελευταίας εικόνας. Χρειαζόμαστε ένα νέο clip-path ειδικά για αυτές τις δύο εικόνες.
Πρέπει επίσης να διορθώσουμε την υπερχείλιση. Από προεπιλογή, όλες οι εικόνες θα ξεχειλίσουν και στις δύο πλευρές, αλλά για την πρώτη, χρειαζόμαστε υπερχείλιση στη δεξιά πλευρά ενώ χρειαζόμαστε μια αριστερή υπερχείλιση για την τελευταία εικόνα.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}Το τελικό αποτέλεσμα είναι ένα ωραίο επεκτεινόμενο πάνελ λοξών εικόνων!
Μπορούμε να προσθέσουμε όσες εικόνες θέλετε και το πλέγμα θα προσαρμοστεί αυτόματα. Επιπλέον, χρειάζεται να ελέγξουμε μόνο μία τιμή για να ελέγξουμε το σχήμα!
Θα μπορούσαμε να είχαμε κάνει την ίδια διάταξη με το flexbox αφού έχουμε να κάνουμε με μία μόνο σειρά στοιχείων. Εδώ είναι την εφαρμογή μου.
Σίγουρα, οι λοξές εικόνες είναι καλές, αλλά τι γίνεται με ένα μοτίβο ζιγκ-ζαγκ; Αυτό το έχω ήδη πειράξει το τέλος του τελευταίου άρθρου.
Το μόνο που κάνω εδώ είναι η αντικατάσταση clip-path με mask… και μάντεψε τι? Έχω ήδη ένα αναλυτικό άρθρο για δημιουργώντας αυτό το ζιγκ-ζαγκ σχήμα — για να μην αναφέρουμε ένα διαδικτυακό γεννήτρια για να λάβετε τον κωδικό. Βλέπετε πώς συνδυάζονται όλα μαζί;
Το πιο δύσκολο κομμάτι εδώ είναι να βεβαιωθούμε ότι τα ζιγκ-ζαγκ είναι τέλεια ευθυγραμμισμένα και για αυτό, πρέπει να προσθέσουμε μια μετατόπιση για κάθε :nth-child(odd) στοιχείο εικόνας.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}Σημειώστε τη χρήση του --_p μεταβλητή, η οποία θα επιστρέψει σε 0% αλλά θα είναι ίσο με --_s για τις περίεργες εικόνες.
Εδώ είναι ένα demo που απεικονίζει το ζήτημα. Τοποθετήστε το δείκτη του ποντικιού για να δείτε πώς η μετατόπιση — ορίζεται από --_p — διορθώνει την ευθυγράμμιση.
Επίσης, παρατηρήστε πώς χρησιμοποιούμε μια διαφορετική μάσκα για την πρώτη και την τελευταία εικόνα όπως κάναμε στο προηγούμενο παράδειγμα. Χρειαζόμαστε μόνο ένα ζιγκ-ζαγκ στη δεξιά πλευρά της πρώτης εικόνας και στην αριστερή πλευρά της τελευταίας εικόνας.
Και γιατί όχι στρογγυλεμένες πλευρές; Ας το κάνουμε!
Ξέρω ότι ο κώδικας μπορεί να φαίνεται τρομακτικός και δύσκολος στην κατανόηση, αλλά το μόνο που συμβαίνει είναι ένας συνδυασμός διαφορετικών τεχνασμάτων που έχουμε καλύψει σε αυτό και σε άλλα άρθρα που έχω ήδη μοιραστεί. Σε αυτήν την περίπτωση, χρησιμοποιώ την ίδια δομή κώδικα με το ζιγκ-ζαγκ και τα λοξά σχήματα. Συγκρίνετε το με αυτά τα παραδείγματα και δεν θα βρείτε διαφορά! Αυτά είναι τα ίδια κόλπα Το προηγούμενο άρθρο μου σχετικά με το εφέ ζουμ. Τότε, χρησιμοποιώ το δικό μου άλλη γραφή και τη διαδικτυακή μου γεννήτρια για να λάβετε τον κωδικό για τη μάσκα που δημιουργεί αυτά τα στρογγυλεμένα σχήματα.
Αν θυμάστε τι κάναμε για το ζιγκ-ζαγκ, είχαμε χρησιμοποιήσει την ίδια μάσκα για όλες τις εικόνες, αλλά στη συνέχεια έπρεπε να προσθέσουμε μια μετατόπιση στις περίεργες εικόνες για να δημιουργήσουμε μια τέλεια επικάλυψη. Σε αυτήν την περίπτωση, χρειαζόμαστε μια διαφορετική μάσκα για τις μονές εικόνες.
Η πρώτη μάσκα:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
Το δεύτερο:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
Η μόνη προσπάθεια που έκανα εδώ είναι να ενημερώσω τη δεύτερη μάσκα για να συμπεριλάβει τη μεταβλητή gap (--g) για να δημιουργήσετε αυτό το διάστημα μεταξύ των εικόνων.
Η τελευταία πινελιά είναι να διορθώσετε την πρώτη και την τελευταία εικόνα. Όπως όλα τα προηγούμενα παραδείγματα, η πρώτη εικόνα χρειάζεται μια ευθεία αριστερή άκρη ενώ η τελευταία χρειάζεται μια ευθεία δεξιά άκρη.
Για την πρώτη εικόνα, γνωρίζουμε πάντα τη μάσκα που πρέπει να έχει, η οποία είναι η εξής:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Για την τελευταία εικόνα, εξαρτάται από τον αριθμό των στοιχείων, επομένως έχει σημασία αν είναι αυτό το στοιχείο :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}Αυτό είναι όλο! Τρεις διαφορετικές διατάξεις αλλά τα ίδια κόλπα CSS κάθε φορά:
- τη δομή του κώδικα για τη δημιουργία του εφέ ζουμ
- μια μάσκα ή μια διαδρομή κλιπ για τη δημιουργία των σχημάτων
- μια ξεχωριστή διαμόρφωση για τα περίεργα στοιχεία σε ορισμένες περιπτώσεις για να βεβαιωθούμε ότι έχουμε τέλεια επικάλυψη
- μια συγκεκριμένη διαμόρφωση για την πρώτη και την τελευταία εικόνα ώστε να διατηρείται το σχήμα μόνο στη μία πλευρά.
Και εδώ είναι ένα μεγάλο demo με όλους μαζί. Το μόνο που χρειάζεται είναι να προσθέσετε μια τάξη για να ενεργοποιήσετε τη διάταξη που θέλετε να δείτε.
Και εδώ είναι αυτό με την εφαρμογή Flexbox
Ολοκληρώνοντας
Ουφ, τελειώσαμε! Ξέρω ότι υπάρχουν πολλά κόλπα και παραδείγματα CSS μεταξύ αυτού του άρθρου και του τελευταίου, για να μην αναφέρουμε όλα τα άλλα κόλπα που έχω αναφέρει εδώ από άλλα άρθρα που έχω γράψει. Μου πήρε χρόνο για να συνδυάσω τα πάντα και δεν χρειάζεται να καταλάβετε τα πάντα με τη μία. Μια ανάγνωση θα σας δώσει μια καλή επισκόπηση όλων των διατάξεων, αλλά ίσως χρειαστεί να διαβάσετε το άρθρο περισσότερες από μία φορές και να εστιάσετε σε κάθε παράδειγμα για να κατανοήσετε όλα τα κόλπα.
Παρατηρήσατε ότι δεν αγγίξαμε καθόλου το HTML εκτός ίσως από τον αριθμό των εικόνων στη σήμανση; Όλες οι διατάξεις που φτιάξαμε μοιράζονται τον ίδιο κώδικα HTML, που δεν είναι παρά μια λίστα εικόνων.
Πριν τελειώσω, θα σας αφήσω με ένα τελευταίο παράδειγμα. Είναι ένα «έναντι» μεταξύ δύο χαρακτήρων anime με ένα δροσερό εφέ αιώρησης.
Τι γίνεται με εσένα; Μπορείτε να δημιουργήσετε κάτι με βάση αυτά που έχετε μάθει; Δεν χρειάζεται να είναι περίπλοκο — φανταστείτε κάτι ωραίο ή αστείο όπως έκανα με αυτό το ταιριάζ anime. Μπορεί να είναι μια καλή άσκηση για εσάς και μπορεί να τελειώσουμε με μια εξαιρετική συλλογή στην ενότητα σχολίων.
