Css φίλτρα για εικόνες. Φίλτρα CSS3: αλλαγή εικόνων με χρήση στυλ. Φίλτρα URL που σχετίζονται με SVG

Γεια σας φίλοι, σήμερα έχω ένα πραγματικά ΜΕΓΑΛΟ μάθημα για εσάς, ολόκληρα 27 λεπτά. Αλλά σε αυτό θα δούμε απλώς μια πολύ, πολύ, πολύ ενδιαφέρουσα ιδιότητα που θα σας επιτρέψει να ορίσετε διάφορα ειδικά εφέ για εικόνες χωρίς να μπείτε σε Το πρόγραμμα Photoshopκαι άλλοι συντάκτες.

Φίλτροείναι μια ιδιότητα στο CSS3 που μπορεί να τροποποιήσει τις εικόνες σας. Εφαρμόστε θαμπάδα, αυξήστε την αντίθεση και τη φωτεινότητα, προσθέστε σκιές, αλλάξτε χρώματα και πολλά, πολλά άλλα.

Συνολικά, το Φίλτρο έχει 10 τιμές που σας επιτρέπουν να κάνετε «κάθε είδους ενδιαφέροντα πράγματα» με στοιχεία ιστότοπου. Τώρα προτείνω να αναλύσουμε όλες αυτές τις 10 έννοιες στην πράξη στο βίντεο εκμάθησης παρακάτω.

Φίλτρο βίντεο CSS 3 – Φίλτρα εικόνας:

Ένα παράδειγμα της σελίδας που δημιουργούμε σε αυτό το σεμινάριο:

Μπορείτε να κάνετε λήψη του αρχείου προτύπου χρησιμοποιώντας το .

Προσοχή! Η ιδιότητα φίλτρα είναι προς το παρόν σε δοκιμή και υποστηρίζεται πλήρως μόνο από το πρόγραμμα περιήγησης Firefox. ΕΝΑ πρόγραμμα περιήγησης Chromeκαι άλλες που βασίζονται στη μηχανή Webkit, αυτή η ιδιότητα λειτουργεί μόνο όταν προσθέτετε προθέματα. Δείχνω προθέματα στο τέλος του μαθήματος, γι' αυτό προτείνω να το διαβάσετε πρώτα. Το τελευταίο Firefoxεκδόσεις.

Εάν είστε πολύ τεμπέλης για να παρακολουθήσετε το βίντεο, μπορείτε να το παρακολουθήσετε αναλυτικές οδηγίεςπαρακάτω με όλους τους κανόνες φίλτρου.

10 Εφέ φίλτρου στο CSS3

Λάβετε υπόψη ότι όλα τα εφέ στις παρακάτω εικόνες υλοποιούνται μόνο με χρήση CSS3, επομένως δεν θα είναι ορατά σε παλαιότερα προγράμματα περιήγησης!!!

1. Θολώστε το φίλτρο

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

Ας προσπαθήσουμε να εφαρμόσουμε το φίλτρο μας στην αλεπού γράφοντας τον ακόλουθο κώδικα:

Αριστερά, για λόγους σαφήνειας, έβαλα μια κανονική εικόνα, αλλά στα δεξιά είναι η ίδια εικόνα, τροποποιημένη μόνο με χρήση CSS3.

Ένα φίλτρο με τιμή θαμπώματος καθορίζεται σε pixel. Επιπλέον, όσο υψηλότερη είναι αυτή η τιμή, τόσο πιο θολή εμφανίζεται η εικόνα.

Φωτεινότητα φίλτρου

Αυτό το φίλτρο είναι παρόμοιο με την αλλαγή της φωτεινότητας μιας οθόνης τηλεόρασης. ΣΕ σε αυτήν την περίπτωσηρυθμιζόμενο χρώμα μεταξύ μαύρου και πρωτότυπο χρώμακαθώς προστίθενται παράμετροι.

