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

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

Μπορείτε να αλλάξετε το χρώμα φόντου ενός στοιχείου, το στυλ γραμματοσειράς, το χρώμα γραμματοσειράς, το πλαίσιο σκιάς, το περιθώριο και πολλές άλλες ιδιότητες χρησιμοποιώντας CSS. Θα σας καθοδηγήσουμε σε μερικές αποτελεσματικές χρήσεις του box-shadow σε αυτόν τον οδηγό.

Τι είναι το CSS box-shadow;

ο κουτί-σκιά η ιδιότητα χρησιμοποιείται για την εφαρμογή μιας σκιάς σε στοιχεία HTML. Είναι μια από τις πιο χρησιμοποιούμενες ιδιότητες CSS για στυλ κουτιών ή εικόνων.

Σύνταξη CSS:

box-shadow: [οριζόντια μετατόπιση] [κατακόρυφη μετατόπιση] [ακτίνα θόλωσης] [προαιρετική ακτίνα εξάπλωσης] [χρώμα];

1. οριζόντια μετατόπιση: Εάν η οριζόντια μετατόπιση είναι θετική, η σκιά θα είναι στα δεξιά του πλαισίου. Και αν η οριζόντια μετατόπιση είναι αρνητική, η σκιά θα βρίσκεται στα αριστερά του κουτιού.
instagram viewer
2. κατακόρυφη μετατόπιση: Εάν η κατακόρυφη μετατόπιση είναι θετική, η σκιά θα είναι κάτω από το πλαίσιο. Και αν η κατακόρυφη μετατόπιση είναι αρνητική, η σκιά θα βρίσκεται πάνω από το κουτί.
3. ακτίνα θαμπώματος: Όσο υψηλότερη είναι η τιμή, τόσο πιο θαμπή θα είναι η σκιά.
4. ακτίνα εξάπλωσης: Δηλώνει πόσο πρέπει να εξαπλωθεί η σκιά. Οι θετικές τιμές αυξάνουν το spread της σκιάς, οι αρνητικές τιμές μειώνουν το spread.
5. Χρώμα: Δηλώνει το χρώμα της σκιάς. Επίσης, υποστηρίζει οποιαδήποτε μορφή χρώματος όπως rgba, hex ή hsla.

Οι παράμετροι θαμπώματος, εξάπλωσης και χρώματος είναι προαιρετικές. Το πιο ενδιαφέρον μέρος του box-shadow είναι ότι μπορείτε να χρησιμοποιήσετε κόμμα για να διαχωρίσετε τις τιμές box-shadow οποιαδήποτε στιγμή. Αυτό μπορεί να χρησιμοποιηθεί για τη δημιουργία πολλαπλών περιγραμμάτων και σκιών στα στοιχεία.

1. Προσθέστε μια αμυδρό πλαίσιο-σκιά στα αριστερά, δεξιά και κάτω μέρος του πλαισίου

Μπορείτε να προσθέσετε πολύ σκοτεινές σκιές σε τρεις πλευρές (αριστερά, δεξιά και κάτω) του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο σκιάς CSS με το στοιχείο HTML προορισμού:

box-shadow: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Παραγωγή:

2. Προσθέστε ένα Dim-box σκιά στο All Sides

Μπορείτε να προσθέσετε ελαφριές σκιές σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CS-shadow με το στοιχείο HTML προορισμού σας:

box-shadow: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Παραγωγή:

3. Προσθέστε ένα λεπτό πλαίσιο-σκιά στο κάτω μέρος και στη δεξιά πλευρά

Μπορείτε να προσθέσετε σκιές στην κάτω και τη δεξιά πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CS-shadow με το στοιχείο HTML προορισμού:

box-shadow: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Παραγωγή:

4. Προσθέστε ένα σκούρο πλαίσιο-σκιά σε όλες τις πλευρές

Μπορείτε να προσθέσετε σκοτεινή σκιά σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CS-shadow με το στοιχείο HTML προορισμού:

box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Παραγωγή:

5. Προσθέστε το Spread Shadow σε όλες τις πλευρές

Μπορείτε να προσθέσετε σκιά διάδοσης σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας την ακόλουθη εντολή με το στοιχείο HTML προορισμού:

box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

Παραγωγή:

6. Προσθέστε μια λεπτή σκιά περιγράμματος σε όλες τις πλευρές

Μπορείτε να προσθέσετε μια απλή σκιά περιγράμματος σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο CSS με το στοιχείο HTML προορισμού:

box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px ένθετο;

Παραγωγή:

7. Προσθέστε ένα πλαίσιο-σκιά στην κάτω και την αριστερή πλευρά

Μπορείτε να προσθέσετε μια σκιά στην κάτω και την αριστερή πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CS-shadow με το στοιχείο HTML προορισμού:

πλαίσιο σκιάς: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Παραγωγή:

8. Προσθέστε μια αμυδρό πλαίσιο-σκιά στην κορυφή και την αριστερή πλευρά, τη σκοτεινή σκιά στην κάτω και τη δεξιά πλευρά

Μπορείτε να προσθέσετε μια ελαφριά σκιά στην επάνω και την αριστερή πλευρά του κουτιού καθώς και μια σκοτεινή σκιά στην κάτω και τη δεξιά πλευρά του κουτιού χρησιμοποιώντας το ακόλουθο CSS με το στοιχείο HTML προορισμού σας:

