Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Δυο τρόποι για να δημιουργήσετε το εφέ του παγωμένου τζαμιού με CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Greek (ελληνικά) translation by Merianos Nikos (you can also view the original English article)

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

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

Πρώτη μέθοδος

Η πρώτη μέθοδος έχει κάπως μεγαλύτερη κάλυψη περιηγητών διαδικτύου, αλλά απαιτεί περισσότερο CSS σε σχέση με την δεύτερη προσέγγιση που θα δούμε.

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

Κάνουμε αυτό γιατί τα παιδιά του body θα υιοθετήσουν αυτή την εικόνα φόντου και θέλουμε να κρατήσουμε το ίδιο μέγεθος.

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

Αυτό μας δίνει ένα στοιχείο που καλύπτει το στοιχείο container. Τώρα ήρθε η ώρα να δώσουμε λίγο χρώμα, με τη χρήση της σκιάς πλαισίου:

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

Αυτό μας δίνει το μεγαλύτερο μέρος από αυτό που θέλουμε, αλλά δεν είναι ακόμα τέλειο. Τώρα θέλουμε (όπως συζητήσαμε νωρίτερα) να ορίσουμε το κληρονομούμενο φόντο στο ψευδό-στοιχείο και στον γονέα του.

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

Δεύτερη Μέθοδος

Τώρα η εναλλακτική μέθοδο που χρησιμοποιεί κάπως λιγότερη μορφοποίηση, αλλά έχει μικρότερη υποστήριξη σε περιηγητές διαδικτύου. Αρχίζουμε με το ίδιο στοιχείο .container και εφαρμόζουμε την ίδια φωτογραφία φόντου στο στοιχείο body.

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

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

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

Συμπέρασμα

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

Χρησίμοι σύνδεσμοι

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.