Και εδώ είναι το πειραματικό μας άλογο:

Μπορείτε να προσαρμόσετε από 0% ή περισσότερο. Στο 0% η εικόνα θα είναι μαύρη, στο 100% θα είναι πρωτότυπη και στο 200% θα γίνει διπλάσια φωτεινή. Αυτό είναι πολύ καλό αποτέλεσμα, ειδικά για σκοτεινές εικόνες.

Το φίλτρο φωτεινότητας μπορεί να καθοριστεί με 3 τρόπους:

1. ολόκληροι αριθμοί
2. κλασματικοί αριθμοί
3. ενδιαφέρον

Επιπλέον, καταρχήν δεν υπάρχουν περιορισμοί. Στο παράδειγμα, ορίσαμε την τιμή στο 2 και αυξήσαμε τη φωτεινότητα της εικόνας μας κατά 2 φορές ή 200%.

3. Φίλτρο αντίθεσης

Αυτό το φίλτρο θα σας επιτρέψει να αυξήσετε την αντίθεση μιας εικόνας προσαρμόζοντας τη διαφορά μεταξύ των φωτεινών και σκούρων τόνων της εικόνας. Εδώ, οι τιμές καθορίζονται επίσης με τρεις τρόπους: ακέραιους αριθμούς, κλάσματα και ποσοστά. Άρα το 100% είναι η προεπιλεγμένη τιμή. 0% - μαύρη εικόνα. Και οτιδήποτε περισσότερο από 100% σου προσθέτει αντίθεση.

Αυτή τη φορά θα κοροϊδέψουμε τη γάτα. Ας προσθέσουμε +50% αντίθεση σε αυτό:

Ιδού το αποτέλεσμα:

Όπως μπορείτε να δείτε, τώρα δεν χρειάζεται καν να χρησιμοποιήσουμε το Photoshop για να δημιουργήσουμε αντίθεση και θόλωση. Εδώ, ακριβώς στο CSS, παίρνουμε και αλλάζουμε τις εικόνες όπως θέλει η καρδιά μας.

4. Κορεσμός φίλτρου - κορεσμός

Αυτό είναι ένα πολύ ωραίο εφέ που θα κάνει τις εικόνες σας πιο ζωντανές και πλούσιες. Υποδεικνύουμε τις τιμές σε τρεις επιλογές: ακέραιους και κλασματικούς αριθμούς, καθώς και ποσοστά. Ας καθορίσουμε την τιμή - 200%. Ας αυξήσουμε τον κορεσμό της εικόνας μας κατά 2 φορές.

Η θάλασσα έχει γίνει αισθητά πιο ευχάριστη:

Δείτε πόσο ζουμερή ήταν η εικόνα. Νομίζω ότι είναι ένα πολύ ωραίο αποτέλεσμα! Πάμε;;

5. Διαφάνεια - αδιαφάνεια φίλτρου

Ρυθμίζει τη διαφάνεια. Ορισμένοι περιορισμοί επιβάλλονται στις τιμές αυτού του φίλτρου:

• ποσοστά: από 0% έως 100

Ας προσπαθήσουμε να μειώσουμε τη διαφάνεια της παρακάτω εικόνας κατά 50%.

Δείτε τι έγινε:

6. Αναστροφή φίλτρου - invert

Σας επιτρέπει να "αναστρέφετε" χρώματα. Υπάρχουν επίσης περιορισμοί στις τιμές αυτού του φίλτρου:

• ακέραιοι και κλασματικοί αριθμοί: από το 0 έως το 1
• ποσοστά: από 0% έως 100

Στην περίπτωσή μας θα ορίσουμε μέγιστη αξία - 100 %:

Και με μια ελαφριά κίνηση του χεριού, ένα όμορφο σπορ αυτοκίνητο μετατρέπεται σε...

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

7. Φίλτρο σέπια

