Inset CSS Box Shadow — Έτοιμος κώδικας
Δημιουργήστε οπτικά τον κώδικα σκιάς πλαισίου CSS: ρυθμιστικά για μετατόπιση, θόλωση, διάδοση, χρώμα με αδιαφάνεια, λειτουργία εισαγωγής και έως τέσσερα επίπεδα με ζωντανή προεπισκόπηση.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια σκιάς πλαισίου με το ένθετο πλαίσιο ελέγχου ήδη επιλεγμένο, επομένως η σκιά σχεδιάζεται μέσα στο στοιχείο αντί πίσω από αυτό. Η κάρτα προεπισκόπησης εμφανίζει το βυθισμένο εφέ ταυτόχρονα και κάθε ρυθμιστικό συνεχίζει να ενημερώνει ζωντανά τη γραμμή CSS.
Οι ένθετες σκιές είναι ο τρόπος με τον οποίο το CSS παραποιεί το βάθος προς τα μέσα: οι καταστάσεις κουμπιών που πατάτε, τα πεδία αναζήτησης και τα φρεάτια εισόδου, οι κοιλότητες της γραμμής προόδου και τα χαραγμένα πάνελ βασίζονται σε αυτά. Επειδή η σκιά αγκαλιάζει το εσωτερικό άκρο, η θαμπάδα και η εξάπλωση συμπεριφέρονται ελαφρώς διαφορετικά από ό,τι σε μια κανονική σκιά — τα ρυθμιστικά εδώ σάς επιτρέπουν να νιώσετε αμέσως αυτήν τη διαφορά.
Όταν η βυθισμένη εμφάνιση είναι σωστή, αντιγράψτε τη γραμμή σκιάς πλαισίου στο φύλλο στυλ σας. Μπορείτε επίσης να συνδυάσετε ένα ένθετο στρώμα με κανονικά εξωτερικά στρώματα — προσθέστε ένα δεύτερο στρώμα και ξετσεκάρετε το ένθετο σε αυτό για να αναμειχθούν και τα δύο σε μία δήλωση.