Γεννήτρια Glassmorphism
Δημιουργήστε κάρτες UI από παγωμένο γυαλί με θόλωση φόντου, διαφάνεια και περιγράμματα, και αντιγράψτε το CSS.
Γυάλινη κάρτα
Παγωμένο γυαλί που επιπλέει πάνω από ζωντανό φόντο.
—
Παράγει τόσο το backdrop-filter όσο και το -webkit-backdrop-filter. Σημείωση: το backdrop-filter δεν υποστηρίζεται σε παλαιότερα προγράμματα περιήγησης (π.χ. Firefox κάτω από 103)· προσθέστε ένα συμπαγές εναλλακτικό φόντο για αυτά.
Σχετικά με το Γεννήτρια Glassmorphism
Ο Glassmorphism Generator δημιουργεί το εφέ κάρτας θαμπού γυαλιού: ένα ημιδιαφανές πάνελ που θολώνει ό,τι βρίσκεται από πίσω του. Οι ρυθμιστές ελέγχουν τη θόλωση και τον κορεσμό του backdrop-filter, το χρώμα και τη διαφάνεια της απόχρωσης γυαλιού, το χρώμα και την αδιαφάνεια του περιγράμματος, την ακτίνα γωνιών και μια εξωτερική σκιά — κάθε αλλαγή αποδίδεται ζωντανά πάνω σε ένα έντονο φόντο ώστε να κρίνετε ρεαλιστικά το εφέ.
Τέσσερα προκαθορισμένα πρότυπα ποιότητας — subtle, frosted, vivid και dark glass — σας δίνουν δοκιμασμένους συνδυασμούς για αφετηρία. Το πρότυπο dark δείχνει πώς η ίδια συνταγή προσαρμόζεται σε σκούρες διεπαφές, όπου ένα αχνό ανοιχτόχρωμο περίγραμμα κάνει το μεγαλύτερο μέρος της δουλειάς διαχωρισμού του γυαλιού από το φόντο.
Το παραγόμενο CSS περιλαμβάνει τόσο το backdrop-filter όσο και το πρόθεμα -webkit-backdrop-filter που απαιτεί το Safari. Σημειώστε την επιφύλαξη συμβατότητας: παλαιότεροι browsers (για παράδειγμα το Firefox πριν την έκδοση 103) δεν υποστηρίζουν το backdrop-filter, γι' αυτό παρέχετε ένα συμπαγές εναλλακτικό φόντο για αυτούς.
Πώς να χρησιμοποιήσετε το Γεννήτρια Glassmorphism
- Ξεκινήστε από ένα προκαθορισμένο πρότυπο — subtle, frosted, vivid ή dark glass — ή από τις προεπιλογές.
- Προσαρμόστε τη θόλωση και τον κορεσμό του backdrop filter.
- Ορίστε το χρώμα απόχρωσης γυαλιού και τη διαφάνειά του.
- Ρυθμίστε το χρώμα περιγράμματος, την αδιαφάνεια περιγράμματος, την ακτίνα γωνιών και τη σκιά περιγράμματος.
- Αντιγράψτε το CSS — περιλαμβάνει ήδη την ιδιότητα με πρόθεμα -webkit- για το Safari.