Ένα από τα πιο ανεκτίμητα χαρακτηριστικά του Photoshop - αναμφισβήτητα, το χαρακτηριστικό που τον τροφοδότησε μπροστά από τον ανταγωνισμό του - είναι οι συνδυασμοί. Οι λειτουργίες συγχώνευσης παίρνουν δύο εικονοστοιχεία τοποθετημένα το ένα πάνω στο άλλο και τα συνδυάζουν με διαφορετικούς τρόπους, για παράδειγμα, η πιο σκούρα λειτουργία συνδυασμού χρώματος απλά θα καταστήσει το πιο σκούρο από τα δύο εικονοστοιχεία. Όταν επεκταθεί σε ολόκληρη την εικόνα, οι συνδυασμένες λειτουργίες μπορούν να παράγουν μερικά εκπληκτικά εφέ.
Παρόλο που το Photoshop της Adobe δεν εφευρέθηκε, η εφαρμογή του είναι σίγουρα η πιο εξομοιωμένη. Τώρα, όμως, δεν χρειάζεστε το Photoshop για να σχεδιάσετε τις εικόνες σας με αυτόν τον τρόπο, επειδή μπορούμε να το κάνουμε όλοι δυναμικά με το CSS3.
Ως έχει, υποστήριξη του προγράμματος περιήγησης για την ιδιότητα λειτουργίας CSS " mode-blend-mode" βελτιώνεται. Οι παλαιότερες εκδόσεις των φυλλομετρητών απαιτούσαν τα προθέματα προμηθευτών ή και την ενεργοποίηση των πειραματικών χαρακτηριστικών, αλλά caniuse.com αναφέρει την υποστήριξη στις τρέχουσες εκδόσεις του Chrome, του Firefox και της Opera, με το Safari σύντομα.
Δεν υπάρχουν ακόμη σημάδια υποστήριξης του IE, αλλά καθώς οι συνδυασμοί είναι μια προοδευτική ενίσχυση, μπορούμε να αρχίσουμε να εξετάζουμε τη χρήση τους τώρα.
Υπάρχουν πολλές επιλογές συνδυασμού στις υποψήφιες συστάσεις για το CSS3, αλλά η πιο χρήσιμη για τους σκοπούς μας είναι η λειτουργία με μείγμα υποβάθρου . Αυτή η ιδιότητα μας επιτρέπει να συνδυάσουμε δύο εικόνες ή μια εικόνα και ένα χρώμα φόντου.
Εδώ είναι ο κώδικας που χρειαζόμαστε:
Και εδώ είναι το βασικό μας CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Είμαστε πλέον έτοιμοι να προσθέσουμε τους τρόπους μείξης.
Για να γίνει αυτό, θα προσθέσουμε μια άλλη κλάση στο div μας, για παράδειγμα "πολλαπλασιάστε":
Και τότε θα δημιουργήσουμε έναν δεύτερο κανόνα στυλ:
.blend.multiply{background-blend-mode: multiply;}Αν θέλετε να ρίξετε μια ματιά στον κώδικα που μπορείτε κατεβάστε εδώ τα αρχεία προέλευσης.
Ο πολλαπλασιασμός , όπως υποδηλώνει το όνομα, πολλαπλασιάζει το εικονοστοιχείο βάσης με το χρώμα του μείγματος, με αποτέλεσμα ένα πιο σκούρο χρώμα. Ο πολλαπλασιασμός των μαύρων αποτελεσμάτων σε μαύρο χρώμα και ο πολλαπλασιασμός των λευκών αφήνει την εικόνα αμετάβλητη.
background-blend-mode: multiply;Η επικάλυψη είναι μια σύνθετη λειτουργία μείγματος. Ο πολλαπλασιασμός εξαρτάται από το χρώμα βάσης: τα ανοιχτά χρώματα γίνονται ελαφρύτερα, τα σκούρα χρώματα γίνονται πιο σκούρα.
background-blend-mode: overlay;Το πολικό αντίθετο από το σκοτάδι , φωτίζει φωτίζει μια εικόνα συγκρίνοντας τα δύο επικαλυπτόμενα εικονοστοιχεία και επιλέγοντας τον αναπτήρα των δύο.
background-blend-mode: lighten;Το έγχρωμο έγκαυμα είναι το πολικό αντίθετο της αποφυγής χρώματος , σκουραίνει το χρώμα βάσης με αποτέλεσμα την αύξηση της αντίθεσης.
background-blend-mode: color-burn;Το απαλό φως είναι παρόμοιο με το σκληρό φως , αλλά αντί του πολλαπλασιασμού ή της προβολής των χρωμάτων, το απαλό φως χρησιμοποιεί αποπροσανατολισμό και καύση για πιο λεπτό εφέ.
background-blend-mode: soft-light;Ο αποκλεισμός είναι παρόμοιος με τη διαφορά , αλλά παράγει λιγότερη αντίθεση, έτσι είναι λίγο πιο χρήσιμο.
background-blend-mode: exclusion;Ο κορεσμός , όπως και η απόχρωση , συγχωνεύει δύο από τις τιμές του βασικού χρώματος με μία ιδιότητα του χρώματος του μείγματος, στην περίπτωση αυτή τον κορεσμό.
background-blend-mode: saturation;Η φωτεινότητα είναι το αντίθετο του χρώματος , συνδυάζει την απόχρωση και τον κορεσμό του βασικού χρώματος και τη φωτεινότητα του χρώματος του μείγματος.
background-blend-mode: luminosity;