Θα σας επιτρέψει να αλλάξετε το χρώμα προσθέτοντας έναν τόνο σέπια. Δηλαδή θα αποκτήσεις μίμηση παλιά φωτογραφία. Οι περιορισμοί στις τιμές των φίλτρων είναι οι ίδιοι με τους δύο προηγούμενους.

• ακέραιοι και κλασματικοί αριθμοί: από το 0 έως το 1
• ποσοστά: από 0% έως 100

Καλά; Θα προσπαθήσουμε;

Γαμώτο! Με ένα ελαφρύ κύμα του χεριού, θα γεράσει αυτή η φωτογραφία κατά μερικές δεκαετίες Φαίνεται ότι τρελαίνομαι με αυτά τα παραδείγματα.

Στην περίπτωσή μας, καθορίσαμε μια κλασματική τιμή - 0,5. Αλλά μπορείτε να πειραματιστείτε όπως θέλετε!

8. Φίλτρο αποχρώσεων του γκρι

Αυτό το φίλτρο μας επιτρέπει να μετατρέπουμε τα χρώματα σε αποχρώσεις του γκρι. Υπάρχουν επίσης περιορισμοί στις τιμές φίλτρου:

• ακέραιοι και κλασματικοί αριθμοί: από το 0 έως το 1
• ποσοστά: από 0% έως 100

Έτσι, στο 100% ολόκληρη η εικόνα θα είναι σε κλίμακα του γκρι και στο 0% θα παραμείνει αμετάβλητη. 0 ισούται με 0%, και 1,0 ισούται με 100%.

Ας ορίσουμε την τιμή σε 0,7 (ή 70%):

Μπορεί να είναι απαραίτητο να γίνει μια εικόνα γκρι όσο το δυνατόν γρηγορότερα και χωρίς τη χρήση επεξεργαστών γραφικών. Φυσικά μπορείτε να χρησιμοποιήσετε γραφικός επεξεργαστής Adobe Photoshop (μπορείτε ακόμη και να ρυθμίσετε το βάθος και τον τόνο). Φυσικά, δεν μπορείτε να διαμορφώσετε τέτοιες παραμέτρους στο πρόγραμμα περιήγησης, αλλά τα μάτια μας (εκτός αν, φυσικά, είστε επαγγελματίας) δύσκολα θα παρατηρήσουν τη διαφορά.

Σε αυτό το άρθρο θα εξετάσουμε τρόπους για να κάνετε μια εικόνα γκρι.

1. Φίλτρο CSS

Χρήση της ιδιοκτησίας φίλτροείναι ίσως το πιο με απλό τρόποδημιουργώ ασπρόμαυρη εικόνα. Για να δημιουργήσετε μια ασπρόμαυρη εικόνα στον IE, πρέπει επίσης να χρησιμοποιήσετε την ιδιότητα φίλτρο.

Σήμερα, ιδιοκτησία φίλτροαποτελεί μέρος της τεχνολογίας CSS3, η οποία υποστηρίζεται από προγράμματα περιήγησης όπως το Firefox, το Chrome και το Safari. Τα φίλτρα Webkit μπορούν όχι μόνο να δημιουργήσουν ένα ασπρόμαυρο εφέ, αλλά μπορούν επίσης να δώσουν εφέ σέπια και θολώματος.

Για να κάνετε την εικόνα γκρίζα, πρέπει να ορίσετε τις ακόλουθες ιδιότητες:

Αυτός ο κώδικας θα λειτουργεί σε IE6-9, Chrome18+, Safari 6.0+ και Opera15+.

2. Javascript

Μια εναλλακτική λύση στον παραπάνω κώδικα είναι το Javascript, το οποίο λειτουργεί σε όλα τα προγράμματα περιήγησης, εάν είναι ενεργοποιημένο, συμπεριλαμβανομένου του IE6 και του παρακάτω.

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

3.SVG

