Δυο τρόποι για να δημιουργήσετε το εφέ του παγωμένου τζαμιού με CSS

() translation by (you can also view the original English article)

Σε αυτό το μάθημα θα σας δείξω πως να δημιουργήσετε το εφέ παγωμένου τζαμιού με CSS. Θα το έχετε δει αυτό ζωντανά στην διεπαφή χρήστη MacOS και iOS, ακόμα και στα Windows, οπότε είναι ένα μοντέρνο εφέ. Μπορούμε να προσομοιώσουμε το παγωμένο τζάμι σε ιστοσελίδες χρησιμοποιώντας CSS, και σε αυτό το μάθημα θα σας δείξω δυο τρόπους για να το κάνετε.

Εφέ παγωμένου τζαμιού με CSS

Πρώτη μέθοδος

Η πρώτη μέθοδος έχει κάπως μεγαλύτερη κάλυψη περιηγητών διαδικτύου, αλλά απαιτεί περισσότερο CSS σε σχέση με την δεύτερη προσέγγιση που θα δούμε.

Αρχίστε δημιουργώντας ένα div με κλάση .container. Θα το χρησιμοποιήσουμε για να αναπαραστήσουμε το παγωμένο τζάμι. Στην συνέχεια εφαρμόστε μια φωτογραφία φόντου στο στοιχείο body. Σε αυτό το φόντο θα πρέπει να εφαρμόσετε το:

1	body {
2	background-attachment: fixed;
3	}

Κάνουμε αυτό γιατί τα παιδιά του body θα υιοθετήσουν αυτή την εικόνα φόντου και θέλουμε να κρατήσουμε το ίδιο μέγεθος.

Τώρα πάμε να δημιουργήσουμε ένα ψευδό-στοιχείο στο .container, και αυτό είναι που θα μας δώσει το θόλωμα. Οπότε εφαρμόζουμε το ακόλουθο:

.container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Αυτό μας δίνει ένα στοιχείο που καλύπτει το στοιχείο container. Τώρα ήρθε η ώρα να δώσουμε λίγο χρώμα, με τη χρήση της σκιάς πλαισίου:

1	.container:before {
2	box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
3	}

Και για να πάρουμε το εφέ του πάγου προσθέτουμε το φίλτρο θόλωσης:

1	.container:before {
2	box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
3	filter: blur(10px);
4	}

Αυτό μας δίνει το μεγαλύτερο μέρος από αυτό που θέλουμε, αλλά δεν είναι ακόμα τέλειο. Τώρα θέλουμε (όπως συζητήσαμε νωρίτερα) να ορίσουμε το κληρονομούμενο φόντο στο ψευδό-στοιχείο και στον γονέα του.

.container {
    background: inherit;
}

.container:before {
    background: inherit;
}

Με μερικές ακόμα προαιρετικές αλλαγές, έχουμε το τελικό αποτέλεσμα:

Δεύτερη Μέθοδος

Τώρα η εναλλακτική μέθοδο που χρησιμοποιεί κάπως λιγότερη μορφοποίηση, αλλά έχει μικρότερη υποστήριξη σε περιηγητές διαδικτύου. Αρχίζουμε με το ίδιο στοιχείο .container και εφαρμόζουμε την ίδια φωτογραφία φόντου στο στοιχείο body.

Μετά ρίχνουμε την προσοχή μας στην ιδιότητα CSS backdrop-filter. Αρχίζουμε προσθέτοντας μερικές μορφοποίησης εμφάνισης στο .container, συμπεριλαμβανομένου του χρώματος φόντου που μπορεί να είναι οποιοδήποτε (ας βάλουμε σκέτο λευκό):

1	.container {
2	background-color: rgba(255, 255, 255, .15);
3	}

Στην συνέχεια βάζουμε το φίλτρο (μπορεί να χρειάζεται να βάλετε το κατάλληλο πρόθεμα για τον περιηγητή διαδικτύου, ή απλά να ενεργοποιήσετε το autoprefixer αν χρησιμοποιείτε το Codepen).

1	.container {
2	background-color: rgba(255, 255, 255, .15);
3	backdrop-filter: blur(5px);
4	}

Αυτό είναι! Παίξτε με την τιμή θόλωσης για να πάρετε το εφέ που θέλετε, αλλά δεν υπάρχει κάτι άλλο που χρειάζεται. Εδώ είναι το τελικό αποτέλεσμα:

Συμπέρασμα

Το μειονέκτημα χρήσης της δεύτερης μεθόδου είναι η φτωχή υποστήριξη σε περιηγητές διαδικτύου. Αυτή τη στιγμή μπορείτε να περιμένετε υποστήριξη στον Edge, και τον Safari, αλλά μόνο αυτούς. Ωστόσο, αυτό το εφέ παγωμένου γυαλιού μπορεί να είναι πολύ όμορφος τρόπος βελτίωσης της διεπαφής χρήστη για τους περιηγητές διαδικτύου που το υποστηρίζουν.

Δυο τρόποι για να δημιουργήσετε το εφέ του παγωμένου τζαμιού με CSS

Εφέ παγωμένου τζαμιού με CSS

Πρώτη μέθοδος

Δεύτερη Μέθοδος

Συμπέρασμα

Χρησίμοι σύνδεσμοι