Το CSS είναι γεμάτο επιλογές για να βελτιώσετε την εμφάνιση των ιστοσελίδων σας. Οι σκιές κειμένου και πλαισίου είναι κύρια παραδείγματα. Προσφέρουν παρόμοια αποτελέσματα με τις σκιές που βρίσκονται σε λογισμικό επεξεργασίας εικόνων όπως το Photoshop.
Πώς λειτουργούν όμως οι σκιές CSS; Ας βουτήξουμε αμέσως.
Πώς να χρησιμοποιήσετε το CSS Box Shadow
Μπορείτε να εφαρμόσετε μια σκιά πλαισίου CSS με μία μόνο γραμμή CSS που περιέχει ένα εύρος έως και έξι τιμών. Η σειρά των τιμών είναι κρίσιμη για να λειτουργήσει η σκιά του πλαισίου CSS και μοιάζει με αυτό:
κουτί-σκιά: offset-x offset-y θαμπάδα εξάπλωση χρώμα ένθετο?Ας ρίξουμε μια ματιά σε καθεμία από τις τιμές με τη σειρά.
Θέση σκιάς πλαισίου CSS
Οι τιμές offset-x και offset-y ελέγχουν τη θέση της σκιάς του κουτιού σας. Η τιμή offset-x αντιπροσωπεύει την οριζόντια θέση της σκιάς, ενώ η μετατόπιση-y είναι η κατακόρυφη μετατόπιση.
κουτί-σκιά: 10px 10px;Οι θετικές τιμές έχουν ως αποτέλεσμα μια σκιά κάτω και δεξιά του στοιχείου.
Μπορείτε επίσης να χρησιμοποιήσετε αρνητικές τιμές για h-offset και v-offset:
κουτί-σκιά: -10px -10px;Μια αρνητική μετατόπιση h μετακινεί τη σκιά προς τα αριστερά, ενώ μια αρνητική μετατόπιση v την μετακινεί προς τα πάνω:
Θάμπωμα σκιάς πλαισίου CSS
Όπως μπορείτε να δείτε, προσθέτοντας το h-offset και το v-offset στη σκιά σας δημιουργείται μια συμπαγής σκιά χωρίς φτερά. Η τιμή θαμπώματος θολώνει τη σκιά του πλαισίου CSS και τίθεται σε ισχύ εάν παρέχετε μια τρίτη τιμή:
box-shadow: 10px 10px 20px;Όσο μεγαλύτερος είναι ο αριθμός που προσθέτετε στην τιμή θαμπώματος, τόσο πιο θολή θα είναι η σκιά του πλαισίου CSS. Αυτή η τιμή δεν μπορεί να είναι αρνητική.
CSS Box Shadow Spread
Η τιμή spread σάς επιτρέπει να αλλάξετε το μέγεθος της σκιάς σας χωρίς να αλλάξετε τη θέση της.
box-shadow: 10px 10px 20px 30px;Μια θετική τιμή spread θα κάνει τη σκιά του πλαισίου CSS σας μεγαλύτερη, ενώ μια αρνητική τιμή θα την κάνει μικρότερη.
Χρώμα σκιάς πλαισίου CSS
Οι σκιές του πλαισίου CSS είναι προεπιλεγμένες στο χρώμα κειμένου του στοιχείου, αλλά μπορείτε να το παρακάμψετε προσθέτοντας ένα χρώμα:
κουτί-σκιά: 10px 10px 20px 10px #0000ff;Το χρώμα που χρησιμοποιείτε πρέπει να είναι σε νομική μορφή χρώματος CSS, όπως δεκαεξαδικός κώδικας, κωδικός RGB ή προκαθορισμένο χρώμα. Μπορείς μάθετε για τους δεκαεξαδικούς κωδικούς και άλλες νόμιμες επιλογές χρωμάτων CSS πριν ξεκινήσετε με τις σκιές σας.
CSS Box Shadow Inset
Οι σκιές πλαισίου CSS από προεπιλογή δεν βρίσκονται εκτός του αντιστοιχισμένου στοιχείου τους. Προσθέτοντας ένα ένθετο στην ιδιότητα box-shadow, μπορείτε να εμφανίσετε τη σκιά στο εσωτερικό του στοιχείου.
κουτί-σκιά: 10px 10px 20px 10px #0000ff ένθετο;Αυτή είναι μια προκαθορισμένη τιμή κειμένου. απλά προσθέστε ή αφαιρέστε το για να ορίσετε την τιμή.
Πώς να χρησιμοποιήσετε τη σκιά κειμένου CSS
Οι σκιές κειμένου CSS είναι σαν τις σκιές πλαισίου, αν και έχουν λιγότερες τιμές για τροποποίηση. Η σύνταξη για μια σκιά κειμένου CSS μοιάζει με αυτό:
κείμενο-σκιά: μετατόπιση-x μετατόπιση-y θάμπωμα-χρώμα ακτίνας.Πώς όμως λειτουργούν αυτές οι αξίες;
Θέση σκιάς κειμένου CSS
Οι μετατοπίσεις σκιών κειμένου CSS λειτουργούν πολύ παρόμοια με τις ίδιες τιμές σκιάς πλαισίου:
κείμενο-σκιά: 10px 10px;Οι θετικές τιμές θα τοποθετήσουν τη σκιά κάτω και δεξιά του κειμένου.
Οι αρνητικές τιμές κάνουν το αντίθετο, τοποθετώντας τη σκιά πάνω και αριστερά του κειμένου.
text-shadow: -10px -10px;Μπορείτε να συνδυάσετε αρνητικές και θετικές τιμές για να τοποθετήσετε τέλεια τη σκιά κειμένου CSS.
CSS Text Shadow Blur Radius
Η ακτίνα θαμπώματος σκιάς κειμένου CSS σάς δίνει τη δυνατότητα να θολώσετε τη σκιά πίσω από το κείμενό σας.
text-shadow: 10px 10px 10px; Η προεπιλογή για αυτήν την τιμή είναι 0 (χωρίς θάμπωμα).
Χρώμα σκιάς κειμένου CSS
Από προεπιλογή, οι σκιές κειμένου CSS ταιριάζουν με το χρώμα του κειμένου. Μπορείτε να αλλάξετε το χρώμα του κειμένου σας προσθέτοντάς το στο τέλος της ιδιότητας σκιάς κειμένου CSS.
κείμενο-σκιά: 10px 10px 10px #0000ff;Όπως τα χρώματα σκιών πλαισίου CSS, πρέπει να χρησιμοποιήσετε ένα νόμιμο χρώμα CSS για αυτό.
Παραδείγματα σχεδίασης πλαισίου CSS και σκιάς κειμένου
Μπορείτε να αρχίσετε να πειραματίζεστε με τη χρήση του πλαισίου CSS και των σκιών κειμένου μόλις κατανοήσετε τα βασικά. Οι παρακάτω ιδέες θα σας εμπνεύσουν να βρείτε τους δικούς σας δημιουργικούς τρόπους για να χρησιμοποιήσετε αυτές τις ιδιότητες CSS.
Περιγράμματα διπλού χρώματος με δύο σκιές πλαισίου CSS
Μπορείτε να προσθέσετε περισσότερες από μία σκιές πλαισίου ή σκιές κειμένου σε ένα στοιχείο HTML. Εφόσον έχουν κόμματα μεταξύ τους, μπορείτε να προσθέσετε νέες σκιές σε μία ιδιότητα.
κουτί-σκιά: 30px 30px#0000 επ, -30 εικονοστοιχεία-30 εικονοστοιχεία 0px#00ff00;Αυτό το περίγραμμα διπλού χρώματος είναι ένα καλό παράδειγμα αυτού. Δύο σκιές πλαισίου CSS με αντίθετες θέσεις και χωρίς θάμπωμα/εξάπλωση δημιουργούν ένα εξαιρετικό δημιουργικό περίγραμμα.
Διπλές σκιές κειμένου CSS για δραματικά εφέ
Με παρόμοιο τρόπο με την παραπάνω ιδέα, μπορείτε να προσθέσετε και να τοποθετήσετε πολλές σκιές κειμένου για ενδιαφέροντα αποτελέσματα.
text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;Αυτό το παράδειγμα δείχνει μια γραμμή κειμένου με μια σκιά πάνω και μια σκιά κάτω, και οι δύο έχουν τιμές χρώματος που βασίζονται σε κείμενο.
Πολύχρωμα φόντο με ένθετες σκιές πλαισίου CSS
Το CSS είναι αρκετά ισχυρό ώστε να δημιουργεί μοναδικά και ενδιαφέροντα στοιχεία χωρίς εξωτερικά αρχεία. Η χρήση μιας ένθετης σκιάς πλαισίου CSS ως φόντο είναι ένα εξαιρετικό παράδειγμα αυτού.
κουτί-σκιά: 20px 10px 10px 40px #000000 ένθετο, -50px -30px 8px 60px ένθετο γκρι, 30px 20px 6px 90px ανοιχτό γκρι ένθετο;Αυτό το κουτί έχει λευκό φόντο, μαζί με τρεις ένθετες σκιές σε διαφορετικά χρώματα. Οι σκιές αλληλοκαλύπτονται για να δημιουργήσουν ένα μοναδικό φόντο.
Η περαιτέρω ενίσχυση αυτού του αποτελέσματος είναι απλή υπόθεση προσθέτοντας μια κομψή διαβάθμιση φόντου CSS στο στοιχείο σου.
CSS Box Shadows & Text Shadows για δημιουργικό σχεδιασμό ιστοσελίδων
Οι σκιές πλαισίων CSS και κειμένου είναι εύκολες στη χρήση αφού γνωρίζετε πώς να εργαστείτε μαζί τους. Τώρα έχετε τα εργαλεία που χρειάζεστε για να αρχίσετε να εργάζεστε στα δικά σας σχέδια, αλλά θα πρέπει να συνεχίσετε να ερευνάτε το CSS για να βελτιώσετε τις δεξιότητές σας.