Ένας άλλος τρόπος είναι να χρησιμοποιήσετε φίλτρα SVG.

Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε Αρχείο SVGκαι χρησιμοποιήστε τον παρακάτω κώδικα:

Μπορείτε επίσης να γράψετε όλο τον κώδικα απευθείας στο CSS:

Το αποτέλεσμα θα είναι παρόμοιο.

συμπέρασμα

Για υποστήριξη αυτό το αποτέλεσμαόλα τα προγράμματα περιήγησης, πρέπει να συνδυάσετε όλες τις μεθόδους. Αυτός ο κώδικας θα λειτουργεί σε Firefox 3.5+, Opera15+, Safari, Chrome και IE.

Αυτός ο κώδικας μπορεί να χρησιμοποιηθεί μαζί με το Javascript και εάν το Javascript είναι απενεργοποιημένο, θα λειτουργήσει αυτόν τον κωδικό. Το Modernizr μπορεί να βοηθήσει σε αυτό.

Ο Modernizr προσθέτει js class for body, εάν η Javascript είναι ενεργοποιημένη στο πρόγραμμα περιήγησης, και θα καταχωρήσει την τάξη όχι-jsεάν η Javascript είναι απενεργοποιημένη. Και το μόνο που μένει να γραφτεί σε CSS είναι το εξής:

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

Πως δουλεύει;

Χρησιμοποιώντας μόνο CSS μπορούμε να δημιουργήσουμε αρκετά πολύπλοκα εφέ. Μπορούν να εφαρμοστούν τόσο σε εικόνες όσο και σε στοιχεία HTML. Η ιδιότητα που χρησιμοποιείται για τον έλεγχο όλων αυτών των επιδράσεων είναι φίλτρο.

φίλτρο: φίλτρο(τιμή) ;

Όπως θα περίμενε κανείς, αυτή η ιδιότητα απαιτεί τη χρήση ενός προθέματος προγράμματος περιήγησης. Αλλά επάνω αυτή τη στιγμή, μόνο -webkit-(Chrome και Safari) είναι οι μόνες μηχανές προγράμματος περιήγησης που υποστηρίζουν αυτήν την ιδιότητα.

Webkit-filter: filter(value) ;
-moz-filter: filter(value) ;
-o-filter: filter(value) ;
-ms-filter: filter(value) ;

Διήθηση

Υπάρχουν πολλά φίλτρα, οπότε για να κατανοήσετε καλύτερα το καθένα, ας τα δούμε ξεχωριστά. Μπορούν να εφαρμοστούν πολλαπλά φίλτρα σε ένα στοιχείο (που χωρίζονται με κενό), για παράδειγμα, λάμψηΚαι θολούρα:

φίλτρο: θόλωση (5 εικονοστοιχεία) φωτεινότητα (0,5 ) ;

Υπάρχουν μερικά φίλτρα που δεν θα καλυφθούν παρακάτω, αλλά μπορούν εύκολα να εφαρμοστούν με το υπάρχον CSS (διαφάνεια και σκιές). Εδώ πρωτότυπη εικόνα, το οποίο θα χρησιμοποιήσουμε για να δείξουμε πώς λειτουργούν τα φίλτρα:

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

Θολούρα

Θέλατε ποτέ να κάνετε ένα Gaussian blur σε μια εικόνα ή κείμενο χρησιμοποιώντας μόνο CSS; Με φίλτρα μπορείς να το κάνεις! Το θάμπωμα μετριέται σε pixel, οπότε μπορείτε να κάνετε κάτι σαν αυτό:

φίλτρο: blur(5px) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-filter: blur(5px) ;
-moz-filter: blur(5px) ;
-o-filter: blur(5px) ;
-ms-filter: blur(5px) ;

Λάμψη

Η φωτεινότητα μετριέται από το μηδέν έως το ένα, το 1 είναι η πλήρης φωτεινότητα ( άσπρο χρώμα), και 0 είναι η αρχική φωτεινότητα.

