Πώς να δημιουργήσετε μια σκιά με CSS

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

Ας ρίξουμε μια πιο προσεκτική ματιά στο CSS σκίαση ιδιοκτησία.

Τι είναι η αναπτυσσόμενη σκιά CSS;

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

Σύνταξη:
φίλτρο: drop-shadow (offset-x offset-y blur-radius color).

Υπάρχει ένα ευρύ φάσμα από λειτουργίες φίλτρου συμπεριλαμβανομένου θόλωση ( ), φωτεινότητα ( ), και σκίαση( ).

μετατόπιση-χ καθορίζει την οριζόντια απόσταση και αντιστάθμιση-υ καθορίζει την κατακόρυφη απόσταση. Σημειώστε ότι οι αρνητικές τιμές τοποθετούν τη σκιά προς τα αριστερά (μετατόπιση-χ) και παραπανω (αντιστάθμιση-υ) το αντικείμενο.

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

Το χρώμα της σκιάς καθορίζεται ως. Εάν δεν έχετε καθορίσει ένα χρώμα, ακολουθεί την τιμή του χρώμα ιδιοκτησία.

Πότε είναι χρήσιμη η αναπτυσσόμενη σκιά CSS;

Μπορεί να το γνωρίζετε ήδη κουτί-σκιά κάνει τη δουλειά αρκετά καλά. Λοιπόν, μπορείτε να σκεφτείτε, γιατί χρειαζόμαστε σκίαση καθόλου? Υπάρχουν πολλές περιπτώσεις όπου το σκίαση( ) η λειτουργία είναι σωτήρια. Ας ρίξουμε μια ματιά σε μερικά από αυτά:

Μη ορθογώνια σχήματα

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

HTML

CSS

.star-img img {
οθόνη: inline-block;
Ύψος: 15 εκ.
πλάτος: 25em;
}
.box-shadow {
χρώμα: κόκκινο;
κουτί-σκιά: 0,60em 0,60em 0,2em;
}
.σκίαση {
φίλτρο: drop-shadow (0,60em 0,60em 0,2em);
}

Παραγωγή:

Όταν συγκρίνουμε και τα δύο αποτελέσματα, είναι προφανές ότι α κουτί-σκιά δίνει μια ορθογώνια σκιά. Επίσης, δεν έχει σημασία αν η εικόνα είναι διαφανής ή έχει ήδη φόντο. Αφ 'ετέρου, σκίαση σας επιτρέπει να δημιουργήσετε μια σκιά που να ταιριάζει με το σχήμα της ίδιας της εικόνας.

Οι περιοριστικοί παράγοντες είναι ότι το σκίαση( ) η συνάρτηση δέχεται όλες τις παραμέτρους του τύπου εκτός από το ένθεση λέξη-κλειδί και εξάπλωση παράμετρος.

Ομαδοποιημένα στοιχεία

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

HTML

Ζήσε τη στιγμή

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

Βασικό CSS

σώμα {
γέμιση: 5em 1em;
γραμματοσειρά οικογένειας: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
«Lucida Sans Unicode», Γενεύη, Verdana, sans-serif;
}
h2 {
μέγεθος γραμματοσειράς: 2rem;
}
Π {
μέγεθος γραμματοσειράς: 0,8 rem;
}
.parent-container {
οθόνη: flex;
flex-direction: στήλη;
ύψος: 17 εκ.
πλάτος: 50em;
}
.image-container img {
πλάτος: 15em;
θέση: απόλυτη;
z-index: 1;
κορυφή: 2em;
αριστερά: 1,5 εκ.
}
.text-container {
χρώμα: rgb (255, 236, 236);
χρώμα φόντου: rgb (141 0 35);
πλάτος: 30rem;
γέμιση: 3εκ.
align-self: flex-end;
θέση: σχετική;
}

Τώρα, εφαρμόστε το κουτί-σκιά και σκίαση για να δεις τη διαφορά.

