Πώς να επεκτείνετε την επικάλυψη μόνο με CSS με το Box-Shadow
Περιεχόμενα περιεχομένου αποτελούν εξέχοντα κομμάτι του σύγχρονου σχεδιασμού ιστοσελίδων. Σας βοηθούν απόκρυψη στοιχείου σε μια ιστοσελίδα και αργότερα - με την έγκριση του χρήστη - αποκαλύψτε το, και να εμφανίσετε επιπλέον πληροφορίες ή στοιχεία ελέγχου, όπως κουμπιά πίσω από αυτό.
Μια τυπική επικάλυψη είναι ημιδιαφανές, με στερεό χρώμα φόντου (συνήθως μαύρο) και υπάρχει κάποιο κείμενο ή κουμπιά για να βλέπουν ή να αλληλεπιδρούν με τους χρήστες. Μετά την αλληλεπίδραση (κάντε κλικ ή τοποθετήστε το δείκτη του ποντικιού), η επικάλυψη αφαιρείται και αποκαλύπτει το περιεχόμενο κάτω από αυτό.
Σε αυτό το άρθρο, θα ρίξουμε μια ματιά στο πώς να προσθέστε έγχρωμη επικάλυψη σε εικόνες χρησιμοποιώντας καθαρό CSS. Μπορείτε να δείτε το τελικό αποτέλεσμα στο παρακάτω demo. Τοποθετήστε τις εικόνες στις εικόνες για να εμφανιστούν οι επικαλύψεις. Παρόλο που αυτή η ανάρτηση συζητά τις εικόνες, η τεχνική που παρουσιάζει μπορεί να εφαρμοστεί με ασφάλεια σε άλλους τύπους περιεχομένου (όπως μπλοκ κειμένου).
Αποφύγετε την προσθήκη επιπλέον στοιχείων HTML
Οι επικαλύψεις δημιουργούνται συχνά από τοποθετώντας ένα επιπλέον στοιχείο HTML με ένα αδιαφάνεια αξία μικρότερη από 1 ακριβώς επάνω από το προς κάλυψη στοιχείο. Το πρόβλημα είναι ότι αυτή η τεχνική περιλαμβάνει τη χρήση ενός επιπλέον στοιχείο (ή ψευδο-στοιχείο) για την επικάλυψη.
Αν δεν είστε παιδαγωγός μεγέθους HTML, η κατοχή ενός επιπλέον στοιχείου για επικάλυψη δεν είναι πιθανώς μια μεγάλη υπόθεση, καθώς πιθανότατα δεν θα φορολογήσει το εύρος ζώνης οποιουδήποτε δικτύου τόσο πολύ. Ωστόσο, έχοντας ξεχωριστός οι κανόνες στυλ για τα στοιχεία και τις επικαλύψεις τους εξακολουθούν να βλάπτουν την αναγνωσιμότητα και τη συντηρησιμότητα του CSS.
Για να διατηρήσετε τον κώδικα σας σε τάξη και να μην χάσετε το περίγραμμα του HTML σας, είναι μια καλύτερη επιλογή να χρησιμοποιήσετε μια λύση μόνο για το CSS.
Δημιουργία επικάλυψης με κουτί-σκιά
Πώς μπορείτε λοιπόν να δημιουργήσετε μια επικάλυψη μόνο CSS; Με τη βοήθεια του κουτί-σκιά Ιδιότητα CSS. Η σκιά κουτιού είναι ιδανική για αυτή τη δουλειά, αφού αυτό που είναι μια επικάλυψη αλλά μια σκοτεινή σκιά ρίχνει πάνω από ένα στοιχείο?
Η σκιά κουτιού έχει μια τιμή ιδιότητας που ονομάζεται ένθεση, που προκαλεί την εμφάνιση της σκιάς προς τα μέσα του πλαισίου του κιβωτίου.
Μια ένθετη σκιά κιβωτίου με μέγεθος σκιάς μισό ή περισσότερο από το ήμισυ του πλάτους και του ύψους του στοιχείου, δημιουργεί μια σκιά που καλύπτει το ολόκληρος στοιχείο.
.πλαίσιο πλάτος: 200px; ύψος: 200px; κουτί-σκιά: πράσινο 0 0 0 100px ένθετο;
Από τις επικαλύψεις συνήθως έχουν κάποια διαφάνεια, πρέπει να το προσθέσετε και στη σκιά κουτιού. Αυτό μπορεί να γίνει χρησιμοποιώντας το rgba () λειτουργία για το χρώμα σκιάς.
ο rgb μέρος του rgba, αντιπροσωπεύει, κόκκινο, πράσινο και μπλε τιμές καναλιού χρώματος, ενώ ένα αντιπροσωπεύει το άλφα κανάλι, το οποίο είναι υπεύθυνος για τη διαφάνεια.
Για το κανάλι άλφα, η τιμή 1 δημιουργεί ένα αδιαφανές χρώμα, ενώ το 0 δημιουργεί ένα πλήρως διαφανές χρώμα.
Αν ορίσετε μια τιμή μεταξύ 0 και 1 στο κανάλι άλφα της τιμής χρώματος rgba της σκιάς κουτιού, μπορείτε δημιουργήστε μια ημι-διαφανή επικάλυψη.
Δημιουργήστε τον κώδικα για την επίδειξη
Το demo θα δείξει τις εικόνες και τα ονόματα διαφορετικών pokemons. Εδώ θα δημιουργήσουμε μόνο τον κώδικα για το Bulbasaur, το πρώτο pokemon στο demo, καθώς οι άλλοι γίνονται με τον ίδιο τρόπο (στο Codepen μπορείτε επίσης να δείτε τον κώδικα για αυτούς).
HTML
Για το HTML, πρέπει μόνο να το κάνουμε δημιουργήστε ένα κουτί στην οποία θα προσθέσουμε τα πάντα με το CSS.
CSS
Στο CSS παρακάτω, το .ΠΟΚΕΜΟΝ τα στοιχεία εμφανίζουν τις εικόνες pokemon και το .pokemon :: μετά τα ψευδο-στοιχεία φέρουν το όνομα του pokemon.
Δεδομένου ότι το κουτί-σκιά ιδιοκτησία μπορεί να λάβει πολλές τιμές ώστε να κάνουν πολλές σκιές, εκτός από τη σκιά επικάλυψης, πρόσθεσα και άλλες σκιές γκρι στο .ΠΟΚΕΜΟΝ και .pokemon: hover στοιχεία για την αισθητική.
/ * εικόνες pokemon * / .pokemon width: 200px; ύψος: 200px; / * κεντρικό περιεχόμενο χρησιμοποιώντας flex box * / display: flex; justify-content: center; ευθυγράμμιση-στοιχεία: κέντρο / * επικάλυψη * / κουτί-σκιά: 0 0 0 100px ένθετο, 0 0 5px γκρι; / * μεταβατική μετάβαση * / μετάβαση: κουτί-σκιά 1s; / * ονόματα pokemon * / .pokemon :: μετά από πλάτος: 80%; ύψος: 80%. εμφάνιση: μπλοκ? γραμματοσειρά: 16pt 'bookman old syle'; άσπρο χρώμα; σύνορα: 2px στερεά? κείμενο-ευθυγράμμιση: κέντρο; / * κεντρικό περιεχόμενο χρησιμοποιώντας flex box * / display: flex; justify-content: center; ευθυγράμμιση-στοιχεία: κέντρο / * hover out μετάβαση * / μετάβαση: opacity 1s .5s; / * αποκαλύπτουν την εικόνα του pokemon στο hover * / .pokemon: hover μετάβαση: box-shadow 1s; κουτί-σκιά: 0 0 0 5px ένθετο, 0 0 5px γκρι, 0 0 10px γκρι ένθετο? / * απόκρυψη του ονόματος pokemon στο hover * / .pokemon: hover :: μετά από transition: opacity .5s; αδιαφάνεια: 0;
Οταν ο .ΠΟΚΕΜΟΝ τα στοιχεία κρέμονται, η σκιά κουτιού τους πρέπει να αλλάξει για να αποκαλύψει την εικόνα πίσω.
Μπορείτε να δείτε ότι το .pokemon: hover ο επιλογέας παίρνει μια νέα σκιά κουτιού που αφαιρεί την επικάλυψη και το .pokemon: hover :: μετά ο επιλογέας κρύβει το όνομα του pokemon χρησιμοποιώντας το αδιαφάνεια ιδιοκτησία.
Μπορεί να έχετε παρατηρήσει επίσης το απουσία τιμών χρώματος στο πλαίσιο επικάλυψης-σκιά στο .ΠΟΚΕΜΟΝ και .pokemon: hover κανόνες στυλ. Πρέπει να προσδιοριστεί το χρώμα σκιάς επικάλυψης-σκιάς των επιμέρους pokemons σύμφωνα με τους δικούς τους ξεχωριστούς κανόνες, καθώς είναι όλα διαφορετικά μεταξύ τους.
Οπως και κουτί-σκιά δεν έχει μακροχρόνια ιδιοκτησία, δεν μπορείτε να ορίσετε το χρώμα σκιάς του μεμονωμένα με κάτι σαν, κουτί-σκιά-χρώμα. Αντίθετα - χρησιμοποιούμε το χρώμα ιδιοκτησία.
Από προεπιλογή, όταν δίνετε μια τιμή για το χρώμα ιδιοκτησία, η αξία αυτή είναι για τα σύνορα, το περίγραμμα και τα χρώματα σκιάς κουτιού επισης. Έτσι, μπορείτε απλά να χρησιμοποιήσετε το χρώμα ιδιότητα για να προσθέσετε χρώμα στη σκιά κουτιού.
#bulbasaur φόντο-εικόνα: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg). / * τιμή χρώματος που χρησιμοποιείται για το χρώμα σκιάς κουτιού * / χρώμα: rgba (71, 121, 94, 0.9); #bulbasaur :: μετά από / * pokemon name * / content: 'Bulbasaur';
Το χρώμα της σκιάς επικάλυψης χρησιμοποιεί το προαναφερθέν rgba () λειτουργία με 0,9 για την τιμή alpha για να γίνει η επικάλυψη διαφανής.
Εκτός από το χρώμα της σκιάς box-overlay, το παραπάνω CSS προσθέτει επίσης τους κανόνες που είναι ατομικοί σε κάθε pokemon - η εικόνα ως εικόνα φόντου και το όνομα.
Και αυτό είναι όλο, είμαστε έτοιμοι με την επικάλυψη χρωμάτων μόνο με CSS. Ρίξτε μια ματιά στον κώδικα όλων των pokemons στην παρακάτω πένα.
