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

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

Η ιδιότητα box-shadow δέχεται διάφορες τιμές: οριζόντια μετατόπιση (X), κάθετη μετατόπιση (Y), ακτίνα θόλωσης, ακτίνα εξάπλωσης, χρώμα και την προαιρετική λέξη-κλειδί inset. Μπορείτε επίσης να καθορίσετε πολλαπλές σκιές χωρισμένες με κόμματα.

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

Η ακτίνα θόλωσης καθορίζει πόσο θολή είναι η άκρη της σκιάς. Μια τιμή 0 δημιουργεί μια αιχμηρή, συμπαγή άκρη. Μεγαλύτερες τιμές δημιουργούν μια πιο διάχυτη, μαλακότερη σκιά που εκτείνεται πιο μακριά από το στοιχείο.

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

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

Ναι, μπορείτε να χρησιμοποιήσετε οποιαδήποτε μορφή χρώματος CSS, συμπεριλαμβανομένων RGBA, HSLA, HEX ή ονομασμένων χρωμάτων. Τα RGBA και HSLA είναι ιδιαίτερα χρήσιμα για τη δημιουργία ημιδιαφανών σκιών που αναμειγνύονται φυσικά με τα φόντα.

Απλά κάντε κλικ στο κουμπί "Αντιγραφή κώδικα" στη διεπαφή του δημιουργού. Ο κώδικας CSS θα αντιγραφεί στο πρόχειρο και μπορεί να επικολληθεί απευθείας στο φύλλο στυλ ή στο αρχείο HTML σας.

Ναι, το box-shadow υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Firefox, Safari, Edge και Opera. Είναι μέρος του CSS3 από το 2011 και έχει εξαιρετική συμβατότητα με τα προγράμματα περιήγησης.

Το box-shadow έχει ελάχιστη επίδραση στην απόδοση των σύγχρονων προγραμμάτων περιήγησης. Ωστόσο, η χρήση πολλαπλών σύνθετων σκιών με μεγάλη ακτίνα θόλωσης σε πολλά στοιχεία μπορεί να επηρεάσει την απόδοση απόδοσης, ειδικά σε κινητές συσκευές.

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

Ναι, το box-shadow μπορεί να animatωθεί χρησιμοποιώντας μεταβάσεις CSS ή κινούμενα σχέδια. Ωστόσο, η animatωση του box-shadow μπορεί να είναι εντατική από άποψη απόδοσης. Για καλύτερη απόδοση, σκεφτείτε τη χρήση ψευδο-στοιχείων με μεταβάσεις αδιαφάνειας.