φίλτρο: φωτεινότητα (0,2 ) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-φίλτρο: φωτεινότητα(0.2) ;
-moz-φίλτρο: φωτεινότητα (0,2 ) ;
-o-φίλτρο: φωτεινότητα(0.2) ;
-ms-φίλτρο: φωτεινότητα(0.2) ;

Κορεσμός

Ο κορεσμός μετράται ως ποσοστό.

φίλτρο: κορεσμένο (50%) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-filter: saturate(50%) ;
-moz-filter: saturate(50%) ;
-o-φίλτρο: κορεσμένος(50%) ;
-ms-φίλτρο: κορεσμένος(50%) ;

Περιστροφή τόνου

Αυτό το φίλτρο σάς επιτρέπει να αλλάξετε τον τόνο περιστρέφοντάς τον (σκεφτείτε έναν τροχό χρωμάτων που στη συνέχεια περιστρέφετε). Μετριέται σε μοίρες.

φίλτρο: hue-rotate (20 deg) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-φίλτρο: hue-rotate (20deg) ;
-moz-filter: hue-rotate (20deg) ;
-o-φίλτρο: hue-rotate (20deg) ;
-ms-φίλτρο: hue-rotate(20deg) ;

Αντίθεση

Η αντίθεση, πάλι, μετριέται ως ποσοστό. Το 100% είναι η προεπιλογή, το 0% θα δημιουργήσει μια εντελώς μαύρη εικόνα. Οτιδήποτε περισσότερο από 100% προσθέτει αντίθεση!

φίλτρο: αντίθεση (150%) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-φίλτρο: αντίθεση (150%) ;
-moz-φίλτρο: αντίθεση (150%) ;
-o-φίλτρο: αντίθεση (150%) ;
-ms-φίλτρο: αντίθεση(150%) ;

Αναστροφή

Μετριέται και ως ποσοστό. Οι διαθέσιμες τιμές κυμαίνονται από 0% έως 100%. Παραδόξως, αυτή τη στιγμή, το webkit δεν υποστηρίζει αντιστροφές εάν είναι μικρότερες από 100%.

φίλτρο: invert (100%) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-filter: invert (100%) ;
-moz-filter: invert (100%) ;
-o-filter: invert (100%) ;
-ms-filter: invert (100%) ;

Λεύκανση

Και πάλι, εισαγάγετε το ποσοστό κατά το οποίο θέλετε να αποκορεσθεί η εικόνα. Οι διαθέσιμες τιμές κυμαίνονται από 0% έως 100%.

φίλτρο: κλίμακα του γκρι (100%) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-φίλτρο: κλίμακα του γκρι (100%) ;
-moz-φίλτρο: κλίμακα του γκρι (100%) ;
-o-φίλτρο: κλίμακα του γκρι (100%) ;
-ms-φίλτρο: κλίμακα του γκρι(100%) ;

Καστανόχρους

Υποθέτω ότι αυτό είναι πολύ χρήσιμο αν θέλετε να δημοσιεύσετε κάτι στο Instagram. Αν και υποθέτω επίσης ότι δεν θα χρησιμοποιείτε CSS για αυτό. ΤΕΛΟΣ παντων, παρόμοιες αποχρώσειςγκρι και αρνητικό αθροίζονται για να προσθέσουν σέπια στην εικόνα σας. 100% - αυτό θα είναι πλήρης σέπια, 0% - πρωτότυπη εικόνα.

φίλτρο: σέπια (100%) ;
// Ειδικό πρόγραμμα περιήγησης
-webkit-φίλτρο: σέπια (100%) ;
-moz-φίλτρο: σέπια (100%) ;
-o-φίλτρο: σέπια (100%) ;
-ms-φίλτρο: σέπια (100%) ;

Υποστήριξη προγράμματος περιήγησης

Εάν έχετε οποιεσδήποτε ερωτήσεις, συνιστούμε να χρησιμοποιήσετε το δικό μας

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

