Τα φίλτρα CSS είναι ένα ισχυρό εργαλείο που μπορούν να χρησιμοποιήσουν οι συγγραφείς για να επιτύχουν διαφορετικά οπτικά εφέ (όπως φίλτρα Photoshop για το πρόγραμμα περιήγησης). Η filterιδιότητα CSS παρέχει πρόσβαση σε εφέ όπως θαμπάδα ή αλλαγή χρώματος στην απόδοση ενός στοιχείου πριν από την εμφάνιση του στοιχείου. Τα φίλτρα χρησιμοποιούνται συνήθως για την προσαρμογή της απόδοσης μιας εικόνας, ενός φόντου ή ενός περιγράμματος.
Η σύνταξη είναι:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Υπάρχουν πολλές συναρτήσεις που πρέπει να χρησιμοποιήσετε για την τιμή:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- για την εφαρμογή φίλτρων SVGcustom()- "Ερχομαι συντομα"
Μπορούν να χρησιμοποιηθούν πολλαπλές λειτουργίες, χωρισμένες από χώρο
.do-more-things ( filter: blur(20px) grayscale(20%); )Λειτουργίες φίλτρου
Για να χρησιμοποιήσετε την ιδιότητα φίλτρου CSS, καθορίζετε μια τιμή για μία από τις ακόλουθες συναρτήσεις που αναφέρονται παραπάνω. Εάν η τιμή δεν είναι έγκυρη, η συνάρτηση επιστρέφει "κανένα". Εκτός όπου σημειώνεται, οι συναρτήσεις που λαμβάνουν μια τιμή εκφρασμένη με ένα σύμβολο ποσοστού (όπως στο 34%) δέχονται επίσης την τιμή που εκφράζεται ως δεκαδική (όπως στο 0,34).
Ακολουθεί μια επίδειξη που σας επιτρέπει να παίξετε με μεμονωμένα φίλτρα λίγο:
κλίμακα του γκρι ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Μετατρέπει την εικόνα εισαγωγής σε κλίμακα του γκρι. Η τιμή του "ποσού" καθορίζει το ποσοστό της μετατροπής. Η τιμή του 100% είναι εντελώς σε κλίμακα του γκρι. Μια τιμή 0% αφήνει την είσοδο αμετάβλητη. Οι τιμές μεταξύ 0% και 100% είναι γραμμικοί πολλαπλασιαστές στο εφέ. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%. Δεν επιτρέπονται αρνητικές τιμές.
καστανόχρους()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Μετατρέπει την εικόνα εισαγωγής σε σέπια. Η τιμή του "ποσού" καθορίζει το ποσοστό της μετατροπής. Η τιμή του 100% είναι εντελώς σέπια. Η τιμή 0 αφήνει την είσοδο αμετάβλητη. Οι τιμές μεταξύ 0% και 100% είναι γραμμικοί πολλαπλασιαστές στο εφέ. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%. Δεν επιτρέπονται αρνητικές τιμές.
διαβρέχω()
filter: saturate(2); /* same as… */ filter: sature(200%);Διαποτίζει την εικόνα εισόδου. Η τιμή του "ποσού" καθορίζει το ποσοστό της μετατροπής. Η τιμή 0% είναι εντελώς μη κορεσμένη. Μια τιμή 100% αφήνει την είσοδο αμετάβλητη. Άλλες τιμές είναι γραμμικοί πολλαπλασιαστές στο εφέ. Επιτρέπονται τιμές άνω του 100%, παρέχοντας εξαιρετικά κορεσμένα αποτελέσματα. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%. Δεν επιτρέπονται αρνητικές τιμές.
απόχρωση-περιστροφή ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Εφαρμόζει μια περιστροφή απόχρωσης στην εικόνα εισόδου. Η τιμή της «γωνίας» καθορίζει τον αριθμό των βαθμών γύρω από τον κύκλο χρώματος που θα ρυθμιστούν τα δείγματα εισόδου. Η τιμή 0deg αφήνει την είσοδο αμετάβλητη. Εάν λείπει η παράμετρος "γωνία", χρησιμοποιείται μια τιμή 0deg. Η μέγιστη τιμή είναι 360deg.
αντιστρέφω()
filter: invert(100%);Αντιστρέφει τα δείγματα στην εικόνα εισαγωγής. Η τιμή του "ποσού" καθορίζει το ποσοστό της μετατροπής. Μια τιμή 100% είναι πλήρως ανεστραμμένη. Μια τιμή 0% αφήνει την είσοδο αμετάβλητη. Οι τιμές μεταξύ 0% και 100% είναι γραμμικοί πολλαπλασιαστές στο εφέ. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%. Δεν επιτρέπονται αρνητικές τιμές.
αδιαφάνεια()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Εφαρμόζει διαφάνεια στα δείγματα στην εικόνα εισαγωγής. Η τιμή του "ποσού" καθορίζει το ποσοστό της μετατροπής. Η τιμή 0% είναι εντελώς διαφανής. Μια τιμή 100% αφήνει την είσοδο αμετάβλητη. Οι τιμές μεταξύ 0% και 100% είναι γραμμικοί πολλαπλασιαστές στο εφέ. Αυτό ισοδυναμεί με τον πολλαπλασιασμό των δειγμάτων εικόνας εισόδου κατά ποσότητα. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%. Αυτή η συνάρτηση είναι παρόμοια με την πιο καθιερωμένη ιδιότητα αδιαφάνειας. η διαφορά είναι ότι με φίλτρα, ορισμένα προγράμματα περιήγησης παρέχουν επιτάχυνση υλικού για καλύτερη απόδοση. Δεν επιτρέπονται αρνητικές τιμές.
λάμψη()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Εφαρμόζει έναν γραμμικό πολλαπλασιαστή για την εισαγωγή εικόνας, κάνοντάς το να φαίνεται λίγο ή πολύ φωτεινό Μια τιμή 0% θα δημιουργήσει μια εικόνα που είναι εντελώς μαύρη. Μια τιμή 100% αφήνει την είσοδο αμετάβλητη. Άλλες τιμές είναι γραμμικοί πολλαπλασιαστές στο εφέ. Επιτρέπονται τιμές άνω του 100%, παρέχοντας φωτεινότερα αποτελέσματα. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%.
αντίθεση()
filter: contrast(4); /* same as… */ filter: contrast(400%);Ρυθμίζει την αντίθεση της εισόδου. Μια τιμή 0% θα δημιουργήσει μια εικόνα που είναι εντελώς μαύρη. Μια τιμή 100% αφήνει την είσοδο αμετάβλητη. Επιτρέπονται τιμές άνω του 100%, παρέχοντας αποτελέσματα με λιγότερη αντίθεση. Εάν λείπει η παράμετρος "ποσό", χρησιμοποιείται τιμή 100%.
θολούρα()
filter: blur(5px); filter: blur(1rem);Εφαρμόζει ένα θόλωμα Gaussian στην εικόνα εισαγωγής. Η τιμή της «ακτίνας» καθορίζει την τιμή της τυπικής απόκλισης στη συνάρτηση Gauss ή πόσα pixel στην οθόνη αναμιγνύονται μεταξύ τους, οπότε μια μεγαλύτερη τιμή θα δημιουργήσει περισσότερο θόλωμα. Εάν δεν παρέχεται παράμετρος, τότε χρησιμοποιείται η τιμή 0. Η παράμετρος καθορίζεται ως μήκος CSS, αλλά δεν δέχεται ποσοστιαίες τιμές.
σκίαση()
filter: drop-shadow((2,3) ?)Εφαρμόζει ένα εφέ πτώσης στην εικόνα εισαγωγής. Το drop shadow είναι ουσιαστικά μια θολή, μετατοπισμένη έκδοση της άλφα μάσκας της εικόνας εισαγωγής που έχει σχεδιαστεί σε ένα συγκεκριμένο χρώμα, που συντίθεται κάτω από την εικόνα. Η συνάρτηση δέχεται μια παράμετρο τύπου (που ορίζεται σε Φόντα CSS3), με την εξαίρεση ότι η λέξη-κλειδί «ένθετο» δεν επιτρέπεται.
Αυτή η λειτουργία είναι παρόμοια με την πιο καθιερωμένη ιδιότητα box-shadow. η διαφορά είναι ότι με φίλτρα, ορισμένα προγράμματα περιήγησης παρέχουν επιτάχυνση υλικού για καλύτερη απόδοση.
Το Drop-shadow μιμείται επίσης τα προβλεπόμενα αντικείμενα που περιγράφονται φυσικά σε αντίθεση με box-shadowαυτό που αντιμετωπίζει μόνο το κουτί ως διαδρομή του.
Ακριβώς όπως με το κείμενο-σκιά, δεν υπάρχει παράμετρος «spread» για να δημιουργήσετε μια σταθερή σκιά μεγαλύτερη από το αντικείμενο.
url ()
filter: url()Η url()συνάρτηση λαμβάνει τη θέση ενός αρχείου XML που καθορίζει ένα φίλτρο SVG και μπορεί να περιλαμβάνει μια αγκύρωση σε ένα συγκεκριμένο στοιχείο φίλτρου. Ακολουθεί ένα σεμινάριο που λειτουργεί ως ωραία εισαγωγή στα φίλτρα SVG με μια διασκεδαστική επίδειξη.
Κινούμενα φίλτρα
Δεδομένου ότι τα φίλτρα είναι κινούμενα σχέδια, μπορεί να ανοίξει τις πόρτες για μια ευχάριστη διασκέδαση.
Σημειώσεις
Μπορείτε να συνδυάσετε οποιονδήποτε αριθμό λειτουργιών για να χειριστείτε την απόδοση, αλλά η παραγγελία εξακολουθεί να έχει σημασία (δηλαδή, η χρήση grayscale()μετά sepia()θα έχει ως αποτέλεσμα εντελώς γκρίζα έξοδο).
Μια υπολογισμένη τιμή διαφορετική από το "κανένας" οδηγεί στη δημιουργία ενός περιβάλλοντος στοίβαξης με τον ίδιο τρόπο που κάνει η αδιαφάνεια CSS. Η ιδιότητα φίλτρου δεν έχει καμία επίδραση στη γεωμετρία του μοντέλου πλαισίου του στοχευόμενου στοιχείου, παρόλο που τα φίλτρα μπορούν να προκαλέσουν ζωγραφική έξω από το πλαίσιο περιγράμματος ενός στοιχείου. Τυχόν μέρη του στοιχείου στόχου επηρεάζονται από τις λειτουργίες φίλτρου. Αυτό περιλαμβάνει οποιοδήποτε περιεχόμενο, φόντο, περίγραμμα, διακόσμηση κειμένου, περίγραμμα και ορατό μηχανισμό κύλισης του στοιχείου στο οποίο εφαρμόζεται το φίλτρο, καθώς και εκείνων των απογόνων του. Τα φίλτρα μπορούν επίσης να εφαρμοστούν σε ενσωματωμένο περιεχόμενο, όπως μεμονωμένα εύρη κειμένου.
Η προδιαγραφή εισάγει επίσης μια filter(image-URL, filter-functions)λειτουργία περιτύλιξης για μια εικόνα. Θα σας επέτρεπε να φιλτράρετε οποιαδήποτε εικόνα τη στιγμή που τη χρησιμοποιείτε στο CSS. Για παράδειγμα, θα μπορούσατε να θολώσετε μια εικόνα φόντου χωρίς να θολώσετε το κείμενο. Αυτή η λειτουργία φίλτρου δεν υποστηρίζεται ακόμη στα προγράμματα περιήγησης. Εν τω μεταξύ, μπορείτε να εφαρμόσετε τόσο το φόντο όσο και το φίλτρο σε ένα ψευδο-στοιχείο για να δημιουργήσετε ένα παρόμοιο εφέ.
Το αποκλειστικό φίλτρο IE
Χρησιμοποίησε επίσης την filterιδιοκτησία, όπως:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Συνήθως χρησιμοποιείται για αδιαφάνεια όταν χρειάζεστε υποστήριξη IE 8 και κάτω.
Περισσότερες πληροφορίες
- Προδιαγραφή εφέ φίλτρου W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Γκαλερί φίλτρων του Bennett Feely
- Έγγραφα MDN
- Μπορώ να χρησιμοποιήσω
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Κατανόηση των εφέ φίλτρου CSS
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 18 * | 35 | Οχι | 79 | 6 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 * | 6.0-6.1 * |