Κύρια σημεία
- 01Κάθε παράμετρος box-shadow έχει τον δικό του ρυθμιστή συν μια αριθμητική είσοδος για ακρίβεια pixel-tuning.
- 02Εναλλαγή εσωτερικού μεταξύ αποθέσεων σκιάς και εσωτερικών σκιών για πατημένα ή neumorphic αποτελέσματα.
- 03Χρώμα και αδιαφάνεια ελέγχονται χωριστά, εξαγωγή rgba() για αναγνώσιμη CSS.
- 04Η προεπισκοπία χρησιμοποιεί την πραγματική CSS ιδιοκτησία σε ένα πραγματικό στοιχείο — αυτό που βλέπετε είναι ακριβώς τι κάνει το φύλλο στυλ σας.
Γιατί να Χρησιμοποιήσετε ένα Visual Box-Shadow Generator
Το CSS box-shadow παίρνει έως και έξι τιμές — οριζόντια μετατόπιση, κάθετη μετατόπιση, ακτίνα θόλωσης, ακτίνα διάχυσης, χρώμα και ένα προαιρετικό εσωτερικό διακριτικό. Πληκτρολόγηση από μνήμη λειτουργεί για απλή σκιές, αλλά για όλα πιο σύνθετη — ένα σφιχτό πάθος, μια βαθιά αποθέση σκιάς, ένα μαλακό στρώμα ανύψωσης — κάνετε εικασία και επαναφόρτωση έως όταν κάτι φαίνεται σωστό.
Ένα οπτικό γεννήτρια κατέρριψε αυτό το βρόχο επανάληψης. Μετακινήστε ένα ρυθμιστή, δείτε την αλλαγή αμέσως και αντιγράψτε μόνο όταν ικανοποιηθείτε. Ο γεννήτρια box-shadow της Handytool τρέχει εντελώς στο φυλλομετρητή σας, έτσι η προεπισκοπία είναι η πραγματική CSS ιδιοκτησία που εφαρμόζεται σε ένα πραγματικό στοιχείο — κανένα rendering διαφορές μεταξύ του εργαλείου και της πραγματικής σελίδας σας.
Πώς να Σχεδιάσετε ένα Box Shadow
- 01
Προσαρμόστε τις οριζόντιες και κάθετες μετατοπίσεις
Οι θετικές τιμές μετακινούν τη σκιά δεξιά και κάτω. Οι αρνητικές τιμές τη μετακινούν αριστερά και πάνω. Μια κεντρική σκιά (0, 0) δημιουργεί ένα αποτέλεσμα πάθους.
- 02
Ορίστε την ακτίνα θόλωσης
Οι υψηλότερες τιμές θόλωσης δημιουργούν μαλακότερες, πιο διάχυτες σκιές. Η μηδενική θόλωση παράγει μια σκληρή, στερεή περιγραφή σκιάς.
- 03
Προσαρμόστε την ακτίνα διάχυσης
Η θετική διάχυση μεγεθύνει τη σκιά πριν θόλωση. Η αρνητική διάχυση τη συρρικνώνει, το οποίο είναι χρήσιμο για σφιχτές σκιές κάτω-στοιχείου.
- 04
Επιλέξτε ένα χρώμα και αδιαφάνεια
Χρησιμοποιήστε το χρώμα picker για να επιλέξετε τη σκιά hue, στη συνέχεια κλιμακώστε κάτω αδιαφάνεια για λεπτοτητα. Η έξοδος χρησιμοποιεί rgba() για αναγνώσιμες τιμές.
- 05
Εναλλαγή εσωτερικό εάν χρειάζεται
Εσωτερικό μεταχειρίζει από μια αποθέση σκιάς σε μια εσωτερική σκιά — χρήσιμο για πατημένα κουμπιά, βυθισμένα inputs και neumorphic επιφάνειες.
- 06
Αντιγράψτε τη δήλωση CSS
Κάντε κλικ Αντιγραφή για να λάβετε την πλήρη τιμή box-shadow και επικολλήστε την στο φύλλο στυλ σας.
Χωρίς Μεταφόρτωση, Χωρίς Λογαριασμό
Ο γεννήτρια είναι εντελώς πλευρά πελάτη. Οι επιλογές χρώματος, αριθμητικές τιμές και καταστάσεις προεπισκοπής σας παραμένουν στο φυλλομετρητή σας — τίποτα δεν αποστέλλεται σε διακομιστή. Δεν υπάρχει λογαριασμός για δημιουργία και κανένα όριο χρήσης.
Επειδή το στοιχείο προεπισκοπής χρησιμοποιεί την πραγματική CSS ιδιοκτησία box-shadow, η έξοδος είναι ακριβής κατά ορισμό — δεν υπάρχει canvas rendering ή εικόνα κατάγραφης προσέγγιση. Οι τιμές pixel που αντιγράψετε είναι οι τιμές pixel που ο φυλλομετρητής εφαρμόζει.
Box-Shadow Generator FAQ
Τι κάνει την τιμή διάχυσης;
Η θετική διάχυση μεγεθύνει τη σκιά σε όλες τις κατευθύνσεις πριν εφαρμοστεί θόλωση· η αρνητική διάχυση τη συρρικνώνει. Χρήσιμο για σφιχτές, καθορισμένες δυσφορίες όταν συζευχθεί με χαμηλό θόλωση.
Μπορώ να προσθέσω πολλαπλές box shadows;
Αυτό το γεννήτρια εξάγει μια σκιά ανά φορά. Για να τις στρώσετε, αντιγράψτε την τιμή και διαχωρίστε πολλαπλές σκιές με κόμματα σε CSS — το box-shadow δέχεται ένα κομμένο κατάλογο.
Γιατί είναι η εσωτερική σκιά μου αόρατη;
Οι εσωτερικές σκιές σχεδιάζουν μέσα στο στοιχείο, έτσι χρειάζονται ένα χρώμα φόντου ή ορατή padding για να δείξουν. Δεν θα εμφανιστούν σε διαφανή ή μηδενική μεγέθη στοιχεία.
Είναι η προεπισκοπία pixel-ακριβής;
Ναι — η προεπισκοπία χρησιμοποιεί την πραγματική CSS ιδιοκτησία box-shadow σε ένα πραγματικό DOM στοιχείο, έτσι αυτό που βλέπετε είναι ακριβώς τι θα παράγει το φύλλο στυλ σας.
Τι είναι ένα neumorphic σκιά;
Η Neumorphism χρησιμοποιεί δύο σκιές — μία ελαφρύ και μία σκοτεινή — μετατόπιση σε αντίθετες κατευθύνσεις για να κάνετε ένα στοιχείο να φαίνεται αυξανόμενο ή πατημένο από μια επίπεδη επιφάνεια. Και οι δύο σκιές είναι τυπικά εσωτερικές για την πατημένη παραλλαγή.