Γεννήτρια Neumorphism
Σχεδιάστε απαλές, ανάγλυφες νεομορφικές επιφάνειες UI με διπλές σκιές και αντιγράψτε το CSS.
—
Το φόντο του καμβά ταιριάζει με το χρώμα του στοιχείου — αυτό είναι που κάνει να λειτουργεί η απαλή, ανάγλυφη νεομορφική εμφάνιση.
Από προεπιλογή, οι φωτεινές και σκούρες σκιές προκύπτουν από το βασικό χρώμα. Ενεργοποιήστε για να τις ορίσετε μόνοι σας.
Σχετικά με το Γεννήτρια Neumorphism
Ο Neumorphism Generator σχεδιάζει τη μαλακή, εξωθημένη εμφάνιση “soft UI”: ένα στοιχείο που φαίνεται σαν να προεξέχει — ή να βυθίζεται — στην επιφάνεια πίσω του. Επιλέξτε ένα βασικό χρώμα και το εργαλείο παράγει όλα τα υπόλοιπα, γιατί το εφέ λειτουργεί μόνο όταν το στοιχείο και το φόντο του μοιράζονται το ίδιο χρώμα και το βάθος προέρχεται εξ ολοκλήρου από δύο αντίθετες box-shadows.
Οι ρυθμιστές ελέγχουν τη γεωμετρία: μέγεθος, ακτίνα γωνιών, απόσταση των σκιών, την ένταση και τη θόλωσή τους. Τέσσερις λειτουργίες σχήματος — flat, concave, convex και pressed — αλλάζουν την εσωτερική διαβάθμιση και την κατεύθυνση της σκιάς, και ένας επιλογέας πηγής φωτός μετακινεί την ανταύγεια σε οποιαδήποτε από τις τέσσερις γωνίες ώστε το στοιχείο να ταιριάζει με τον φωτισμό του σχεδιασμού σας.
Από προεπιλογή, τα χρώματα της ανοιχτής και σκούρας σκιάς υπολογίζονται από το βασικό χρώμα, αλλά μια χειροκίνητη λειτουργία σάς επιτρέπει να ορίσετε και τα δύο μόνοι σας. Το παραγόμενο CSS — background, radius και οι δύο box-shadow — απέχει ένα κλικ.
Πώς να χρησιμοποιήσετε το Γεννήτρια Neumorphism
- Επιλέξτε το βασικό χρώμα — εφαρμόζεται τόσο στο στοιχείο όσο και στον καμβά πίσω του.
- Επιλέξτε ένα σχήμα: flat, concave, convex ή pressed.
- Ορίστε τη γωνία πηγής φωτός για να ελέγξετε πού πέφτει η ανταύγεια.
- Ρυθμίστε το μέγεθος, την ακτίνα γωνιών, την απόσταση, την ένταση και τη θόλωση με τους ρυθμιστές.
- Ενεργοποιήστε χειροκίνητα χρώματα σκιάς αν θέλετε να παρακάμψετε τους παραγόμενους ανοιχτούς και σκούρους τόνους.
- Αντιγράψτε το CSS και επικολλήστε το στο στοιχείο σας.