Επιλύστε ένα κοινό πρόβλημα σύγκρουσης χρωμάτων με αυτήν την εύχρηστη, αλλά ελάχιστα γνωστή ιδιότητα CSS.

Με σταθερά στοιχεία ιστότοπου, όπως λογότυπα, θα συναντήσετε συχνά μπερδέματα χρωμάτων κατά την κύλιση της σελίδας. Αυτό μπορεί να συμβεί εάν το στατικό στοιχείο περνά πάνω από μια ενότητα του ιστότοπου που μοιράζεται το ίδιο χρώμα με το στοιχείο. Το στατικό στοιχείο θα είναι αόρατο ενώ στηρίζεται σε αυτό το φόντο.

Για να διορθώσετε αυτό το ζήτημα, πρέπει να αντιστρέψετε δυναμικά το χρώμα του λογότυπου όταν αυτό υπερβαίνει ένα στοιχείο με το ίδιο χρώμα. Μάθετε πώς να επιτύχετε αυτό το αποτέλεσμα χρησιμοποιώντας μόνο CSS, χωρίς να απαιτείται JavaScript!

Κατεβάστε τον Κωδικό Εκκίνησης

Για να ακολουθήσετε αυτό το σεμινάριο, κατεβάστε τον κωδικό εκκίνησης από το Αποθετήριο GitHub στο τοπικό σας μηχάνημα.

Ανοιξε index.html σε ένα πρόγραμμα περιήγησης που θα πρέπει να μοιάζει με τη σελίδα που εμφανίζεται εδώ:

Η σελίδα HTML περιέχει ένα λογότυπο και τέσσερις ενότητες. Κάθε ενότητα έχει έναν εικονικό τίτλο και τρεις παραγράφους εικονικού κειμένου. Το κείμενο του λογότυπου έχει το ίδιο μαύρο χρώμα με το φόντο της δεύτερης και της τέταρτης ενότητας. Αυτή η επίδραση προέρχεται από το

instagram viewer
nο παιδί (ακόμη) σκιαγραφώ στυλ.css, το οποίο εφαρμόζει το μαύρο φόντο σε ζυγές ενότητες.

Κάνοντας το λογότυπο κολλώδες

Με αυτόν τον κωδικό εκκίνησης, το λογότυπο δεν κολλάει στην κορυφή. Αυτό σημαίνει ότι το λογότυπο εξαφανίζεται όταν κάνετε κύλιση προς τα κάτω στη σελίδα. Μπορείτε να μετατρέψετε το λογότυπό σας σε κολλώδη κεφαλίδα εφαρμόζοντας το θέση: κολλώδης ιδιοκτησία σε αυτό μέσα στο αρχείο CSS. Για μια βαθιά βουτιά στην τοποθέτηση στο CSS, διαβάστε την ανάρτησή μας στο Ιδιότητα θέσης CSS.

Βεβαιωθείτε ότι το λογότυπο κολλάει στην κορυφή, αλλά το κάνετε μόνο σε μεγαλύτερες οθόνες (γιατί, σε μικρότερα μεγέθη οθόνης, θα μπορούσε να υπερβαίνει άλλα στοιχεία). Το ακόλουθο Ερώτημα πολυμέσων που ανταποκρίνεται σε HTML δημιουργεί αυτό το εφέ:

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(πλάτος > 980 εικονοστοιχεία) {
.λογότυπο { 
θέση: κολλώδης; 
μπλουζα: .5 εκμ; 
 }
}

Τώρα το λογότυπο θα κολλάει στην κορυφή ανά πάσα στιγμή και θα σας ακολουθεί καθώς κάνετε κύλιση. Αλλά θα παρατηρήσετε επίσης ότι το κείμενο εξαφανίζεται όταν κάνετε κύλιση στις ενότητες σκούρου φόντου (επειδή το κείμενο του λογότυπου είναι επίσης μαύρο). Τώρα ρίξτε μια ματιά στο πώς να το διορθώσετε.

Προσθήκη mix-blend-mode στην Sticky Header σας

Για να διασφαλίσετε ότι το μαύρο λογότυπο δεν θα εξαφανιστεί σε μαύρο φόντο, θα χρειαστεί να αντιστρέψετε το χρώμα δυναμικά. Ο τρόπος που θα το κάνετε αυτό είναι χρησιμοποιώντας το mix-blend-mode Η ιδιότητα CSS και η εκχώρηση της τιμής του διαφορά:

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(πλάτος > 980 εικονοστοιχεία) { 
.λογότυπο { 
θέση: κολλώδης; 
μπλουζα: .5 εκμ; 
mix-blend-mode: διαφορά
 }
}

Η ιδιότητα CSS mix-blend-mode καθορίζει τον τρόπο με τον οποίο το περιεχόμενο ενός στοιχείου πρέπει να συνδυάζεται με το περιεχόμενο του γονικού στοιχείου και το φόντο του. Η διαφορετική τιμή παίρνει τη διαφορά τιμής κάθε pixel, αντιστρέφοντας τα ανοιχτά χρώματα. Έτσι, εάν οι τιμές των χρωμάτων είναι ίδιες, γίνονται μαύρα. Οι διαφορές στις τιμές θα αντιστραφούν.

Η παραπάνω προσθήκη CSS θα εξαφανίσει εντελώς το λογότυπο. Αυτό συμβαίνει επειδή δεν έχετε ορίσει το χρώμα του κειμένου του λογότυπου σε λευκό εκτός του ερωτήματος πολυμέσων. Κάντε το με τον παρακάτω κώδικα:

