Γεννήτρια 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.