Γεννήτρια Box Shadow

Πώς να χρησιμοποιήσετε τη γεννήτρια box shadow

1. Ξεκινήστε από μια προεπιλογή ή κρατήστε την αρχική Απαλή σκιά. Η σειρά Προεπιλογές περιλαμβάνει τις Απαλή, Έντονη, Πολυεπίπεδη, Ανύψωση, Neumorphism, Εσωτερική και Λάμψη.
2. Στα Επίπεδα σκιάς, κάντε κλικ σε ένα επίπεδο για να το επιλέξετε. Κάθε επίπεδο μετακινείται με Μετακίνηση πάνω και Μετακίνηση κάτω ή διαγράφεται με Αφαίρεση. Το Προσθήκη επιπέδου διπλασιάζει το επιλεγμένο επίπεδο, ώστε να τροποποιήσετε ένα αντίγραφο.
3. Επεξεργαστείτε το επιλεγμένο επίπεδο στο Επεξεργασία του επιλεγμένου επιπέδου: σύρετε την κουκκίδα στην επιφάνεια Μετατόπιση ή χρησιμοποιήστε τους ολισθητές και τα αριθμητικά πεδία για Οριζόντια μετατόπιση (px), Κάθετη μετατόπιση (px), Θάμπωμα (px) και Εξάπλωση (px).
4. Επιλέξτε Χρώμα σκιάς με τον επιλογέα χρώματος ή πληκτρολογήστε οποιοδήποτε χρώμα CSS στο πεδίο κώδικα και ορίστε την Αδιαφάνεια (%). Επιλέξτε Inset (εσωτερική σκιά) για να σχεδιαστεί η σκιά μέσα στο πλαίσιο.
5. Προσαρμόστε τις Ρυθμίσεις προεπισκόπησης (Χρώμα πλαισίου, Χρώμα φόντου, Ακτίνα γωνιών (px)) για να δείτε τη σκιά πάνω στα πραγματικά σας χρώματα. Επηρεάζουν μόνο την προεπισκόπηση.
6. Αντιγράψτε τη δήλωση από τον Κώδικας CSS με το κουμπί Αντιγραφή.

Πληκτρολόγιο: επιλέξτε την κουκκίδα στην επιφάνεια Μετατόπιση και χρησιμοποιήστε τα βελάκια για να τη μετακινήσετε κατά 1 px ή κατά 10 px με Shift.

Πώς λειτουργεί το box-shadow

Η σύνταξη μιας σκιάς είναι box-shadow: [inset] x y θάμπωμα εξάπλωση χρώμα.

• x και y μετακινούν τη σκιά προς τα δεξιά και προς τα κάτω. Οι αρνητικές τιμές τη μετακινούν προς τα αριστερά και προς τα πάνω. Αν η πηγή φωτός βρίσκεται πάνω από το στοιχείο, το y είναι θετικό.
• Το θάμπωμα μαλακώνει την άκρη. Δεν μπορεί να είναι αρνητικό. Με θάμπωμα 0 προκύπτει ένα αντίγραφο του πλαισίου με σκληρές άκρες.
• Η εξάπλωση μεγαλώνει (θετική τιμή) ή μικραίνει (αρνητική τιμή) τη σκιά πριν θαμπώσει. Μια αρνητική εξάπλωση με μεγάλο y κρατά τη σκιά κάτω από το στοιχείο αντί γύρω του.
• Το χρώμα συνήθως έχει διαφάνεια. Το εργαλείο γράφει τα αδιαφανή χρώματα ως HEX και τα ημιδιαφανή ως rgba(), που το καταλαβαίνουν όλα τα προγράμματα περιήγησης. Αν πληκτρολογήσετε χρώμα που έχει ήδη κανάλι άλφα, η Αδιαφάνεια (%) το πολλαπλασιάζει.
• Το inset τοποθετεί τη σκιά μέσα στο περίγραμμα, σαν το πλαίσιο να είναι πατημένο μέσα στη σελίδα.

Η σκιά ακολουθεί το border-radius του στοιχείου και δεν αλλάζει ποτέ τη διάταξη: δεν καταλαμβάνει χώρο και δεν προκαλεί γραμμές κύλισης.

Γιατί να στοιβάξετε πολλές σκιές;

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

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

Neumorphism

Το neumorphism («soft UI») χρησιμοποιεί δύο σκιές σε ένα στοιχείο που έχει το ίδιο χρώμα με το φόντο του: μία σκούρα μετατοπισμένη προς τα κάτω και δεξιά και μία ανοιχτή μετατοπισμένη προς τα πάνω και αριστερά. Η προεπιλογή Neumorphism ορίζει και τα δύο χρώματα με βάση το #e0e5ec. Να έχετε υπόψη ότι αυτό το στυλ έχει χαμηλή αντίθεση, οπότε τα κουμπιά που φτιάχνονται έτσι χρειάζονται σαφή κατάσταση εστίασης και ευανάγνωστες ετικέτες.