Προσαρμογή εικόνας με εφέ φιλτραρίσματος CSS

Ρύθμιση εικόνας Λάμψη και Αντίθεση, ή μετατρέποντας την εικόνα σε Στάση του γκρι ή Σεφία είναι ένα κοινό χαρακτηριστικό που μπορείτε να βρείτε στην εφαρμογή επεξεργασίας εικόνας, όπως Photoshop. Ωστόσο, είναι τώρα δυνατό να προσθέσετε τα ίδια αποτελέσματα στις εικόνες ιστού χρησιμοποιώντας το CSS.

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

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

Τα αποτελέσματα

Η εφαρμογή των αποτελεσμάτων είναι πολύ εύκολη. Ρίξτε μια ματιά στο παρακάτω απόσπασμα, για να μετατρέψετε τις εικόνες σε κλίμακα του γκρι.

 img -webkit-filter: κλίμακα του γκρι (100%);  

... και αυτό είναι για καστανόχρους ala Instagram.

 img -webkit-φίλτρο: σέπια (100%);  

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

Είναι επίσης δυνατή η φωτεινότητα της εικόνας και μπορούμε να το κάνουμε χρησιμοποιώντας το λάμψη ως εξής:

 img -webkit-φίλτρο: φωτεινότητα (50%);  

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

Το εφέ φωτεινότητας επίσης επιτρέπει αρνητικές τιμές, στην οποία θα το κάνει σκουραίνει την εικόνα.

 img -webkit-φίλτρο: φωτεινότητα (-50%);  

... και μπορούμε να προσαρμόσουμε την αντίθεση της εικόνας με αυτόν τον τρόπο.

 img -webkit-φίλτρο: αντίθεση (200%);  

Υπάρχει μια μικρή διαφορά ως προς το πώς λειτουργεί και η αξία, όπως μπορείτε να δείτε στα παραπάνω, ρυθμίζουμε αντίθεση() με 200%, αυτό οφείλεται στο γεγονός ότι η αξία του 100% είναι το σημείο εκκίνησης όπου η εικόνα θα παραμείνει αμετάβλητη. Όταν η τιμή είναι χαμηλότερη 100%, ας πούμε 50%, η εικόνα θα γίνει λιγότερο αντιφατική.

Επιπλέον, μπορούμε επίσης να συνδυάσουμε το αποτέλεσμα σε ένα μπλοκ δήλωσης, όπως στο παρακάτω παράδειγμα. Γυρίζουμε την εικόνα κλίμακα του γκρι και να αυξήσει το αντίθεση κατά 50% ταυτόχρονα.

 img -webkit-filter: γκρίζα κλίμακα (100%) αντίθεση (150%);  

Συνδυάζοντας το φίλτρο με τη μετάβαση CSS3 μπορούμε να κάνουμε μια χαριτωμένη φτερουγίζω αποτέλεσμα.

 img: hover -webkit-filter: κλίμακα του γκρι (0%);  img: hover -webkit-filter: σέπια (0%);  img: hover -webkit-filter: φωτεινότητα (0%);  img: hover -webkit-filter: αντίθεση (100%);  

Τέλος, υπάρχει ένα ακόμα αποτέλεσμα που μπορούμε να δοκιμάσουμε. ο Gaussian Blur, που θα θολώσει το στοχευόμενο στοιχείο.

 img: μετακινήστε το -webkit-filter: θαμπά (5px);  

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

Τελική σκέψη

Υπάρχουν στην πραγματικότητα πολύ περισσότερα αποτελέσματα στο spec. όπως απόχρωση-περιστροφή, αντιστρέφω και διαβρέχω, αλλά νομίζω ότι εφαρμόζονται λιγότερο σε πραγματικές περιπτώσεις Web. Έτσι, η συζήτηση περιορίστηκε σε τέσσερα μόνο αποτελέσματα.

Και, παρά τη συζήτηση που εφαρμόζεται σε εικόνες σε αυτό το σεμινάριο, η ιδιότητα μπορεί επίσης να εφαρμοστεί σε οποιοδήποτε στοιχείο στο DOM.

Τέλος, μπορείτε να δείτε την ζωντανή επίδειξη από αυτούς τους συνδέσμους παρακάτω. Λάβετε υπόψη ότι το φίλτρο υποστηρίζεται αυτήν τη στιγμή μόνο Chrome 19 και παραπανω.

• Διαδήλωση
• Λήψη πηγής