Σε προηγούμενο άρθρο, εξέτασα την ικανότητα του CSS Grid να δημιουργήστε σύνθετες διατάξεις χρησιμοποιώντας τις δυνάμεις αυτόματης τοποθέτησης. Πήρα αυτό ένα βήμα παραπέρα σε ένα άλλο άρθρο που πρόσθεσε ένα εφέ αιώρησης μεγέθυνσης σε εικόνες σε διάταξη πλέγματος. Αυτή τη φορά, θέλω να βουτήξω σε έναν άλλο τύπο πλέγματος, που λειτουργεί με σχήματα.
Τι θα συμβεί αν οι εικόνες δεν είναι απόλυτα τετράγωνες αλλά έχουν σχήμα εξαγώνων ή ρόμβων; Spoiler alert: μπορούμε να το κάνουμε. Στην πραγματικότητα, θα συνδυάσουμε τεχνικές CSS Grid που έχουμε εξετάσει και θα ρίξουμε σε μερικά CSS clip-path και mask μαγεία για να δημιουργήσετε φανταχτερά πλέγματα εικόνων για σχεδόν οποιοδήποτε σχήμα μπορείτε να φανταστείτε!
Ας ξεκινήσουμε με κάποια σήμανση
Οι περισσότερες από τις διατάξεις που θα εξετάσουμε μπορεί να φαίνονται εύκολο να επιτευχθούν με την πρώτη ματιά, αλλά το δύσκολο κομμάτι είναι να τις επιτύχουμε με την ίδια σήμανση HTML. Μπορούμε να χρησιμοποιήσουμε πολλά περιτυλίγματα, divs, και τι όχι, αλλά ο στόχος αυτής της ανάρτησης είναι να χρησιμοποιήσουμε την ίδια και μικρότερη ποσότητα κώδικα HTML και να λάβουμε όλα τα διαφορετικά πλέγματα που θέλουμε. Τελικά, τι είναι το CSS παρά ένας τρόπος διαχωρισμού του στυλ και της σήμανσης; Το στυλ μας δεν πρέπει να εξαρτάται από τη σήμανση και το αντίστροφο.
Αυτό είπε, ας ξεκινήσουμε με αυτό:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Ένα δοχείο με εικόνες είναι το μόνο που χρειαζόμαστε εδώ. Τίποτα περισσότερο!
CSS Grid of Hexagons
Αυτό μερικές φορές αναφέρεται επίσης ως πλέγμα "κηρήθρας".
Υπάρχουν ήδη πολλές άλλες αναρτήσεις ιστολογίου εκεί έξω που δείχνουν πώς να το κάνετε αυτό. Διάολε, εγώ έγραψε ένα εδώ στο CSS-Tricks! Αυτό το άρθρο είναι ακόμα καλό και πηγαίνει πολύ βαθιά στη δημιουργία μιας αποκριτικής διάταξης. Αλλά για τη συγκεκριμένη περίπτωση, θα βασιστούμε σε μια πολύ απλούστερη προσέγγιση CSS.
Αρχικά, ας χρησιμοποιήσουμε clip-path στις εικόνες για να δημιουργήσουμε το εξάγωνο σχήμα και τις τοποθετούμε όλες στην ίδια περιοχή πλέγματος ώστε να επικαλύπτονται.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Τίποτα φανταχτερό ακόμα. Όλες οι εικόνες είναι εξάγωνες και η μία πάνω από την άλλη. Φαίνεται λοιπόν ότι το μόνο που έχουμε είναι ένα μοναδικό στοιχείο εικόνας σε σχήμα εξαγώνου, αλλά υπάρχουν πραγματικά επτά.
Το επόμενο βήμα είναι να εφαρμόσετε μια μετάφραση στις εικόνες για να τις τοποθετήσετε σωστά στο πλέγμα.
Παρατηρήστε ότι θέλουμε ακόμα μία από τις εικόνες να παραμείνει στο κέντρο. Τα υπόλοιπα τοποθετούνται γύρω του χρησιμοποιώντας CSS translate και μια καλή γεωμετρία. Ακολουθούν οι εικονικοί τύποι που βρήκα για κάθε εικόνα στο πλέγμα:
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))Μερικοί υπολογισμοί και βελτιστοποίηση αργότερα (ας παραλείψουμε αυτό το βαρετό μέρος, σωστά;) παίρνουμε το ακόλουθο CSS:
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Ίσως αυτό να είναι πιο εύκολο όταν τα καταφέρουμε πραγματικές συναρτήσεις τριγωνομετρίας στο CSS!
Κάθε εικόνα μεταφράζεται από το --_x και --_y μεταβλητές που βασίζονται σε αυτούς τους τύπους. Μόνο η δεύτερη εικόνα (nth-child(2)) δεν ορίζεται σε κανέναν επιλογέα επειδή είναι αυτός που βρίσκεται στο κέντρο. Μπορεί να είναι οποιαδήποτε εικόνα εάν αποφασίσετε να χρησιμοποιήσετε διαφορετική σειρά. Ακολουθεί η σειρά που χρησιμοποιώ:
Με λίγες μόνο γραμμές κώδικα, έχουμε ένα ωραίο πλέγμα εικόνων. Σε αυτό, πρόσθεσα ένα μικρό εφέ αιώρησης στις εικόνες για να κάνω τα πράγματα πιο όμορφα.
Μάντεψε? Μπορούμε να πάρουμε ένα άλλο εξάγωνο πλέγμα ενημερώνοντας απλώς μερικές τιμές.
Εάν ελέγξετε τον κωδικό και τον συγκρίνετε με τον προηγούμενο, θα παρατηρήσετε ότι απλώς άλλαξα τις τιμές μέσα clip-path και άλλαξα μεταξύ --x και --yΤο Αυτό είναι όλο!
CSS Grid of Rhombuses
Ο Ρόμβος είναι μια τόσο φανταχτερή λέξη για ένα τετράγωνο που περιστρέφεται κατά 45 μοίρες.
Ίδιο HTML, θυμάστε; Αρχικά, ορίζουμε ένα πλέγμα εικόνων 2×2 στο CSS:
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}Το πρώτο πράγμα που μπορεί να τραβήξει την προσοχή σας είναι το grid ιδιοκτησία. Χρησιμοποιείται αρκετά ασυνήθιστα, αλλά είναι εξαιρετικά χρήσιμο καθώς είναι μια συντομογραφία που σας επιτρέπει να ορίσετε ένα πλήρες πλέγμα σε μια δήλωση. Δεν είναι η πιο διαισθητική —και για να μην αναφέρουμε ευανάγνωστη— ιδιοκτησία, αλλά είμαστε εδώ μαθαίνουν και ανακαλύπτουν νέα πράγματα, οπότε ας το χρησιμοποιήσουμε αντί να γράψουμε όλες τις μεμονωμένες ιδιότητες πλέγματος.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);Αυτό ορίζει δύο στήλες ίσες με το --s μεταβλητή και ορίζει το ύψος όλων των σειρών σε --s επισης. Εφόσον έχουμε τέσσερις εικόνες, θα λάβουμε αυτόματα ένα πλέγμα 2×2.
Εδώ είναι ένας άλλος τρόπος που θα μπορούσαμε να το είχαμε γράψει:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…το οποίο μπορεί να μειωθεί με το grid στενογραφία:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Αφού ρυθμίσουμε το πλέγμα, το περιστρέφουμε και τις εικόνες με CSS transforms και παίρνουμε αυτό:
Σημειώστε πώς τα περιστρέφω και τα δύο 45deg, αλλά προς την αντίθετη κατεύθυνση.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Η περιστροφή των εικόνων προς την αρνητική κατεύθυνση αποτρέπει την περιστροφή τους με το πλέγμα, ώστε να παραμείνουν ίσιες. Τώρα, εφαρμόζουμε α clip-path για να κόψετε ένα σχήμα ρόμβου από αυτά.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Έχουμε σχεδόν τελειώσει! Πρέπει να διορθώσουμε το μέγεθος της εικόνας για να ταιριάζουν μεταξύ τους. Διαφορετικά, απέχουν πολύ μεταξύ τους σε σημείο που να μην μοιάζει με πλέγμα εικόνων.
Η εικόνα βρίσκεται εντός του ορίου του πράσινου κύκλου, που είναι ο εγγεγραμμένος κύκλος της περιοχής του πλέγματος όπου τοποθετείται η εικόνα. Αυτό που θέλουμε είναι να κάνουμε την εικόνα μεγαλύτερη για να χωράει μέσα στον κόκκινο κύκλο, που είναι ο περιγεγραμμένος κύκλος της περιοχής του πλέγματος.
Μην ανησυχείτε, δεν θα εισαγάγω άλλη βαρετή γεωμετρία. Το μόνο που χρειάζεται να γνωρίζετε είναι ότι η σχέση μεταξύ της ακτίνας κάθε κύκλου είναι η τετραγωνική ρίζα του 2 (sqrt(2)). Αυτή είναι η τιμή που χρειαζόμαστε για να αυξήσουμε το μέγεθος των εικόνων μας για να γεμίσουμε την περιοχή. Θα το χρησιμοποιησουμε 100%*sqrt(2) = 141% και να γίνει!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Όπως το εξάγωνο πλέγμα, μπορούμε να κάνουμε τα πράγματα πιο όμορφα με αυτό το ωραίο εφέ αιώρησης ζουμ:
Πλέγμα CSS τριγωνικών σχημάτων
Πιθανώς να γνωρίζετε ήδη ότι το μεγάλο κόλπο είναι να το ανακαλύψετε clip-path για να πάρουμε τα σχήματα που θέλουμε. Για αυτό το πλέγμα, κάθε στοιχείο έχει το δικό του clip-path τιμή ενώ τα δύο τελευταία πλέγματα λειτουργούσαν με σταθερό σχήμα. Έτσι, αυτή τη φορά, είναι σαν να εργαζόμαστε με μερικά διαφορετικά τριγωνικά σχήματα που ενώνονται για να σχηματίσουν ένα ορθογώνιο πλέγμα εικόνων.
Τα τοποθετούμε μέσα σε ένα πλέγμα 3×2 με το ακόλουθο CSS:
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Να τι παίρνουμε:
Η τελευταία πινελιά είναι να κάνετε το πλάτος της μεσαίας στήλης ίσο 0 για να απαλλαγούμε από τα κενά μεταξύ των εικόνων. Το ίδιο πρόβλημα απόστασης είχαμε με το πλέγμα ρόμβου, αλλά με διαφορετική προσέγγιση για τα σχήματα που χρησιμοποιούμε:
grid-template-columns: auto 0 auto;Έπρεπε να τα βάλω με το clip-path αξίες για να βεβαιωθείτε ότι όλα θα φαίνονται να ταιριάζουν μεταξύ τους όμορφα σαν ένα παζλ. Οι αρχικές εικόνες επικαλύπτονται όταν η μεσαία στήλη έχει μηδενικό πλάτος, αλλά μετά την κοπή των εικόνων, η ψευδαίσθηση είναι τέλεια:
Πλέγμα πίτσας CSS
Μάντεψε? Μπορούμε να πάρουμε ένα άλλο δροσερό πλέγμα προσθέτοντας απλά border-radius και overflow στο πλέγμα ή στα τριγωνικά μας σχήματα. 🎉
CSS Grid of Puzzle Pieces
Αυτή τη φορά θα παίξουμε με το CSS mask ιδιότητα να κάνει τις εικόνες να μοιάζουν με κομμάτια παζλ.
Εάν δεν έχετε χρησιμοποιήσει mask με Κλίσεις CSS, Συστήνω ανεπιφύλακτα αυτό το άλλο άρθρο Έγραψα για το θέμα γιατί θα βοηθήσει με αυτό που ακολουθεί. Γιατί κλίσεις; Επειδή αυτό είναι που χρησιμοποιούμε για να αποκτήσουμε τις στρογγυλές εγκοπές στα σχήματα των κομματιών του παζλ.
Η ρύθμιση του πλέγματος θα πρέπει να είναι πολύ δύσκολη μέχρι τώρα, οπότε ας επικεντρωθούμε στο mask μέρος.
Όπως φαίνεται στην παραπάνω επίδειξη, χρειαζόμαστε δύο διαβαθμίσεις για να δημιουργήσουμε το τελικό σχήμα. Η μία κλίση δημιουργεί έναν κύκλο (το πράσινο μέρος) και η άλλη δημιουργεί τη σωστή καμπύλη ενώ γεμίζει το επάνω μέρος.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;Δύο μεταβλητές ελέγχουν το σχήμα. ο --g η μεταβλητή δεν είναι παρά το χάσμα πλέγματος. Πρέπει να λάβουμε υπόψη το κενό για να τοποθετήσουμε σωστά τους κύκλους μας, ώστε να επικαλύπτονται τέλεια όταν συναρμολογείται ολόκληρο το παζλ. ο --r μεταβλητή ελέγχει το μέγεθος των κυκλικών τμημάτων του σχήματος του παζλ.
Τώρα παίρνουμε το ίδιο CSS και ενημερώνουμε μερικές τιμές σε αυτό για να δημιουργήσουμε τα άλλα τρία σχήματα:
Έχουμε τα σχήματα, αλλά όχι τις επικαλυπτόμενες άκρες που χρειαζόμαστε για να ταιριάζουν μεταξύ τους. Κάθε εικόνα περιορίζεται στο κελί πλέγματος στο οποίο βρίσκεται, επομένως είναι λογικό γιατί τα σχήματα είναι κάπως ανακατεμένα αυτήν τη στιγμή:
Πρέπει να δημιουργήσουμε υπερχείλιση αυξάνοντας το ύψος/πλάτος των εικόνων. Από το παραπάνω σχήμα, πρέπει να αυξήσουμε το ύψος της πρώτης και της τέταρτης εικόνας ενώ αυξήσουμε το πλάτος της δεύτερης και της τρίτης. Πιθανότατα έχετε ήδη μαντέψει ότι πρέπει να τα αυξήσουμε χρησιμοποιώντας το --r μεταβλητός.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}Πλησιάζουμε!
Δημιουργήσαμε την επικάλυψη αλλά, από προεπιλογή, οι εικόνες μας επικαλύπτονται είτε στα δεξιά (αν αυξήσουμε το πλάτος) είτε στο κάτω μέρος (αν αυξήσουμε το ύψος). Αλλά δεν είναι αυτό που θέλουμε για τη δεύτερη και την τέταρτη εικόνα. Η επιδιόρθωση είναι να χρησιμοποιηθεί place-self: end σε αυτές τις δύο εικόνες και ο πλήρης κωδικός μας γίνεται αυτό:
Εδώ είναι ένα άλλο παράδειγμα όπου χρησιμοποιώ μια κωνική κλίση αντί για μια ακτινική κλίση. Αυτό μας δίνει τριγωνικά κομμάτια παζλ, διατηρώντας το ίδιο υποκείμενο HTML και CSS.
Ένα τελευταίο! Αυτή τη φορά χρησιμοποιώ clip-path και δεδομένου ότι είναι μια ιδιότητα που μπορούμε να κάνουμε κίνηση, έχουμε μια δροσερή αιώρηση απλώς ενημερώνοντας την προσαρμοσμένη ιδιότητα που ελέγχει το σχήμα.
Ολοκληρώνοντας
Αυτό είναι όλο για αυτό το πρώτο μέρος! Συνδυάζοντας τα πράγματα που έχουμε ήδη μάθει για το CSS Grid με κάποια πρόσθετα clip-path και mask μαγεία, μπορέσαμε να φτιάξουμε διατάξεις πλέγματος με διαφορετικά είδη σχημάτων. Και χρησιμοποιούσαμε την ίδια σήμανση HTML κάθε φορά! Και η ίδια η σήμανση δεν είναι τίποτα άλλο από ένα δοχείο με μια χούφτα στοιχεία εικόνας!
Στο δεύτερο μέρος, θα εξερευνήσουμε πιο περίπλοκα πλέγματα με πιο φανταχτερά σχήματα και εφέ αιώρησης.
Σκοπεύω να κάνω το demo της επέκτασης των πάνελ εικόνων που φτιάξαμε μαζί αυτό το άλλο άρθρο:
…και μεταμορφώστε το σε ζιγκ-ζαγκ πάνελ εικόνας! Και αυτό είναι μόνο ένα παράδειγμα από τα πολλά που θα ανακαλύψουμε στο επόμενο άρθρο.