Παρελθόν, παρόν και μέλλον των φίλτρων

Τα φίλτρα δημιουργήθηκαν ως μέρος της προδιαγραφής SVG. Το καθήκον τους ήταν να εφαρμόσουν εφέ που βασίζονται σε πλέγμα pixel σε διανυσματικά γραφικά. Με τον καιρό, τα προγράμματα περιήγησης στο Διαδίκτυο εξοπλίστηκαν με υποστήριξη SVG και η χρησιμότητα των φίλτρων έγινε εμφανής. Ο Robert O'Callahan από τη Mozilla περιέγραψε την ιδέα της εφαρμογής φίλτρων SVG Στοιχεία DOMπεριγράφοντάς τα σε CSS. Δημιούργησε ένα παράδειγμα στο οποίο έδειξε πόσο πιο απλό θα μπορούσε να είναι εφαρμογή του SVGεφέ σε συνδυασμό με CSS. Εργάτες Ομάδες CSSκαι το SVG ενώθηκαν και δημιούργησαν μια νέα ιδιότητα CSS φίλτρο. Βρίσκεται η τεκμηρίωση για αυτήν την προδιαγραφή.

Νέα ζωή για την ιδιοκτησία «φίλτρου».

Μερικές φορές, ενώ εξετάζετε τον κώδικα CSS μιας σελίδας στο Διαδίκτυο, συναντάτε συχνά αυτό το ακίνητο. Αλλά στις περισσότερες περιπτώσεις αυτή η ιδιότητα είναι γραμμένη για παλιά Εκδόσεις Διαδικτύου Explorer, ελέγχει ορισμένα από τα εφέ που εφαρμόζονται στο πρόγραμμα περιήγησης. Αυτή η ιδιότητα έχει παραλειφθεί υπέρ μιας τυπικής που αποτελεί ήδη μέρος της προδιαγραφής CSS3.

Πώς λειτουργούν τα φίλτρα

Τι κάνουν τα φίλτρα; Μπορείτε να φανταστείτε ότι πρόκειται για ένα είδος μετα-διαδικασίας που κάνει θαύματα στα στοιχεία της σελίδας μετά την απόδοσή τους.

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

Περιγραφή φίλτρων με χρήση SVG και CSS

Υπάρχουν διάφοροι τρόποι περιγραφής και εφαρμογής φίλτρων. Το ίδιο το SVG είναι ένα στοιχείο στο οποίο τα φίλτρα περιγράφονται χρησιμοποιώντας σύνταξη XML. Περιγραφή των φίλτρων που χρησιμοποιούνται Στυλ CSSδίνει το ίδιο αποτέλεσμα, αλλά χάρη σε Σύνταξη CSSαυτή η μέθοδος είναι πολύ πιο απλή.

Το πιο τυπικό Φίλτρα CSSμπορεί επίσης να περιγραφεί με χρησιμοποιώντας SVG, το CSS σάς επιτρέπει επίσης να αναφέρετε φίλτρα που περιγράφονται σε μορφή SVG. Εδώ θα μιλήσουμε μόνο για τα φίλτρα που είναι διαθέσιμα στο CSS.

Πώς να χρησιμοποιήσετε τα φίλτρα CSS

Τα φίλτρα μπορούν να εφαρμοστούν σε οποιοδήποτε ορατό στοιχείο στη σελίδα.

Div ( φίλτρο: κλίμακα του γκρι (100%); )

Αυτό το παράδειγμαθα αλλάξει το χρώμα του περιεχομένου μέσα στην ετικέτα σε ασπρόμαυρο.

Κάθε φίλτρο έχει μια παράμετρο που σας επιτρέπει να αλλάξετε την ισχύ του φίλτρου.

Div (φίλτρο: κλίμακα του γκρι (50%); )

Μπορείτε να εφαρμόσετε πολλά φίλτρα ταυτόχρονα.