πλαίσιο σκιάς: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Παραγωγή:

9. Προσθέστε μια λεπτή, έγχρωμη σκιά περιγράμματος σε όλες τις πλευρές

Μπορείτε να προσθέσετε μια απλή έγχρωμη σκιά περιγράμματος σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το παρακάτω πλαίσιο CS-shadow με το στοιχείο HTML προορισμού:

πλαίσιο σκιάς: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Παραγωγή:

10. Προσθέστε πολλές χρωματιστές σκιές περιγράμματος στην κάτω και την αριστερή πλευρά του κουτιού

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

box-shadow: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px ένθετο;

Παραγωγή:

11. Προσθέστε πολλές χρωματιστές σκιές περιγράμματος στο κάτω μέρος

Μπορείτε να προσθέσετε πολλές χρωματιστές σκιές περιγράμματος στο κάτω μέρος του πλαισίου χρησιμοποιώντας το παρακάτω πλαίσιο CS-shadow με το στοιχείο HTML προορισμού:

box-shadow: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170), 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Παραγωγή:

12. Προσθέστε πολλές χρωματιστές σκιές περιγράμματος στην κάτω και τη δεξιά πλευρά του κουτιού

Μπορείτε να προσθέσετε πολλές χρωματιστές σκιές περιγράμματος στην κάτω και δεξιά πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο CSS με το στοιχείο HTML προορισμού:

box-shadow: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170), 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Παραγωγή:

13. Προσθέστε ελαφριές σκιές στην αριστερή και τη δεξιά πλευρά, απλώστε τη σκιά στο κάτω μέρος

Μπορείτε να προσθέσετε ελαφριές σκιές στην αριστερή και τη δεξιά πλευρά και να απλώσετε τη σκιά στο κάτω μέρος του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CS-shadow με το στοιχείο HTML προορισμού:

box-shadow: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba (0, 0) 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px 16px;

Παραγωγή:

Ενσωμάτωση CSS με μια σελίδα HTML

Τώρα ξέρετε πώς να προσθέσετε δροσερά εφέ box-shadow χρησιμοποιώντας CSS, μπορείτε εύκολα να τα ενσωματώσετε με στοιχεία HTML με πολλούς τρόπους.

Σχετιζομαι με: 11 Χρήσιμα εργαλεία για έλεγχο, καθαρισμό και βελτιστοποίηση αρχείων CSS

Μπορείτε να το ενσωματώσετε στην ίδια τη σελίδα HTML ή να το επισυνάψετε ως ξεχωριστό έγγραφο. Υπάρχουν τρεις τρόποι για να συμπεριλάβετε CSS σε ένα έγγραφο HTML:

Εσωτερικό CSS

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

Στυλ 4

Ενσωματωμένο CSS

Το Inline CSS χρησιμοποιείται για την προσθήκη μοναδικών κανόνων στυλ σε ένα στοιχείο HTML. Μπορεί να χρησιμοποιηθεί με ένα στοιχείο HTML μέσω του στυλ Χαρακτηριστικό. Το χαρακτηριστικό style περιέχει ιδιότητες CSS με τη μορφή "αξία περιουσίας" χωρισμένο με ερωτηματικό (;).

Σχετιζομαι με: Μάθετε πώς να δημιουργείτε δισδιάστατους ιστότοπους με πλέγμα CSS

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

Στυλ 4

Εξωτερικό CSS

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

Δημιουργήστε ένα νέο αρχείο CSS με το .css επέκταση. Τώρα προσθέστε τον ακόλουθο κώδικα CSS μέσα σε αυτό το αρχείο:

. επικεφαλίδα {
text-align: center;
}
πλαίσιο εικόνας {
οθόνη: μπλοκ;
margin-left: auto;
margin-right: auto;
box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Τέλος, δημιουργήστε ένα έγγραφο HTML και προσθέστε τον ακόλουθο κώδικα μέσα σε αυτό το έγγραφο:

Στυλ 4

Σημειώστε ότι το αρχείο CSS συνδέεται με το έγγραφο HTML μέσω ετικέτα και href Χαρακτηριστικό.

Και οι τρεις παραπάνω μέθοδοι (Εσωτερικό CSS, Inline CSS και External CSS) θα εμφανίσουν την ίδια έξοδο-

Κάντε την ιστοσελίδα σας κομψή με CSS

Χρησιμοποιώντας CSS έχετε τον πλήρη έλεγχο του στυλ της ιστοσελίδας σας. Μπορείτε να προσαρμόσετε κάθε στοιχείο HTML χρησιμοποιώντας διάφορες ιδιότητες CSS. Οι προγραμματιστές από όλο τον κόσμο συμβάλλουν στις ενημερώσεις CSS και το έχουν κάνει από την κυκλοφορία του το 1996. Ως εκ τούτου, οι αρχάριοι έχουν πολλά να μάθουν!

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

10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

Θέλετε να μάθετε περισσότερα σχετικά με τη χρήση CSS; Δοκιμάστε αυτά τα βασικά παραδείγματα κώδικα CSS και, στη συνέχεια, εφαρμόστε τα στις δικές σας ιστοσελίδες.

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

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