CodeKitHubΤι είναι αυτό το εργαλείο;
Το box-shadow είναι η ιδιότητα CSS που σχεδιάζει μια σκιά πίσω από (ή μέσα σε) ένα στοιχείο. Γραμμένη με το χέρι παίρνει έως πέντε τιμές με σειρά — οριζόντια μετατόπιση, κάθετη μετατόπιση, ακτίνα θολώματος, ακτίνα εξάπλωσης, και χρώμα — συν μια προαιρετική λέξη-κλειδί inset, όλα εύκολο να μπερδέψεις ή να τα κάνεις πολύ διακριτικά/πολύ βαριά στην πρώτη προσπάθεια.
Αυτό το εργαλείο το μετατρέπει σε άμεσο χειρισμό: σύρε ένα ρυθμιστικό, δες τη σκιά να αλλάζει στο ζωντανό κουτί προεπισκόπησης, και αντέγραψε το ακριβές CSS μόλις φαίνεται σωστό. Ο επιλογέας χρώματος συν ένα ρυθμιστικό αδιαφάνειας παράγει αυτόματα μια σωστή τιμή rgba(), αφού οι διάφανες σκιές γενικά φαίνονται καλύτερα από τις πλήρως αδιαφανείς.
Γιατί να το χρησιμοποιήσετε;
- Η ζωντανή προεπισκόπηση ενημερώνεται άμεσα καθώς προσαρμόζεις οποιοδήποτε στοιχείο ελέγχου — δες την ακριβή σκιά πριν δεσμευτείς στον κώδικα.
- Πλήρης έλεγχος πάνω σε offset-x, offset-y, θόλωμα, εξάπλωση, χρώμα και αδιαφάνεια σε ένα μέρος.
- Ένα κλικ προσθέτει inset για εμφάνιση πιεσμένου / βυθισμένου αντί για αιωρούμενη σκιά πτώσης.
- Παράγει CSS έτοιμο για αντιγραφή-επικόλληση με το χρώμα ήδη μετατρεμένο σε rgba() στην επιλεγμένη σου αδιαφάνεια.
- Τρέχει εξ ολοκλήρου στο πρόγραμμά σου περιήγησης — τίποτα από όσα ρυθμίζεις δεν ανεβαίνει πουθενά.
- Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητό.
Πώς χρησιμοποιείται
- Όρισε offset-x και offset-y για να τοποθετήσεις τη σκιά — θετικές τιμές τη σπρώχνουν δεξιά/κάτω, αρνητικές τιμές τη σπρώχνουν αριστερά/πάνω.
- Αύξησε την ακτίνα θολώματος για να απαλύνεις την άκρη της σκιάς· αύξησε την εξάπλωση για να κάνεις τη σκιά μεγαλύτερη από το ίδιο το στοιχείο.
- Επίλεξε χρώμα και προσάρμοσε την αδιαφάνεια — οι περισσότερες ρεαλιστικές σκιές χρησιμοποιούν 15–40% αδιαφάνεια αντί για συμπαγές μαύρο.
- Επίλεξε 'inset' αν θέλεις η σκιά να εμφανίζεται μέσα στο περίγραμμα του στοιχείου αντί πίσω του.
- Αντέγραψε το δημιουργημένο CSS και επικόλλησέ το στο φύλλο στιλ σου.
Παράδειγμα
Είσοδος
Μετατόπιση: 0px, 10px · Θόλωμα: 20px · Εξάπλωση: 0px · Χρώμα: μαύρο σε 35% αδιαφάνειαΈξοδος
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Μια απαλή σκιά ακριβώς κάτω από το στοιχείο χωρίς οριζόντια μετατόπιση — ένα από τα πιο κοινά στιλ σκιάς κάρτας/κουμπιού.
Μονή σκιά εναντίον στρωματωτών σκιών
Αυτό το εργαλείο φτιάχνει ένα μόνο επίπεδο σκιάς, που καλύπτει τη συντριπτική πλειοψηφία της πραγματικής χρήσης — κουμπιά, κάρτες, modal και dropdown σχεδόν πάντα χρησιμοποιούν μία σκιά. Το CSS υποστηρίζει πολλαπλές σκιές χωρισμένες με κόμμα στο ίδιο στοιχείο για πιο περίπλοκα εφέ βάθους (π.χ. μια σφιχτή, σκούρα σκιά στρωματωμένη κάτω από μια απαλή, φαρδιά), αλλά αυτό είναι μια βελτίωση που μπορείς να προσθέσεις με το χέρι: δημιούργησε μία σκιά εδώ, μετά διπλασίασε τη γραμμή, προσάρμοσε το δεύτερο σύνολο τιμών, και ένωσέ τα με κόμμα.
Κοινά μοτίβα box-shadow
- Διακριτική ανύψωση κάρτας: μικρή μετατόπιση (0–4px), μέτριο θόλωμα (8–16px), 10–20% αδιαφάνεια μαύρου.
- Ανυψωμένο modal/dropdown: μεγαλύτερη μετατόπιση (4–10px) και θόλωμα (20–30px), 20–35% αδιαφάνεια για πιο έντονη αίσθηση αιώρησης.
- Πιεσμένο/εσωτερικό κουμπί: επίλεξε inset, χρησιμοποίησε μικρή μετατόπιση με αρνητική αίσθηση και μέτριο θόλωμα ώστε η σκιά να διαβάζεται ως βαθούλωμα αντί για ανύψωση.
- Έγχρωμη λάμψη: επίλεξε χρώμα μάρκας αντί για μαύρο, ανέβασε την αδιαφάνεια σε 40–60%, και αύξησε ελαφρώς την εξάπλωση για απαλό εφέ λάμψης γύρω από κουμπιά.
- Αιχμηρή/σκληρή σκιά: όρισε θόλωμα στο 0 και εξάπλωση στο 0 για ένα συμπαγές, μετατοπισμένο περίγραμμα αντί για απαλή σκιά.
Συνδυασμός με στρογγυλεμένες γωνίες
Οι σκιές και οι στρογγυλεμένες γωνίες χρησιμοποιούνται μαζί συνεχώς — κάρτες, κουμπιά και modal σχεδόν πάντα συνδυάζουν και τα δύο. Χρησιμοποίησε τον Δημιουργό Border Radius για να στρογγυλέψεις τις γωνίες του ίδιου στοιχείου, μετά εφάρμοσε και τις δύο δημιουργημένες δηλώσεις CSS μαζί.
Συχνές ερωτήσεις
Ποια είναι η διαφορά ανάμεσα σε θόλωμα και εξάπλωση;
Η ακτίνα θολώματος απαλύνει την άκρη της σκιάς — υψηλότερες τιμές την κάνουν να ξεθωριάζει πιο σταδιακά. Η ακτίνα εξάπλωσης αλλάζει το μέγεθος της σκιάς πριν το θόλωμα — θετική εξάπλωση κάνει τη σκιά μεγαλύτερη από το στοιχείο σε όλες τις πλευρές, αρνητική εξάπλωση τη συρρικνώνει. Οι περισσότερες καθημερινές σκιές χρησιμοποιούν θόλωμα με την εξάπλωση στο 0.
Γιατί να χρησιμοποιήσω rgba() αντί για απλό χρώμα hex για τη σκιά;
Μια πλήρως αδιαφανής σκιά φαίνεται σκληρή και μη ρεαλιστική — οι πραγματικές σκιές είναι πάντα κάπως διάφανες, αφήνοντας ό,τι υπάρχει πίσω τους να φαίνεται ελαφρώς. Το rgba() σου επιτρέπει να ορίσεις αυτή τη διαφάνεια απευθείας, γι' αυτό αυτό το εργαλείο πάντα παράγει το χρώμα με τιμή alpha αντί για συμπαγές hex.
Τι κάνει η λέξη-κλειδί inset;
Χωρίς inset, η σκιά σχεδιάζεται έξω από το περίγραμμα του στοιχείου, σαν το στοιχείο να αιωρείται πάνω από τη σελίδα. Με inset, η σκιά σχεδιάζεται μέσα στο περίγραμμα αντ' αυτού, κάνοντας το στοιχείο να φαίνεται πιεσμένο ή βυθισμένο — συνήθως χρησιμοποιείται για ενεργές/πιεσμένες καταστάσεις κουμπιών ή πεδία εισαγωγής.
Μπορώ να στοιβάξω περισσότερες από μία σκιά στο ίδιο στοιχείο;
Ναι — το CSS box-shadow δέχεται λίστα χωρισμένη με κόμμα, και τα προγράμματα περιήγησης τις αποδίδουν με τη σειρά που δίνονται (η πρώτη σκιά είναι πάνω). Μια κοινή τεχνική στρώνει μια σφιχτή, σκουρότερη σκιά με μια φαρδύτερη, απαλότερη για πιο ρεαλιστικό βάθος από ό,τι θα έδινε καθεμία μόνη της.
Επηρεάζει το box-shadow τη διάταξη ή μόνο την εμφάνιση;
Μόνο την εμφάνιση — το box-shadow ποτέ δεν επηρεάζει το μέγεθος του στοιχείου ή τη θέση των γύρω στοιχείων, ακόμα και με μεγάλες τιμές θολώματος ή εξάπλωσης. Αν η σκιά κόβεται οπτικά, έλεγξε για overflow: hidden σε γονικό στοιχείο αντί για τις δικές της τιμές.