.λογότυπο { 
χρώμα: άσπρο; 
/* Άλλες ιδιότητες CSS */
}

Τώρα έχετε ρυθμίσει τα πάντα με επιτυχία. Κάντε κύλιση προς τα κάτω στη σελίδα και στο μαύρο φόντο. Θα δείτε το λογότυπο να αλλάζει από μαύρο σε λευκό.

Μπορείτε επίσης να δουλέψετε με άλλα χρώματα εκτός από το μαύρο και το άσπρο. Για παράδειγμα, αν αλλάζατε το χρώμα του κειμένου του λογότυπού σας σε γαλαζοπράσινο χρώμα (#008080), θα λάβετε το ροζ χρώμα σε λευκό φόντο. Η παρακάτω εικόνα το δείχνει.

Στις περισσότερες περιπτώσεις, θα θέλατε το στοιχείο σας να είναι λευκό για να έχετε τα καλύτερα αποτελέσματα. Επίσης, αν κάνετε κύλιση στην κορυφή, μπορεί να βρείτε το λογότυπό σας κομμένο στη μέση. Αυτό συμβαίνει επειδή το λογότυπο υπάρχει έξω από το στοιχείο. Για να εμφανίσετε το λογότυπο πλήρως, πρέπει να ορίσετε το χρώμα φόντου του στοιχείο σε λευκό.

Χρησιμοποιώντας μια εικόνα ως λογότυπο αντί για κείμενο

Αυτή η τεχνική δεν λειτουργεί μόνο με κείμενο, αλλά και με εικόνες. Φυσικά, πρέπει να βεβαιωθείτε ότι χρησιμοποιείτε μια λευκή εικόνα ως λογότυπο. Το παρακάτω παράδειγμα χρησιμοποιεί ένα λευκό λογότυπο lorem ipsum που βρίσκεται στον ίδιο φάκελο με το index.html αρχείο:

<imgsrc="loremipsum-297.svg"alt="Λογότυπο Lorem Ipsum">

Η εικόνα που χρησιμοποιείται εδώ είναι ένα SVG (Scalable Vector Graphic), ένας τύπος διανυσματικό αρχείο.

Τώρα το χρώμα της εικόνας του λογότυπου σας θα είναι μαύρο σε λευκό φόντο όπως φαίνεται στην παρακάτω εικόνα.

Αλλά αν κάνετε κύλιση σε μαύρο φόντο, το χρώμα του λογότυπου θα γίνει αυτόματα λευκό. Μπορείτε να το δείτε στην παρακάτω εικόνα.

Μπορείτε επίσης να αυξήσετε το μέγεθος του λογότυπου αντικαθιστώντας το μέγεθος γραμματοσειράς με ύψος και πλάτος στο μπλοκ CSS που στοχεύει το λογότυπο. Άλλωστε, τώρα έχετε να κάνετε με μια εικόνα και όχι με κείμενο.

.λογότυπο {
χρώμα: άσπρο;
πλάτος: 10rem;
/* Άλλες ιδιότητες CSS */
}

Εάν συρρικνώσετε την οθόνη προς τα κάτω, το ερώτημα πολυμέσων δεν θα ισχύει πλέον. Αυτό θα απενεργοποιήσει τις διαφορετικές λειτουργίες ανάμειξης, εξαφανίζοντας το λογότυπό σας. Για να επαναφέρετε το λογότυπο στη σελίδα, πρέπει να ορίσετε το mix-blend-mode ιδιοκτησία στο λογότυπο έξω από το ερώτημα πολυμέσων:

.λογότυπο {
χρώμα: άσπρο;
πλάτος: 10rem;
mix-blend-mode: διαφορά;
/* Άλλες ιδιότητες CSS */
}

Αυτό θα ενεργοποιήσει το mix mix στο λογότυπο ανά πάσα στιγμή, ακόμη και σε μεγαλύτερες οθόνες. Αλλά στις μικρές οθόνες, το λογότυπο θα παραμείνει στην κορυφή και δεν θα σας ακολουθεί καθώς κάνετε κύλιση προς τα κάτω (γιατί θέση: κολλώδης λειτουργεί μόνο σε μεγάλες οθόνες). Τέλος, να θυμάστε πάντα να χρησιμοποιείτε ένα λευκό λογότυπο για να μην εξαφανιστεί από τη σελίδα.

Μάθετε περισσότερα CSS Συμβουλές και κόλπα

Χρησιμοποιώντας τη λειτουργία mix-blend, μπορείτε να δημιουργήσετε συναρπαστικές διατάξεις με εναλλασσόμενα χρώματα. Ακόμα καλύτερα, δεν χρειάζεται να κωδικοποιήσετε σκληρά κανένα χρώμα ή να ορίσετε σημεία διακοπής, επειδή η λειτουργία mix-blend θα αντιστρέψει το χρώμα δυναμικά. Σας επιτρέπει να δημιουργείτε ωραία μείγματα και χρώματα για μέρη του περιεχομένου ενός στοιχείου ανάλογα με το άμεσο φόντο του.

Η CSS θεωρείται συχνά ως μια από τις πιο συναρπαστικές γλώσσες για εκμάθηση. Αυτό οφείλεται εν μέρει στο ότι το CSS είναι γεμάτο συμβουλές και κόλπα όπως αυτό που μόλις μάθατε σε αυτό το άρθρο. Μερικές άλλες χρήσιμες συμβουλές και κόλπα για το CSS είναι τα εφέ αιώρησης, η αλλαγή μεγέθους εικόνων ώστε να χωρούν σε κοντέινερ, η περικοπή κειμένου με ελλείψεις και η χρήση μετατροπής κειμένου.