Neumorphism CSS Shadow — Κώδικας δύο επιπέδων
Δημιουργήστε οπτικά τον κώδικα σκιάς πλαισίου CSS: ρυθμιστικά για μετατόπιση, θόλωση, διάδοση, χρώμα με αδιαφάνεια, λειτουργία εισαγωγής και έως τέσσερα επίπεδα με ζωντανή προεπισκόπηση.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια με το κλασικό νεομορφικό ζεύγος που έχει ήδη ενσωματωθεί: μια μετατόπιση ανοιχτού στρώματος −8px/−8px σε σχεδόν λευκό και ένα σκούρο στρώμα μετατόπισης 8px/8px σε ένα σίγαση γκρι-μπλε, και τα δύο θολά 16px. Κάντε εναλλαγή μεταξύ των δύο επιπέδων στη λίστα επιπέδων για να συντονίσετε κάθε πλευρά ανεξάρτητα.
Ο Neumorphism (soft UI) είναι το ανάγλυφο στυλ που κορυφώθηκε γύρω στο 2020: τα στοιχεία φαίνονται εξωθημένα από το φόντο αντί να επιπλέουν πάνω από αυτό. Ειλικρινά, έρχεται με πραγματικούς συμβιβασμούς - το εφέ λειτουργεί μόνο όταν το φόντο του στοιχείου ταιριάζει με το φόντο της σελίδας και οι άκρες χαμηλής αντίθεσης μπορούν να βλάψουν την προσβασιμότητα - έτσι οι περισσότερες ομάδες το χρησιμοποιούν πλέον ως προφορά και όχι ως ολόκληρη γλώσσα σχεδιασμού.
Εάν το στυλ ταιριάζει στο έργο σας, αυτή η δήλωση δύο επιπέδων είναι το κανονικό σημείο εκκίνησης: αντιγράψτε το CSS, ορίστε το στοιχείο και το φόντο της σελίδας στο ίδιο απαλό γκρι και προσθέστε μια αντίστοιχη ακτίνα περιγράμματος. Όλα εκτελούνται τοπικά στο πρόγραμμα περιήγησής σας.