Η σκιά είναι ένα εφέ που ρίχνει ή προσθέτει μια σκιά πίσω από τα επιλεγμένα στοιχεία HTML όταν αποδίδεται στην ιστοσελίδα. Αυτό το αποτέλεσμα μπορεί να επιτευχθεί χρησιμοποιώντας το ' σκίαση() ' μέθοδος ως τιμή για CSS ' φίλτρο ' ιδιοκτησία ή χρησιμοποιώντας το ' κουτί-σκιά ” ιδιοκτησία. Χρησιμοποιώντας την ιδιότητα 'box-shadow', η οπτική βελτίωση, η εμπειρία του χρήστη, η έμφαση και η εστίαση μπορούν να αντληθούν σε ένα συγκεκριμένο στοχευμένο στοιχείο HTML.
Αυτός ο οδηγός δείχνει τη διαδικασία δημιουργίας εφέ drop shadow χρησιμοποιώντας την ιδιότητα box-shadow:
-
- Δημιουργήστε μια σταθερή σκιά χρησιμοποιώντας την ιδιότητα box-shadow
- Δημιουργήστε μια θολή πτώση σκιάς χρησιμοποιώντας την ιδιότητα box-shadow
- Αναπτύξτε την Drop Shadow Area
Πώς να δημιουργήσετε Drop Shadows στο CSS3 χρησιμοποιώντας την ιδιότητα box-shadow;
Ο ' κουτί-σκιά Η ιδιότητα ” επιτρέπει στον προγραμματιστή να δημιουργήσει μια οπτική ιεραρχία υποδεικνύοντας τη σχετική θέση των στοιχείων στη σελίδα. Χρησιμοποιώντας το, οι δημιουργοί ιστοσελίδων μπορούν να δημιουργήσουν την ψευδαίσθηση των αντικειμένων που ρίχνουν σκιές σε επιφάνειες, δίνοντας στα στοιχεία μια πιο διαδραστική αίσθηση.
Σύνταξη
Η ιδιότητα 'box-shadow' έχει μια σύνταξη ως εξής:
κουτί-σκιά: [ οριζόντια μετατόπιση ] [ κατακόρυφη μετατόπιση ] [ ακτίνα θαμπώματος ] [ ακτίνα εξάπλωσης ] [ χρώμα ] ;
Μια επεξήγηση των όρων που χρησιμοποιούνται στην παραπάνω σύνταξη:
-
- Αρχικά, το « οριζόντια μετατόπιση ' ανακτά/ αποθηκεύει τη θέση του άξονα Χ και το ' αρνητικός Η τιμή ” θέτει τη σκιά προς τα αριστερά και αντίστροφα.
- Ο ' κατακόρυφη μετατόπιση Η τιμή ' αποθηκεύει τη θέση του άξονα Υ, το ' θετικός Η τιμή ' θέτει τη σκιά προς τα κάτω και αντίστροφα στην περίπτωση του ' αρνητικός ' αξία.
- Στη συνέχεια, το « ακτίνα θαμπώματος Η τιμή από το όνομα ορίζει τη θολότητα της σκιάς.
- Ο ' ακτίνα εξάπλωσης Η τιμή ” προσδιορίζει πόση ακτίνα πρέπει να επεκταθεί η σκιά.
- Ο ' χρώμα ' ορίζει το χρώμα της σκιάς, μπορεί να είναι στο ' HSL ' ή ' RGB μορφή επίσης.
Τώρα, ας δούμε μερικά παραδείγματα για καλύτερη κατανόηση:
Παράδειγμα 1: Εφαρμογή Solid Drop Shadow χρησιμοποιώντας την ιδιότητα box-shadow
Για τη ρύθμιση της σταθερής σκιάς, μόνο οι κατευθύνσεις και το χρώμα της σκιάς εισάγονται ως τιμή στο ' κουτί-σκιά ” ιδιοκτησία:
< στυλ >.boxShadowExample {
πλάτος: 210 px;
περίγραμμα: 2px μασίφ καλαμποκάλευρο.
ύψος: 210 px;
χρώμα του φόντου: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
στυλ >
Στον παραπάνω κώδικα:
-
- Αρχικά, το στοιχείο HTML επιλέγεται με κλάση ' boxShadowExample '. Και η αξία του ' 210 εικονοστοιχεία ' παρέχεται στο ' ύψος ' και ' πλάτος ' ιδιότητες. Επίσης, χρησιμοποιήστε το ' σύνορο ' και ' χρώμα του φόντου ” ιδιότητες για καλύτερη οπτικοποίηση.
- Στη συνέχεια, ορίστε την τιμή του ' 10px 10px δασοπράσινο ' στο ' κουτί-σκιά ” Ιδιότητα CSS. Ο ' 10 εικονοστοιχεία ” είναι η οριζόντια και κάθετη μετατόπιση που καθορίζει τη θέση όπου πρέπει να εφαρμοστεί η σκιά. Και το ' πράσινο του δάσους ” είναι το χρώμα της σκιάς.
Μετά τη συλλογή, η ιστοσελίδα εμφανίζεται ως εξής:
Η έξοδος επιβεβαιώνει ότι έχει τοποθετηθεί μια σκιά στερεού τύπου χρησιμοποιώντας την ιδιότητα box-shadow.
Παράδειγμα 2: Εφαρμογή Blurry Drop Shadow με χρήση της ιδιότητας box-shadow
Για να γίνει θολή η ήδη εφαρμοσμένη σκιά, εισάγεται μια ακόμη αριθμητική τιμή πριν από το χρώμα για το ' κουτί-σκιά ” ιδιοκτησία. Επισκεφτείτε τον παρακάτω ενημερωμένο κωδικό:
< στυλ >.boxShadowExample {
πλάτος: 210 px;
περίγραμμα: 2px μασίφ καλαμποκάλευρο.
ύψος: 210 px;
χρώμα φόντου: whitesmoke;
box-shadow: 10px 10px 15px forestgreen;
}
στυλ >
Σύμφωνα με τον παραπάνω κώδικα, η σκιά είναι τώρα ' 15 εικονοστοιχεία ' θολός. Μετά το τέλος της φάσης μεταγλώττισης, η ιστοσελίδα μοιάζει με αυτό:
Το παραπάνω σχήμα δείχνει ότι η σκιά είναι πλέον θολή.
Παράδειγμα 3: Επέκταση της Drop Shadow Area
Η αξία περιθωρίου παρέχεται στο « κουτί-σκιά ” ιδιοκτησία για επέκταση της περιοχής της σκιάς. Η τιμή του spread πρέπει να είναι σε αριθμητική μορφή. Όπως στο παρακάτω απόσπασμα κώδικα, η περιοχή σκιάς επεκτείνεται σε ' 20 εικονοστοιχεία ”:
< στυλ >.boxShadowExample {
πλάτος: 210 px;
περίγραμμα: 2px μασίφ καλαμποκάλευρο.
ύψος: 210 px;
χρώμα φόντου: whitesmoke;
box-shadow: 10px 10px 15px 20px forestgreen;
}
στυλ >
Μετά την εκτέλεση, η σκιά εμφανίζεται τώρα ως εξής:
Όπως μπορείτε να δείτε, η περιοχή της σκιάς αυξάνεται τώρα κατά 20 px.
συμπέρασμα
Ο ' κουτί-σκιά «Το ακίνητο χρησιμοποιείται για τη δημιουργία « σκίαση ” επίδραση σε επιλεγμένα στοιχεία HTML. Ο ' σκίαση 'Η ιδιοκτησία δέχεται πέντε τιμές, ' οριζόντια μετατόπιση », « κατακόρυφη μετατόπιση », « ακτίνα θαμπώματος », « ακτίνα εξάπλωσης ' και ' χρώμα '. Οι τιμές 'οριζόντια μετατόπιση' και 'κάθετη μετατόπιση' ορίζουν τις διαστάσεις για τη σκιά από όπου θα πρέπει να προκύψει η σκιά. Η τιμή 'ακτίνα θαμπώματος' κάνει τη σκιά θολή και η τιμή 'ακτίνα εξάπλωσης' επεκτείνει την περιοχή της σκιάς.