Γεννήτρια CSS Box Shadow

Μια δήλωση box-shadow έχει έξι κινούμενα μέρη — μετατόπιση X και Y, θόλωση, επέκταση, χρώμα και την προαιρετική λέξη-κλειδί inset — και ο μόνος τρόπος να τα πετύχετε σωστά είναι να τα βλέπετε. Αυτή η γεννήτρια βάζει κάθε παράμετρο σε ένα ρυθμιστικό και αποδίδει το αποτέλεσμα σε μια κάρτα προεπισκόπησης καθώς σύρετε, έτσι ώστε η γραμμή CSS στο κάτω μέρος να είναι πάντα ακριβώς αυτό που βλέπετε.

Οι πραγματικές σκιές σπάνια είναι ένα μόνο επίπεδο. Η λίστα επιπέδων σάς επιτρέπει να στοιβάξετε έως τέσσερις σκιές σε μία δήλωση: μια σφιχτή σκούρα γραμμή για ορισμό άκρων συν ένα φαρδύ απαλό πλύσιμο για ανύψωση, ή το ανοιχτόχρωμο-σκούρο ζεύγος που ορίζει τον νευμορφισμό. Επιλέξτε ένα επίπεδο για να το επεξεργαστείτε, αφαιρέστε όσα δεν χρειάζεστε και η συνδυασμένη τιμή box-shadow ενημερώνεται ζωντανά.

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

Όπως κάθε εργαλείο σε αυτόν τον ιστότοπο, η γεννήτρια είναι δωρεάν και εκτελείται εξ ολοκλήρου στον browser σας: καμία αποστολή, κανένας λογαριασμός και συνεχίζει να λειτουργεί εκτός σύνδεσης μόλις φορτώσει η σελίδα.