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

Περιγραφή

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

Σύνταξη

φίλτρο: progid:DXImageTransform.Microsoft.BasicImage(παράμετροι)

Επιλογές

enabled Ενεργοποιεί ή απενεργοποιεί το φίλτρο. Η τιμή true επιτρέπει τη χρήση του φίλτρου, το false το απενεργοποιεί. Τα χρώματα της κλίμακας του γκρι μετατρέπονται σε αποχρώσεις του γκρι. 1 — γκρι χρώματα, 0 — εμφάνιση των αρχικών χρωμάτων. invert Αντιστρέφει τα χρώματα του στοιχείου. 1 — αντιστροφή χρωμάτων, 0 — αφήστε τα αρχικά χρώματα. mask Ορίζει ορισμένα χρώματα ώστε να είναι διαφανή. 1 — η διαφάνεια αλλάζει χρησιμοποιώντας την παράμετρο maskColor, 0 — εμφάνιση των αρχικών χρωμάτων. mascColor Ορίζει το χρώμα που χρησιμοποιείται ως μάσκα διαφάνειας περιεχομένου του στοιχείου. Το χρώμα καθορίζεται στη μορφή 0xAARRGGBB, όπου AA είναι η δεκαεξαδική τιμή διαφάνειας, RR είναι το κόκκινο στοιχείο, GG είναι το πράσινο στοιχείο, BB είναι το μπλε στοιχείο. καθρέφτης Καθρεφτίζει το στοιχείο. 1 — καθρέφτης οριζόντια, 0 — αφήστε το πρωτότυπο. αδιαφάνεια Ορίζει την τιμή διαφάνειας. 0 — πλήρης διαφάνεια, 1,0 — αδιαφάνεια του στοιχείου. περιστροφή Περιστρέφει ένα στοιχείο. 0 - αρχική θέση, 1 - περιστροφή 90° δεξιόστροφα, 2 - περιστροφή 180°, 3 - περιστροφή 270°. xray Τα χρώματα μετατρέπονται σε κλίμακα του γκρι με ανεστραμμένα χρώματα.

Οι παράμετροι μέσα στο φίλτρο παρατίθενται χωρισμένες με κόμματα με οποιαδήποτε σειρά.

HTML5 CSS2.1 IE Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Χρησιμοποιώντας την παράμετρο ακτίνων x

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

Στο IE6 και IE7, τα φίλτρα εφαρμόζονται μόνο σε στοιχεία που έχουν το .

Ο Internet Explorer 9 δεν προσθέτει φίλτρα σε στοιχεία όταν εκτυπώνετε ένα έγγραφο.

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

Πώς να ξαναχρωματίσετε το χρώμα της γραμματοσειράς σε μια φωτογραφία

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

Για παράδειγμα, ας πάρουμε έναν πρωτόγονο κώδικα HTML:

Και προσθέστε λίγο πιο πρωτόγονο CSS σε αυτό:

Φόντο ( φόντο: url(super_cat.jpg); πλάτος: 800 εικονοστοιχεία; ύψος: 450 εικονοστοιχεία; ) h2 (χρώμα: #FFF; λειτουργία ανάμειξης: διαφορά; γραμματοσειρά: 900 120 px/120 εικονοστοιχεία Arial; στοίχιση κειμένου: στο κέντρο ) εύρος ( display:block; μέγεθος γραμματοσειράς: 80px)

Έγινε υπέροχο ακόμα και χωρίς Photoshop! Τόσο το κείμενο όσο και η εικόνα μπορούν να αλλάξουν και το εφέ διατηρείται χωρίς να απαιτείται JavaScript ή αλλαγές σε μάσκες CSS ή SV. Αλλά αυτό είναι κατάλληλο για απλές εικόνες. Με πιο σύνθετα, είναι απαραίτητο να εφαρμόσετε πρόσθετα φίλτρα και να τα αναμίξετε.

Για παράδειγμα, μπορούμε να προσθέσουμε το ακόλουθο φίλτρο CSS στην ετικέτα h2 μας για βοήθεια:

H2 (φίλτρο: invert(1) grayscale(1) contrast(9) )

Οι επιλογές για κοινή χρήση φίλτρων περιορίζονται μόνο από τη φαντασία και το γούστο σας στο στυλ.

Τα φίλτρα 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-filter: saturate(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%) ;

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

	Webkit	Mozilla	Τρίαινα	Γρήγορα
Θολούρα	Πειραματικός	Οχι	Οχι	Οχι
Λάμψη
Κορεσμός
Περιστρέψτε τους τόνους
Αντίθεση
Αναστροφή	Μόνο πλήρης αναστροφή
Λεύκανση	Πειραματικός
Καστανόχρους

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

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

Σύνταξη

φίλτρο: invert(<значение>);

Ονομασίες

	Περιγραφή	Παράδειγμα
<тип>	Υποδεικνύει τον τύπο της τιμής.	<размер>
Α & & Β	Οι τιμές πρέπει να εξάγονται με τη σειρά που καθορίζεται.	<размер> && <цвет>
A | σι	Υποδεικνύει ότι πρέπει να επιλέξετε μόνο μία τιμή από τις προτεινόμενες (A ή B).	κανονικό | μικρά καπάκια
Α || σι	Κάθε τιμή μπορεί να χρησιμοποιηθεί ανεξάρτητα ή μαζί με άλλες με οποιαδήποτε σειρά.	πλάτος || μετρώ
	Ομαδικές αξίες.	[ καλλιέργεια || σταυρός]
*	Επαναλάβετε μηδέν ή περισσότερες φορές.	[,<время>]*
+	Επαναλάβετε μία ή περισσότερες φορές.	<число>+
?	Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική.	ένθεση?
(Α, Β)	Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές.	<радиус>{1,4}
#	Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα.	<время>#

Αξίες

Η τιμή 0 αφήνει την εικόνα ως έχει. Μια τιμή 100% ή 1 αντιστρέφει πλήρως τα χρώματα της εικόνας. Οι τιμές από 0% έως 100% ή 0 έως 1 αντιστρέφουν μερικώς τα χρώματα.

Δεν επιτρέπεται αρνητική τιμή. Μια κενή τιμή αντιμετωπίζεται ως 0.

Sandbox

img ( φίλτρο: invert((( playgroundValue ))% );)

Παράδειγμα

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Αναστρέψτε το χρώμα. Αριστερά είναι το πρωτότυπο, δεξιά φωτογραφία με φίλτρο.

Σημείωση

Το Chrome πριν από την έκδοση 53, το Opera πριν από την έκδοση 40 και το Safari πριν από την έκδοση 9.1 υποστηρίζουν την ιδιότητα -webkit-filter.

Προσδιορισμός

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

• Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Συμβουλευτικό Συμβούλιο του W3C για τελική έγκριση.
• Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
• προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

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

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

Οι παρακάτω συμβολισμοί χρησιμοποιούνται στον πίνακα του προγράμματος περιήγησης.