Ποια φίλτρα είναι διαθέσιμα για χρήση στο CSS

κλίμακα του γκρι (τιμή)

Μετατρέπει τα χρώματα σε ασπρόμαυρο. Η τιμή καθορίζεται τόσο ως ποσοστό (0% - 100%) όσο και δεκαδικά (0 - 1).

σέπια (τιμή)

Δημιουργεί ένα εφέ σέπια. Η τιμή καθορίζεται τόσο ως ποσοστό (0% - 100%) όσο και ως δεκαδικό κλάσμα (0 - 1).

κορεσμός (τιμή)

Ελέγχει τον κορεσμό των χρωμάτων. Η τιμή καθορίζεται τόσο ως ποσοστό (0% - 100%) όσο και ως δεκαδικό κλάσμα (0 - 1).

περιστροφή απόχρωσης (γωνία)

Αλλάζει τα χρώματα της εικόνας ανάλογα με δεδομένη γωνία. Η γωνία περιστροφής καθορίζει πόσο ένα δεδομένο χρώμα θα αλλάξει στον τροχό χρώματος από κόκκινο σε μοβ. Η τιμή καθορίζεται σε μοίρες (0deg - 360deg).

invert(τιμή)

Αντιστρέφει τα χρώματα. Η τιμή καθορίζεται τόσο ως ποσοστό (0% - 100%) όσο και ως δεκαδικό κλάσμα (0 - 1).

αδιαφάνεια (τιμή)

Ορίζει τη διαφάνεια του στοιχείου. Η τιμή καθορίζεται τόσο ως ποσοστό (0% - 100%) όσο και ως δεκαδικό κλάσμα (0 - 1).

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

φωτεινότητα (τιμή)

Αλλάζει τη φωτεινότητα της εικόνας. Η τιμή καθορίζεται τόσο ως ποσοστό (0% και περισσότερο) όσο και σε δεκαδικά κλάσματα (0 και άνω).

αντίθεση (τιμή)

Αλλάζει την αντίθεση της εικόνας. Η τιμή καθορίζεται τόσο ως ποσοστό (0% και περισσότερο) όσο και σε δεκαδικά κλάσματα (0 και άνω).

θόλωση (ακτίνα)

Δημιουργεί ένα εφέ θολώματος. Η τιμή καθορίζεται σε pixel (px).

drop-shadow (x, y, ακτίνα, χρώμα)

Δημιουργεί μια σκιά με τον ίδιο τρόπο Ιδιότητα CSS κουτί-σκιά, αλλά μόνο το φίλτρο έχει υποστήριξη επιτάχυνσης υλικού. Οι τιμές ορίζονται παρόμοια Τιμές CSSαναλογικό

Drop-shadow(16px 16px 20px μαύρο);

Φίλτρο: drop-shadow (ένθετο 0 0 2rm μπλε);

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

...