.σκίαση {
φίλτρο: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.κουτί,
.box img {
box-shadow: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Παραγωγή:

Όπως μπορείτε να δείτε, το κουτί-σκιά εφαρμόζεται σε κάθε στοιχείο ξεχωριστά ενώ το σκίαση ομαδοποιεί και τα δύο και εφαρμόζει τη σκιά.

Αποκομμένα στοιχεία

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

HTML

CSS

.parent-container {
φίλτρο: drop-shadow (0rem 0rem 1,5rem maroon);
}
.clipped-element {
πλάτος: 50em;
Ύψος: 50 εκ.
περιθώριο: 0 αυτόματο;
φόντο-εικόνα: url (smiling-girl.jpg);
διαδρομή κλιπ: κύκλος (50%).
Μέγεθος φόντου: εξώφυλλο;
background-repeat: no-repeat;
}

Παραγωγή:

Κόψαμε το 50% της εικόνας με μια κυκλική διαδρομή. Επομένως, ο φίλτρο πτώσης σκιάς εφαρμόζεται μόνο στο ορατό μέρος της εικόνας. Δεν είναι φοβερό;

Περιορισμοί και Διαφορές

Όπως συζητήσαμε παραπάνω, σκίαση δεν υποστηρίζει το εξάπλωση παράμετρος. Αυτό σημαίνει ότι η δημιουργία ενός εφέ περιγράμματος δεν θα ήταν δυνατή χρησιμοποιώντας το σκίαση( ) λειτουργεί γιατί σκοτώνεται παντού. Επίσης, αποδίδει διαφορετικά εφέ σκιάς από το κουτί-σκιά και κείμενο-σκιά (με τις ίδιες παραμέτρους). Μπορεί να αισθάνεστε ότι οι διαφορές μεταξύ των κουτί-σκιά και σκίαση βράσει μέχρι το Μοντέλο CSS Box. Ο ένας το ακολουθεί ενώ ο άλλος όχι. Εδώ είναι ένα παράδειγμα:

HTML

Κάθε άρθρο MUO θα σας φέρει ένα βήμα πιο κοντά.


Κάθε άρθρο MUO θα σας φέρει ένα βήμα πιο κοντά.



Κάθε άρθρο MUO θα σας φέρει ένα βήμα πιο κοντά.

Βασικό CSS

σώμα {
γέμιση: 5em 1em;
γραμματοσειρά οικογένειας: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
«Lucida Sans Unicode», Γενεύη, Verdana, sans-serif;
}
.parent-container {
πλάτος: 72rem;
}
Π {
μέγεθος γραμματοσειράς: 3em;
στυλ γραμματοσειράς: έντονη γραφή;
}

Εφαρμογή εφέ σκιών

.σκίαση {
φίλτρο: drop-shadow (0,5em 0,5em 0,1em #555);
}
.box-shadow {
κουτί-σκιά: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
text-shadow: 0,5em 0,5em 0,1em #555;
}

Παραγωγή:

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

Υποστήριξη προγράμματος περιήγησης

ο σκίαση( ) Η λειτουργία υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης εκτός από τα παλαιότερα προγράμματα περιήγησης όπως ο Internet Explorer. Αν και δεν είναι κάτι που θα παρεμπόδιζε σοβαρά το UX, μπορείτε να προσθέσετε ένα ερώτημα χαρακτηριστικών με α κουτί-σκιά εναλλακτική.

Πειραματιστείτε με διαφορετικά εφέ σκιάς

Η δημοτικότητα του κουτί-σκιά είναι αρκετά προφανές λόγω του πλήθους περιπτώσεων χρήσης. Ωστόσο, το σκίαση( ) η λειτουργία δεν χρησιμοποιείται σε μεγάλο βαθμό. Ελπίζουμε ότι θα πειραματιστείτε με διαφορετικά εφέ σκιάς και θα προσπαθήσετε να τα εφαρμόσετε σκίαση στα μελλοντικά σας έργα.

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

Πώς να χρησιμοποιήσετε το πλαίσιο-σκιά CSS: 13 κόλπα και παραδείγματα

Τα ήπια κουτιά φαίνονται βαρετά. Διαμορφώστε τα με το εφέ κουτιού-σκιάς CSS!

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα