Γεννήτρια CSS Box Shadow
Δημιουργήστε CSS box-shadows πολλαπλών επιπέδων με ζωντανούς ολισθητές για offset, blur, spread, χρώμα, αδιαφάνεια και inset — κάντε προεπισκόπηση σε πραγματικό στοιχείο και αντιγράψτε έτοιμο CSS άμεσα.
box-shadow: —;
Όλα ενημερώνονται ζωντανά στο πρόγραμμα περιήγησής σας — χωρίς μεταφορτώσεις, χωρίς εγγραφή, εντελώς δωρεάν.
Σχετικά με το Γεννήτρια CSS Box Shadow
Ο CSS Box Shadow Generator σάς επιτρέπει να σχεδιάζετε σκιές box-shadow οπτικά αντί να μαντεύετε τιμές στον κώδικα. Σύρετε ρυθμιστικά για οριζόντια και κάθετη μετατόπιση, ακτίνα θολώματος, ακτίνα εξάπλωσης, χρώμα και αδιαφάνεια — με εναλλαγή inset — και παρακολουθήστε ένα πραγματικό στοιχείο να ενημερώνεται ζωντανά. Όταν φαίνεται σωστό, αντιγράψτε το έτοιμο CSS με ένα κλικ.
Οι σύγχρονες σκιές UI σπάνια είναι ένα μόνο επίπεδο. Αυτός ο generator υποστηρίζει σωρευμένα επίπεδα σκιάς: προσθέστε, αντιγράψτε, αποκρύψτε ή αφαιρέστε επίπεδα, και προεπισκοπήστε είτε το επιλεγμένο επίπεδο μόνο του είτε όλα τα επίπεδα συνδυασμένα. Το να τοποθετείτε μια σφιχτή σκούρα σκιά κάτω από μια απαλή φαρδιά είναι ο τρόπος που τα κομψά κάρτες και κουμπιά αποκτούν βάθος.
Μπορείτε επίσης να στιλάρετε το ίδιο το στοιχείο προεπισκόπησης — χρώμα κουτιού, ακτίνα περιγράμματος και φόντο καμβά — ώστε η σκιά να κρίνεται σε ρεαλιστικό πλαίσιο, συμπεριλαμβανομένων σκούρων επιφανειών. Ξεκινήστε από ένα προεπιλεγμένο, πατήστε «Randomize layer» για έμπνευση, και κάντε επαναφορά όποτε θέλετε καθαρή αρχή. Όλα εκτελούνται στον browser σας.
Πώς να χρησιμοποιήσετε το Γεννήτρια CSS Box Shadow
- Ρυθμίστε τα ρυθμιστικά για οριζόντια μετατόπιση, κάθετη μετατόπιση, θόλωμα, εξάπλωση, χρώμα και αδιαφάνεια, και ενεργοποιήστε το «Inset shadow» αν θέλετε εσωτερική σκιά.
- Κάντε κλικ στο «Add layer» ή στο «Duplicate layer» για να στοιβάξετε σκιές, και εναλλάξτε τη λειτουργία προεπισκόπησης μεταξύ «This layer» και «All layers» για να ρυθμίσετε κάθε μία.
- Ρυθμίστε το στοιχείο και τον καμβά — χρώμα κουτιού, ακτίνα περιγράμματος και φόντο — ώστε η προεπισκόπηση να ταιριάζει με τον πραγματικό σχεδιασμό σας.
- Εφαρμόστε ένα προεπιλεγμένο ή χρησιμοποιήστε το «Randomize layer» αν θέλετε ένα σημείο εκκίνησης αντί για κενά ρυθμιστικά.
- Αντιγράψτε τον πλήρη κανόνα CSS (ή απλώς την τιμή) και επικολλήστε τον στο stylesheet σας.