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

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

Χρήση φίλτρων CSS

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

Υπάρχουν 10 διαθέσιμες λειτουργίες φίλτρου CSS για το στυλ του στοιχείου HTML σας:

  • θολούρα()
  • λάμψη()
  • αντίθεση()
  • σκίαση()
  • κλίμακα του γκρι()
  • hue-rotate()
  • αντιστρέφω()
  • αδιαφάνεια()
  • διαβρέχω()
  • καστανόχρους()
instagram viewer

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

Μερικά από αυτά τα φίλτρα λειτουργούν πολύ καλύτερα με άλλα όταν χρησιμοποιούνται με τον σωστό τρόπο.

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

1. Grayscale και Sepia

ο κλίμακα του γκρι() Το φίλτρο αφαιρεί όλες τις πληροφορίες χρώματος από μια εικόνα ή ένα στοιχείο κειμένου. Το φίλτρο παίρνει μια τιμή μεταξύ 0 και 1, με το 0 να σημαίνει το αρχικό χρώμα και το 1 να είναι το εφέ πλήρους κλίμακας του γκρι.

ο καστανόχρους() Το φίλτρο εφαρμόζει ένα εφέ τόνου σέπια σε μια εικόνα ή ένα στοιχείο κειμένου. Το φίλτρο παίρνει επίσης μια τιμή μεταξύ 0 και 1.

Για παράδειγμα:

img {
φίλτρο: κλίμακα του γκρι(14%) καστανόχρους(30%);
}

Συνδυάζοντας κλίμακα του γκρι() στο 14% και καστανόχρους() στο 30% μπορεί να δημιουργήσει ένα vintage ή ρετρό εφέ στην εικόνα σας.

2. Αντιστροφή και Κορεσμός

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

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

Για παράδειγμα:

img {
φίλτρο: αντιστρέφω(30%) διαβρέχω(75%);
}

Αυτός ο κωδικός αντιστρέφει τα χρώματα της εικόνας και αυξάνει τον κορεσμό κατά 75%.

3. Hue-Rotate and Contrast

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

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

Για παράδειγμα:

img {
φίλτρο: απόχρωση-περιστροφή(10deg) αντίθεση(150%);
}

Το Hue-rotate μπορεί να δεχθεί μια τιμή του deg, grad, rad, ή στροφή. Ο παραπάνω κωδικός περιστρέφει την απόχρωση της εικόνας κατά 10 μοίρες και αυξάνει την αντίθεση.

4. Φωτεινότητα και Θολότητα

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

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

Για παράδειγμα:

img {
φίλτρο: λάμψη(0.8) θολούρα(5px);
}

Ο παραπάνω κώδικας μειώνει τη φωτεινότητα κατά 0.8 (80%) και ισχύει α 5 εικονοστοιχεία εφέ θαμπώματος στην εικόνα.

5. Drop-Shadow και Opacity

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

Εν τω μεταξύ, το φίλτρο αδιαφάνειας ελέγχει τη διαφάνεια ενός στοιχείου.

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

Για παράδειγμα:

.κείμενο-εφέ {
μεταμορφώνω: μεταφράζω(-50%, -50%);
χρώμα: μαύρος;
σκίαση: 10px 9px 9pxμπεζ;
αδιαφάνεια: 70%;
}

Σε αυτό το παράδειγμα, το drop shadow είναι τοποθετημένο 10 pixel προς τα δεξιά και 9 pixel στο κάτω μέρος, με ακτίνα θολώματος 9 pixel. Το χρώμα της σκιάς ορίζεται ως μπεζ. Καθορίζεται επίσης αδιαφάνεια 70%.

Χρησιμοποιώντας CSS Blend Modes

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

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

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

Οι δύο πιο συνηθισμένοι τρόποι ανάμειξης είναι λειτουργία ανάμειξης φόντου και mix-blend-mode. Και οι δύο ιδιότητες μοιράζονται τις ίδιες 15 τιμές: κανονικό, πολλαπλασιασμός, οθόνη, επικάλυψη, σκουρόχρωμο, ανοιχτόχρωμο, αποφυγή χρώματος, κορεσμός, έγχρωμη καύση, φωτεινότητα, διαφορά, σκληρό φως, απαλό φως, αποκλεισμός και απόχρωση.

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

Θα μπορούσατε επίσης να χρησιμοποιήσετε το mix-blend-mode να συνδυάσει το περιεχόμενο ενός δεδομένου στοιχείου με το περιεχόμενο του άμεσου γονέα του. ο mix-blend-mode Συνήθως χρησιμοποιείται για την ανάμειξη περιεχομένου στο προσκήνιο, όπως κείμενο, σχήματα ή εικόνες.

Εδώ είναι ένα παράδειγμα χρήσης mix-blend-mode για την ανάμειξη κειμένου και εικόνας.

HTML:

<divτάξη="δοχείο">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="background-image"
 />
<divτάξη="περιεχόμενο">
<h1>καλως ΗΡΘΑΤΕh1>
<Π>Γεια σου Χρήστη!Π>
div>
div>

CSS:

.δοχείο {
θέση: απόλυτος;
πλάτος: 100%;
ύψος: 100%;
}
.εικόνα φόντου {
πλάτος: 100%;
ύψος: 100%;
προσαρμογή αντικειμένου: κάλυμμα;
}


.περιεχόμενο {
θέση: απόλυτος;
μπλουζα: 50%;
αριστερά: 50%;
μεταμορφώνω: μεταφράζω(-50%, -50%);
στοίχιση κειμένου: κέντρο;
mix-blend-mode: διαφορά;
}


h1 {
μέγεθος γραμματοσειράς: 60px;
χρώμα: άσπρο;
}
Π {
μέγεθος γραμματοσειράς: 40px;
χρώμα: άσπρο;
}

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

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

Συνδυασμός φίλτρων και τρόπων ανάμειξης

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

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

.μου-στοιχείο {
φίλτρο: λάμψη(150%) απόχρωση-περιστροφή(180deg) σκίαση(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mode: οθόνη;
}

Αυτός ο κώδικας συνδυάζει τα φίλτρα. λάμψη, απόχρωση-περιστροφή, σκίαση, και ένα mix-blend-mode αξίας οθόνη στην εικόνα. Αυξάνει τη φωτεινότητα κατά 150%, ενώ το hue-rotate θα αντιστρέψει τα χρώματα της εικόνας κατά 180 μοίρες.

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

Mastering Filters and Blend Modes

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

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