Πόσο συχνά πρέπει να προσεγγίζετε το CSS background-size ιδιοκτησία? Εάν είστε σαν εμένα - και πιθανώς πολλούς άλλους ανθρώπους στο front-end - τότε είναι συνήθως όταν εσείς background-size: cover μια εικόνα για να γεμίσει το χώρο ενός ολόκληρου στοιχείου.
Λοιπόν, μου παρουσιάστηκε μια ενδιαφέρουσα πρόκληση που απαιτούσε πιο προηγμένο μέγεθος φόντου: ρίγες φόντου που μεταβαίνονται κατά την αιώρηση. Ελέγξτε αυτό και τοποθετήστε το με το δείκτη του ποντικιού σας:
Υπάρχουν πολλά περισσότερα που συμβαίνουν εκεί από το μέγεθος του φόντου, αλλά αυτό ήταν το κόλπο που χρειαζόμουν για να κάνω τις ρίγες στη μετάβαση. Σκέφτηκα να σας δείξω πώς έφτασα εκεί, όχι μόνο επειδή πιστεύω ότι είναι ένα πολύ ωραίο οπτικό εφέ, αλλά επειδή με απαιτούσε να γίνω δημιουργικός με ντεγκραντέ και συνδυασμούς που νομίζω ότι θα απολαύσετε.
Ας ξεκινήσουμε με μια πολύ βασική ρύθμιση για να είναι τα πράγματα απλά. Μιλάω για ένα single
στο HTML που έχει το στυλ πράσινου τετραγώνου:
div {
width: 500px;
height: 500px;
background: palegreen;
}Ρύθμιση των λωρίδων φόντου
Αν το μυαλό σας πήγε κατευθείαν σε μια γραμμική διαβάθμιση CSS όταν είδατε αυτές τις ρίγες, τότε είμαστε ήδη στην ίδια σελίδα. Δεν μπορούμε να κάνουμε ακριβώς μια επαναλαμβανόμενη κλίση σε αυτήν την περίπτωση, καθώς θέλουμε οι ρίγες να καταλαμβάνουν άνισους χώρους και να τις μεταφέρουν, αλλά μπορούμε να δημιουργήσουμε πέντε λωρίδες αλυσοδένοντας πέντε φόντα πάνω από το υπάρχον χρώμα φόντου και τοποθετώντας τις στην κορυφή -δεξιά του κοντέινερ:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}Έκανα οριζόντιες ρίγες, αλλά θα μπορούσαμε επίσης να πάμε κάθετα με την προσέγγιση που καλύπτουμε εδώ. Και μπορούμε να το απλοποιήσουμε αρκετά με προσαρμοσμένες ιδιότητες:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}Έτσι, το --gt τιμή είναι η κλίση και --n είναι μια σταθερά που χρησιμοποιούμε για να σπρώξουμε τις λωρίδες προς τα κάτω, ώστε να μετατοπίζονται κάθετα. Και μπορεί να έχετε παρατηρήσει ότι δεν έχω βάλει μια πραγματική κλίση, αλλά μάλλον συμπαγείς μαύρες ρίγες στο linear-gradient() λειτουργία — αυτό είναι σκόπιμα και θα φτάσουμε στο γιατί το έκανα αυτό σε λίγο.
Ένα ακόμη πράγμα που πρέπει να κάνουμε πριν προχωρήσουμε είναι να αποτρέψουμε το υπόβαθρό μας να επαναληφθεί. Διαφορετικά, θα πλακώσουν και θα γεμίσουν ολόκληρο τον χώρο:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}Θα μπορούσαμε να έχουμε ορίσει background-repeat στο background συντομογραφία, αλλά αποφάσισα να το ξεκαθαρίσω εδώ για να διαβαστούν εύκολα τα πράγματα.
Αντιστάθμιση των λωρίδων
Τεχνικά έχουμε ρίγες, αλλά είναι πολύ δύσκολο να το πούμε γιατί δεν υπάρχει κενό μεταξύ τους και καλύπτουν ολόκληρο το δοχείο. Είναι περισσότερο σαν να έχουμε ένα συμπαγές μαύρο τετράγωνο.
Εδώ μπορούμε να χρησιμοποιήσουμε το background-size ιδιοκτησία. Θέλουμε να ορίσουμε και το ύψος και το πλάτος των λωρίδων και η ιδιότητα υποστηρίζει μια σύνταξη δύο τιμών που μας επιτρέπει να κάνουμε ακριβώς αυτό. Και, μπορούμε να συνδέσουμε αυτά τα μεγέθη χωρίζοντάς τα με κόμμα με τον ίδιο τρόπο που κάναμε background.
Ας ξεκινήσουμε απλά ορίζοντας πρώτα τα πλάτη. Χρησιμοποιώντας τη σύνταξη μιας τιμής για background-size ορίζει το πλάτος και ορίζει προεπιλογή το ύψος σε auto. Χρησιμοποιώ εντελώς αυθαίρετες τιμές εδώ, επομένως ορίστε τις τιμές σε αυτό που λειτουργεί καλύτερα για το σχέδιό σας:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}Εάν χρησιμοποιείτε τις ίδιες τιμές με εμένα, θα λάβετε αυτό:
Δεν μοιάζει ακριβώς ότι έχουμε ορίσει το πλάτος για όλες τις ρίγες, έτσι δεν είναι; Αυτό οφείλεται στο auto συμπεριφορά ύψους της σύνταξης μιας τιμής. Η δεύτερη λωρίδα είναι πιο φαρδιά από τις άλλες κάτω από αυτήν και τις καλύπτει. Πρέπει να βάλουμε τα ύψη για να μπορούμε να δούμε τη δουλειά μας. Θα πρέπει να έχουν όλα το ίδιο ύψος και μπορούμε πραγματικά να τα χρησιμοποιήσουμε ξανά --n μεταβλητή, πάλι, για να είναι τα πράγματα απλά:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}Α, πολύ καλύτερα!
Προσθέτοντας κενά μεταξύ των λωρίδων
Αυτό είναι ένα εντελώς προαιρετικό βήμα εάν το σχέδιό σας δεν απαιτεί κενά μεταξύ των λωρίδων, αλλά το δικό μου το έκανε και δεν είναι υπερβολικά περίπλοκο. Αλλάζουμε το ύψος της κάθε λωρίδας background-size ένα smidge, μειώνοντας την τιμή ώστε να μην καλύπτουν ολόκληρο τον κατακόρυφο χώρο.
Μπορούμε να συνεχίσουμε να χρησιμοποιούμε το δικό μας --n μεταβλητή, αλλά αφαιρέστε ένα μικρό ποσό, ας πούμε 5px, με τη χρήση calc() να πάρουμε αυτό που θέλουμε.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);Αυτή είναι πολλή επανάληψη που μπορούμε να εξαλείψουμε με μια άλλη μεταβλητή:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Απόκρυψη και ανάμειξη
Τώρα ας ανταλλάξουμε το palegreen χρώμα φόντου που χρησιμοποιούσαμε για οπτικούς σκοπούς μέχρι αυτό το σημείο για το λευκό.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}Ένα ασπρόμαυρο μοτίβο όπως αυτό είναι τέλειο για κάλυψη και ανάμειξη. Για να το κάνουμε αυτό, θα τυλίξουμε πρώτα το δικό μας
σε ένα νέο μητρικό δοχείο και εισάγετε ένα δεύτερο
κάτω από αυτό:
Θα κάνουμε ένα μικρό CSS re-factoring εδώ. Τώρα που έχουμε ένα νέο γονικό κοντέινερ, μπορούμε να περάσουμε το σταθερό width και height ιδιότητες που χρησιμοποιούσαμε στο δικό μας
εκεί:
section {
width: 500px;
height: 500px;
} Θα χρησιμοποιήσω επίσης το CSS Grid για να τοποθετήσω τα δύο
στοιχεία το ένα πάνω στο άλλο. Αυτό είναι το ίδιο κόλπο που χρησιμοποιεί ο Temani Afif για να δημιουργήσει το δικό του υπέροχες γκαλερί εικόνων. Η ιδέα είναι ότι τοποθετούμε και τα δύο div πάνω από το πλήρες δοχείο χρησιμοποιώντας το grid-area ιδιοκτησία και ευθυγραμμίστε τα πάντα προς το κέντρο:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Τώρα, ελέγξτε αυτό. Ο λόγος που χρησιμοποίησα μια συμπαγή κλίση που πηγαίνει από μαύρο σε μαύρο νωρίτερα είναι για να μας ρυθμίσω για κάλυψη και ανάμειξη των δύο
στρώματα. Αυτό δεν είναι αληθινό συγκάλυψη με την έννοια που ονομάζουμε το mask ιδιότητα, αλλά η αντίθεση μεταξύ των επιπέδων ελέγχει ποια χρώματα είναι ορατά. Η περιοχή που καλύπτεται από λευκό θα παραμείνει λευκή και η περιοχή που καλύπτεται από μαύρο διαρρέει. Τεκμηρίωση του MDN για τις λειτουργίες ανάμειξης έχει μια ωραία εξήγηση για το πώς λειτουργεί αυτό.
Για να λειτουργήσει αυτό, θα εφαρμόσω την πραγματική κλίση που θέλουμε να δούμε στην πρώτη
ενώ εφαρμόζουμε τους κανόνες στυλ από το αρχικό μας
στο νέο, χρησιμοποιώντας το :nth-child() ψευδο-επιλογέας:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Αν σταματήσουμε εδώ, στην πραγματικότητα δεν θα δούμε καμία οπτική διαφορά από αυτό που είχαμε πριν. Αυτό οφείλεται στο γεγονός ότι δεν έχουμε κάνει ακόμα την πραγματική ανάμειξη. Λοιπόν, ας το κάνουμε τώρα χρησιμοποιώντας το screen λειτουργία ανάμειξης:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Χρησιμοποίησα ένα μπεζ χρώμα φόντου στο demo που έδειξα στην αρχή αυτού του άρθρου. Αυτό το ελαφρώς πιο σκούρο είδος υπόλευκου χρωματισμού επιτρέπει σε λίγο χρώμα να διαρρέει το υπόλοιπο φόντο:
Το φαινόμενο hover
Το τελευταίο κομμάτι αυτού του παζλ είναι το εφέ hover που διευρύνει τις ρίγες σε όλο το πλάτος. Αρχικά, ας γράψουμε τον επιλογέα μας για αυτό. Θέλουμε αυτό να συμβεί όταν το γονικό κοντέινερ (
στην περίπτωσή μας) αιωρείται. Όταν τοποθετηθεί το δείκτη του ποντικιού, θα αλλάξουμε το μέγεθος φόντου των λωρίδων που περιέχονται στο δεύτερο
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Θα θελήσουμε να αλλάξουμε το background-size των λωρίδων σε όλο το πλάτος του δοχείου διατηρώντας το ίδιο ύψος:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Αυτό "κουμπώνει" το φόντο σε πλήρες πλάτος. Αν προσθέσουμε λίγο transition σε αυτό, τότε βλέπουμε τις λωρίδες να επεκτείνονται στην αιώρηση:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Εδώ είναι το τελευταίο demo για άλλη μια φορά:
Πρόσθεσα μόνο κείμενο εκεί για να δείξω πώς θα μπορούσε να είναι η χρήση αυτού σε διαφορετικό πλαίσιο. Εάν κάνετε το ίδιο, τότε αξίζει να βεβαιωθείτε ότι υπάρχει αρκετή αντίθεση μεταξύ του χρώματος του κειμένου και των χρωμάτων που χρησιμοποιούνται στη διαβάθμιση για να συμμορφώνονται με Οδηγίες WCAG. Και ενώ αγγίζουμε εν συντομία την προσβασιμότητα, αξίζει λαμβάνοντας υπόψη τις προτιμήσεις των χρηστών για μειωμένη κίνηση όταν πρόκειται για το φαινόμενο hover.
Αυτό είναι περιτύλιγμα!
Αρκετά τακτοποιημένο, σωστά; Σίγουρα το πιστεύω. Αυτό που μου αρέσει σε αυτό, επίσης, είναι ότι είναι αρκετά διατηρήσιμο και προσαρμόσιμο. Για παράδειγμα, μπορούμε να αλλάξουμε το ύψος, τα χρώματα και την κατεύθυνση των λωρίδων αλλάζοντας μερικές τιμές. Μπορείτε ακόμη να μεταβάλετε μερικά ακόμη πράγματα εκεί - όπως τα χρώματα και τα πλάτη - για να το κάνετε ακόμα πιο διαμορφώσιμο.
Με ενδιαφέρει πραγματικά αν θα το προσέγγιζες διαφορετικά. Αν ναι, παρακαλώ μοιραστείτε στα σχόλια! Θα ήταν ωραίο να δούμε πόσες παραλλαγές μπορούμε να συλλέξουμε.