Div (φίλτρο: url(#foo); )

προσαρμοσμένο (προσεχώς)

Σύντομα θα υπάρχει η δυνατότητα να δημιουργήσετε τα δικά σας φίλτρα χρησιμοποιώντας CSS Shaders.

Εκτέλεση

Τα φίλτρα CSS παρέχουν άριστα οπτικά εφέ, αλλά ταυτόχρονα επηρεάζουν αρνητικά την απόδοση της ιστοσελίδας σας. Είναι σημαντικό να κατανοήσετε τι κάνουν και πώς επηρεάζει την απόδοση.

Τα περισσότερα φίλτρα λειτουργούν αρκετά γρήγορα σε οποιαδήποτε συσκευή τα υποστηρίζει. Ωστόσο, φίλτρα θολούραΚαι σκίαση, που χρησιμοποιούν το εφέ θολώματος, λειτουργούν πολύ πιο αργά από άλλα. Πώς ακριβώς λειτουργούν;

Όταν εφαρμόζετε ένα φίλτρο θολούρα, αναμειγνύει τα χρώματα των pixel γύρω από κάθε pixel, δημιουργώντας έτσι ένα θολό εφέ. Για παράδειγμα, αν δοθεί η ακτίνα 2 εικονοστοιχεία, τότε το φίλτρο θα επιλέξει δύο pixel προς όλες τις κατευθύνσεις και θα αναμίξει τα χρώματά τους και ούτω καθεξής για κάθε pixel. Πως μεγαλύτερη ακτίνα, τόσο περισσότερος χρόνος χρειάζεται για να υπολογιστεί το αποτέλεσμα. Δεδομένου ότι το φίλτρο επιλέγει pixel προς όλες τις κατευθύνσεις, όταν η ακτίνα θαμπώματος αυξάνεται κατά 2 φορές, ο αριθμός των pixel αυξάνεται κατά 4 φορές. Αυτό σημαίνει ότι ο χρόνος υπολογισμού θα διαρκέσει ακριβώς 4 φορές περισσότερο. Φίλτρο σκίασηπεριέχει ένα φίλτρο θολούρα.

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

Όταν χρησιμοποιείτε προσαρμοσμένα φίλτρα SVG, βεβαιωθείτε ότι δεν περιέχουν εφέ που μπορεί να επηρεάσουν αρνητικά την απόδοση.

Συμβατότητα

Τα περισσότερα φίλτρα CSS είναι πλέον διαθέσιμα για χρήση σε Πρόγραμμα περιήγησης FireFoxκαι προγράμματα περιήγησης που βασίζονται στη μηχανή WebKit. Ελπίζουμε να δούμε υποστήριξη σύντομα Πρόγραμμα περιήγησης Operaκαι ΙΕ10. Δεδομένου ότι η προδιαγραφή είναι ακόμη υπό ανάπτυξη, πρέπει να χρησιμοποιηθούν προθέματα προμηθευτή. Για το WebKit -webkit-φίλτρο, το FireFox δεν απαιτεί πρόθεμα.

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

Φίλτρα CSS3αναπαράγουν οπτικά εφέ στο πρόγραμμα περιήγησης παρόμοια με τα φίλτρα Photoshop. Τα φίλτρα μπορούν να προστεθούν όχι μόνο σε εικόνες, αλλά και σε τυχόν μη κενά στοιχεία.

Το σύνολο των φίλτρων δεν περιορίζεται σε αυτά που είναι προεγκατεστημένα στο πρόγραμμα περιήγησης. Μπορείτε επίσης να χρησιμοποιήσετε φίλτρα SVG κατεβάζοντάς τα από τον σύνδεσμο μαζί με το στοιχείο svg.

Τα φίλτρα δημιουργήθηκαν αρχικά ως μέρος της προδιαγραφής SVG. Το καθήκον τους ήταν να εφαρμόσουν εφέ βασισμένα σε πλέγμα pixel σε διανυσματικά γραφικά. Με την υποστήριξη του προγράμματος περιήγησης για SVG, είναι πλέον δυνατή η χρήση αυτών των εφέ απευθείας σε προγράμματα περιήγησης.

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

Μπορείτε να εφαρμόσετε πολλά φίλτρα ταυτόχρονα. Κλασικός τρόποςεφαρμογή τέτοιων εφέ - όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο: τοποθετήστε το δείκτη του ποντικιού .

Υποστήριξη προγράμματος περιήγησης

ΔΗΛ.:δεν υποστηρίζουν
Ακρη: 13.0 εκτός από το url()
Firefox: 35.0
Χρώμιο: 18.0 -webkit-
Σαφάρι: 9.1, 6.0 -webkit-
ΛΥΡΙΚΗ ΣΚΗΝΗ: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Πρόγραμμα περιήγησης Android: 53.0, 4.4 -webkit-
Χρώμιο για αντρόιντ: 55.0, 47.0 -webkit-