Η ιδιότητα box-shadow του CSS αποτελεί ένα από τα βασικότερα εργαλεία στη σχεδίαση ιστοσελίδων για τη δημιουργία βάθους, την έμφαση σε στοιχεία της διεπαφής και τη βελτίωση της οπτικής ιεραρχίας. Η Γεννήτρια Box Shadow επιτρέπει τον ακριβή σχεδιασμό προσαρμοσμένων σκιών μέσω διαδραστικών ρυθμιστικών, την προσθήκη πολλαπλών επιπέδων για ρεαλιστικά εφέ και την άμεση εξαγωγή του κώδικα CSS.
Η λειτουργία των παραμέτρων της σκιάς
Για τη διαμόρφωση μιας σκιάς απαιτείται η κατανόηση των φυσικών ιδιοτήτων που καθορίζουν τη συμπεριφορά της. Κάθε επίπεδο σκιάς ελέγχεται από τις ακόλουθες παραμέτρους:
- Οριζόντια μετατόπιση: Μετακινεί τη σκιά στον οριζόντιο άξονα. Οι τιμές κυμαίνονται από -50px (αριστερά) έως 50px (δεξιά).
- Κάθετη μετατόπιση: Μετακινεί τη σκιά στον κατακόρυφο άξονα. Οι τιμές κυμαίνονται από -50px (πάνω) έως 50px (κάτω).
- Θόλωση (Blur): Καθορίζει πόσο μαλακές θα είναι οι άκρες της σκιάς. Η τιμή κυμαίνεται από 0px (απόλυτα σκληρή άκρη) έως 100px (διάχυτη σκιά).
- Εξάπλωση (Spread): Αυξάνει ή μειώνει το μέγεθος της σκιάς πριν εφαρμοστεί η θόλωση. Οι τιμές κυμαίνονται από -50px έως 50px. Μια αρνητική τιμή εξάπλωσης συρρικνώνει τη σκιά προς τα μέσα, επιτρέποντας τη δημιουργία μιας πιο συμπαγούς, κοντινής σκιάς.
- Χρώμα σκιάς & Αδιαφάνεια: Ορίζει τη χρωματική απόχρωση και το επίπεδο διαφάνειας της σκιάς, επιτρέποντας τη δημιουργία απαλών μεταβάσεων.
Δημιουργία βάθους με πολλαπλά επίπεδα
Μια μεμονωμένη σκιά συχνά φαίνεται επίπεδη και αφύσικη, ειδικά σε μεγάλες διαστάσεις. Στον πραγματικό κόσμο, το φως διαχέεται και δημιουργεί πολλαπλές διαβαθμίσεις σκίασης. Η εφαρμογή επιτρέπει τη στοίβαξη πολλαπλών επιπέδων για την επίτευξη ρεαλισμού.
Το εργαλείο προ-αποδίδει πέντε επίπεδα. Το πρώτο επίπεδο έχει προκαθορισμένες τιμές 0 8 24 -4 με 18% διαφανές μαύρο χρώμα, ενώ τα υπόλοιπα τέσσερα επίπεδα είναι αρχικά κρυμμένα. Πατώντας το κουμπί Προσθήκη επιπέδου, δημιουργείται ένα νέο επίπεδο με τις προεπιλεγμένες τιμές, ενώ με το κουμπί Αφαίρεση επιπέδου διαγράφεται το επιλεγμένο επίπεδο. Όταν υπάρχουν περισσότερα από ένα επίπεδα, ο παραγόμενος κώδικας CSS τα διαχωρίζει αυτόματα με κόμμα.
Εξωτερική έναντι εσωτερικής σκιάς
Η κατεύθυνση της σκιάς καθορίζει τον τρόπο με τον οποίο ο χρήστης αντιλαμβάνεται τη θέση του στοιχείου στον τρισδιάστατο χώρο της οθόνης.
- Εξωτερική σκιά (Προεπιλογή): Η σκιά πέφτει έξω από τα όρια του στοιχείου. Αυτό δίνει την αίσθηση ότι το στοιχείο είναι ανασηκωμένο πάνω από το υπόβαθρο, όπως μια κάρτα πληροφοριών.
- Εσωτερική σκιά (Inset): Ενεργοποιώντας την επιλογή Εσωτερική σκιά (Inset), η σκιά μεταφέρεται στο εσωτερικό του στοιχείου. Αυτό κάνει το στοιχείο να φαίνεται βυθισμένο ή πιεσμένο προς τα μέσα, μια τεχνική ιδανική για πεδία εισαγωγής κειμένου ή πατημένα κουμπιά.
Ιδιωτικότητα και επεξεργασία δεδομένων
Η επεξεργασία των δεδομένων και η παραγωγή του κώδικα CSS πραγματοποιούνται με γνώμονα την προστασία των δεδομένων σας. Κάθε σκιά αποδίδεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.
Συχνές Ερωτήσεις
Τι ακριβώς ελέγχουν οι τιμές offset, blur και spread;
Η μετατόπιση (offset) μετακινεί τη σκιά αριστερά/δεξιά και πάνω/κάτω, η θόλωση (blur) μαλακώνει τις άκρες της και η εξάπλωση (spread) τη μεγαλώνει ή τη μικραίνει πριν από τη θόλωση. Μια αρνητική τιμή εξάπλωσης συρρικνώνει τη σκιά προς τα μέσα, κάτι που είναι χρήσιμο για μια πιο συμπαγή, κοντινή σκιά.
Τι κάνει η επιλογή εσωτερικής σκιάς (inset);
Μια κανονική σκιά πέφτει έξω από το στοιχείο, όπως το φως πίσω από μια ανασηκωμένη κάρτα. Η επιλογή inset τη μεταφέρει στο εσωτερικό του στοιχείου, κάνοντάς το να φαίνεται βυθισμένο — ιδιαίτερα χρήσιμο για πεδία εισαγωγής ή πατημένα κουμπιά.
Γιατί να χρησιμοποιήσω περισσότερα από ένα επίπεδα σκιάς;
Μια μεμονωμένη σκιά μπορεί να φαίνεται επίπεδη πάνω από ένα ορισμένο μέγεθος. Η ρεαλιστική αίσθηση βάθους συνήθως συνδυάζει μια έντονη, σκούρα σκιά κοντά στο στοιχείο με μια πιο απαλή και ευρεία σκιά — προσθέστε ένα δεύτερο επίπεδο και ρυθμίστε το καθένα ξεχωριστά για να πετύχετε αυτό το εφέ.
Πώς μπορώ να χρησιμοποιήσω τον παραγόμενο κώδικα στο έργο μου;
Μόλις ολοκληρώσετε τη ρύθμιση των επιπέδων, ο κώδικας CSS ενημερώνεται σε πραγματικό χρόνο στο αντίστοιχο πλαίσιο. Μπορείτε να πατήσετε το κουμπί Αντιγραφή CSS για να αντιγράψετε τον κώδικα στο πρόχειρο και να τον επικολλήσετε απευθείας στο αρχείο στυλ της ιστοσελίδας σας.