Card Shadow CSS — Λεπτός κώδικας σκιάς πλαισίου
Δημιουργήστε οπτικά τον κώδικα σκιάς πλαισίου CSS: ρυθμιστικά για μετατόπιση, θόλωση, διάδοση, χρώμα με αδιαφάνεια, λειτουργία εισαγωγής και έως τέσσερα επίπεδα με ζωντανή προεπισκόπηση.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει την προεπιλογή της γεννήτριας σκιάς πλαισίου σε μια κλασική σκιά κάρτας: 2 εικονοστοιχεία προς τα κάτω, 8 εικονοστοιχεία θαμπάδα, 15% μαύρη αδιαφάνεια. Είναι σκόπιμα αθόρυβο — αρκετό για να χωρίσει μια κάρτα από τη σελίδα χωρίς να ανακοινωθεί — και η προεπισκόπηση δείχνει ακριβώς πόσο ήσυχο.
Αυτό το εύρος αντιστοιχεί στα χαμηλότερα στάδια ανύψωσης στα περισσότερα συστήματα σχεδίασης: κάρτες λίστας, αναπτυσσόμενα μενού, popover και σειρές πινάκων κατά την τοποθέτηση του δείκτη. Εάν χρειάζεστε ισχυρότερη ανύψωση για μοντάλ ή αιωρούμενα πάνελ, αυξήστε τη μετατόπιση Υ και θαμπώστε μαζί — θα πρέπει να αυξάνονται αναλογικά για να διατηρούν πιστευτή την πηγή φωτός.
Αντιγράψτε τη γραμμή σκιάς πλαισίου στα στυλ των στοιχείων σας ή αντιγράψτε την ως δεύτερο επίπεδο με πιο αυστηρό θάμπωμα για να προσθέσετε ορισμό άκρων. Το εργαλείο είναι δωρεάν και εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας.