DevTulz Online

Δημιουργός CSS Box Shadow

Φόντο

Τι είναι το CSS Box Shadow;

Η ιδιότητα CSS box-shadow προσθέτει εφέ σκιάς γύρω από το πλαίσιο ενός στοιχείου. Οι σκιές μπορούν να μετατοπιστούν, να θολώσουν, να εξαπλωθούν, να χρωματιστούν και να οριστούν ως inset (εσωτερική σκιά). Πολλαπλές σκιές διαχωρισμένες με κόμμα μπορούν να στοιβαχτούν για πλούσια εφέ. Αυτός ο δημιουργός σας επιτρέπει να κατασκευάσετε οπτικά σύνθετες σκιές πολλαπλών επιπέδων και να αντιγράψετε το έτοιμο CSS στο πρόχειρο.

Πώς να χρησιμοποιήσετε τον Δημιουργό Box Shadow

  1. Ρυθμίστε τα ρυθμιστικά για Offset X/Y, Blur και Spread για να τοποθετήσετε και να διαμορφώσετε τη σκιά.

  2. Κάντε κλικ στο δείγμα χρώματος για να επιλέξετε χρώμα σκιάς και χρησιμοποιήστε το ρυθμιστικό Opacity για διαφάνεια.

  3. Ενεργοποιήστε το 'Inset' για να δημιουργήσετε εσωτερική λάμψη ή εφέ πίεσης.

  4. Κάντε κλικ στο '+ Προσθήκη επιπέδου' για να στοιβάξετε πολλαπλές σκιές.

  5. Αντιγράψτε το παραγόμενο CSS και επικολλήστε το στο φύλλο στυλ σας.

Συχνές Ερωτήσεις

Ποια είναι η διαφορά μεταξύ box-shadow και drop-shadow filter; Το box-shadow προσθέτει σκιές γύρω από το ορθογώνιο πλαίσιο περιγράμματος του στοιχείου και υποστηρίζει σκιές προς τα έσω. Το CSS filter: drop-shadow() ισχύει για το οπτικό σχήμα του στοιχείου (συμπεριλαμβάνοντας διαφάνειας), επιτρέποντάς του να ακολουθεί μη-ορθογώνιες περιγραφές όπως PNG με διαφανή φόντα.

Πώς δημιουργώ ένα εφέ ανύψωσης καρτών Material Design; Στοιβάζετε δύο σκιές box-shadow: μια μαλακή περιβάλλουσα σκιά (μεγάλη θολάδα, χαμηλή αδιαφάνεια, ελαφρώς εξαπλωμένη) και μια βασική σκιά (μικρότερη θολάδα, υψηλότερη αδιαφάνεια, κατευθυντική μετατόπιση). Για παράδειγμα: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Επηρεάζει το box-shadow τη διάταξη της σελίδας; Όχι. Το box-shadow δεν επηρεάζει το μέγεθος ή τη θέση του στοιχείου στη ροή του εγγράφου. Σε αντίθεση με το outline, δεν καταλαμβάνει χώρο διάταξης και δεν θα μετακινήσει άλλα στοιχεία.

Μπορώ να κινούμαι το box-shadow; Ναι. Το box-shadow είναι κινητό με CSS transitions και animations. Για απόδοση, προτιμήστε τη μετάβαση του box-shadow μόνο όταν είναι απαραίτητο — τα προγράμματα περιήγησης δεν μπορούν να επιταχύνουν τις αλλαγές box-shadow με GPU τόσο αποτελεσματικά όσο το transform ή το opacity.

Keywords: δημιουργός CSS box shadow, box-shadow CSS, εργαλείο σκιάς CSS, CSS drop shadow, εσωτερική σκιά, σκιά πολλαπλών επιπέδων, CSS shadow online