Γεννήτρια Glassmorphism

backdrop-filter: blur() είναι η ιδιότητα CSS πίσω από την εμφάνιση παγωμένου γυαλιού — ένα ημιδιαφανές πλαίσιο που θολώνει ό,τι κινείται πίσω από αυτό αντί απλώς να ξεθωριάζει ένα επίπεδο χρώμα. Το βασικό είναι ότι η ποιότητα του θαμπώματος είναι σχεδόν αδύνατο να κριθεί σε σχέση με ένα στατικό δείγμα. Είναι πειστικό μόνο όταν κάτι κινείται κάτω από αυτό, όπως συμβαίνει σε μια πραγματική σελίδα με περιεχόμενο, βίντεο ή ήρωα κινουμένων σχεδίων. Αυτή η γεννήτρια τοποθετεί την κάρτα προεπισκόπησης πάνω σε ένα γνήσιο κινούμενο φόντο αντί για ένα ακίνητο, επομένως αυτό που βλέπετε ενώ σύρετε τα ρυθμιστικά είναι αυτό που θα βιώσουν πραγματικά οι επισκέπτες.

Το φόντο είναι ένα πραγματικό κινούμενο σχέδιο CSS: μια μεγάλη γραμμική διαβάθμιση ζωγραφισμένη στο 400% του μεγέθους του στοιχείου, με τα @keyframes να αλλάζουν τη θέση του φόντου εμπρός και πίσω σε έναν βρόχο — χωρίς βρόχο κινούμενων εικόνων JavaScript, χωρίς καμβά, απλώς η ίδια τεχνική συνεχούς θέσης φόντου που χρησιμοποιείται στις ενότητες των ηρώων παραγωγής. Το θάμπωμα, το χρώμα απόχρωσης και η αδιαφάνεια, το χρώμα/αδιαφάνεια/πλάτος επισήμανσης περιγράμματος, η ακτίνα γωνίας και η απαλότητα της σκιάς καθοδηγούν τα ζωντανά στυλ της κινητής κάρτας και το πλαίσιο CSS με δυνατότητα αντιγραφής αντικατοπτρίζει τις ίδιες ακριβώς τιμές.

Δεν υποστηρίζει κάθε πρόγραμμα περιήγησης φίλτρο φόντου, επομένως η γεννήτρια εκπέμπει επίσης ένα πραγματικό μπλοκ @supports not (φίλτρο φόντου: blur(1px)) — όχι μια χειρονομία διακριτικού, αλλά έναν εναλλακτικό κανόνα με το δικό του χρώμα φόντου που υπολογίζεται από την πραγματική αδιαφάνεια απόχρωσης. Επειδή η ημιδιαφάνεια χωρίς θάμπωμα φαίνεται αισθητά χειρότερη (ό,τι υπάρχει πίσω από αυτό εμφανίζεται χωρίς θολό), η εναλλακτική επαναφορά αυξάνει αυτόματα το κανάλι άλφα πάνω από την επιλεγμένη αδιαφάνεια απόχρωσης και ένα σχόλιο στο CSS που δημιουργείται εξηγεί ακριβώς γιατί και κατά πόσο.

Τα πάντα υπολογίζονται και αποδίδονται στο δικό σας πρόγραμμα περιήγησης: χωρίς μεταφόρτωση, χωρίς λογαριασμό, χωρίς διακομιστή μετ' επιστροφής. Αντιγράψτε το CSS μόλις η κάρτα φαίνεται σωστή, αφήστε το σε οποιοδήποτε στοιχείο θέλετε να βρίσκεται πάνω από μια φωτογραφία, βίντεο ή ντεγκραντέ και διατηρήστε το μπλοκ @supports, ώστε τα παλαιότερα προγράμματα περιήγησης να έχουν μια ευανάγνωστη, πιο αδιαφανή κάρτα αντί για μια μόλις ορατή.