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

Η ιδιότητα «box-shadow» CSS προσθέτει εφέ σκιάς γύρω από ένα στοιχείο. Αυτό μπορεί να χρησιμοποιηθεί για να προσθέσει βάθος και διάσταση σε ένα στοιχείο ή για να το κάνει να ξεχωρίζει από το υπόλοιπο περιεχόμενο μιας σελίδας.

Η ιδιότητα "box-shadow" παίρνει έως και τέσσερις τιμές, οι οποίες καθορίζουν τη μετατόπιση, το θάμπωμα και την εξάπλωση της σκιάς και το χρώμα της σκιάς.

1. Μετατόπιση :Οι τιμές μετατόπισης καθορίζουν την οριζόντια και κάθετη απόσταση της σκιάς από το στοιχείο. Οι θετικές τιμές μετακινούν τη σκιά προς τα δεξιά και προς τα κάτω, ενώ οι αρνητικές τιμές μετακινούν τη σκιά προς τα αριστερά και προς τα πάνω.

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

3. Διάδοση :Η τιμή spread προσδιορίζει την ποσότητα του spread που εφαρμόζεται στη σκιά. Μια υψηλότερη τιμή εξάπλωσης θα δημιουργήσει μια ευρύτερη σκιά, ενώ μια χαμηλότερη τιμή εξάπλωσης θα δημιουργήσει μια πιο στενή σκιά.

4. Χρώμα :Η τιμή χρώματος καθορίζει το χρώμα της σκιάς. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε έγκυρη τιμή χρώματος CSS, όπως ένα όνομα με όνομα, μια δεκαεξαδική τιμή ή μια τιμή RGB.

Ακολουθούν μερικά παραδείγματα για το πώς να χρησιμοποιήσετε την ιδιότητα "box-shadow" για να δημιουργήσετε διαφορετικούς τύπους σκιών:

- Βασική σκιά :

```css

box-shadow:5px 5px 5px #888888;

```

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

- Εισαγωγή σκιάς :

```css

box-shadow:inset 5px 5px 5px #888888;

```

Αυτό θα δημιουργήσει μια ένθετη σκιά, που σημαίνει ότι η σκιά θα σχεδιαστεί μέσα στο στοιχείο αντί για έξω από αυτό. Η σκιά θα έχει το ίδιο μέγεθος και σχήμα με το στοιχείο και θα είναι μια απόχρωση του γκρι.

- Πολλαπλές σκιές :

```css

box-shadow:5px 5px 5px #888888, 10px 10px 10px #444444;

```

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

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