Een van de meest waardevolle functies van Photoshop - misschien wel de functie die ervoor heeft gezorgd dat de concurrentie vóór is - is overvloeimodi. Bij mengmodi worden twee pixels op elkaar gelegd en op verschillende manieren gecombineerd, bijvoorbeeld in de donkerdere kleurenovervloeiingsmodus wordt alleen het donkerdere van de twee pixels weergegeven. Wanneer ze over een hele afbeelding worden uitgevouwen, kunnen mengmodi verbluffende effecten produceren.
Hoewel Adobe Photoshop geen overvloeimodi heeft uitgevonden, is de implementatie ervan zeker het meest geëmuleerd. Maar nu hebt u Photoshop niet nodig om uw beelden op deze manier te stylen, omdat we alles dynamisch kunnen doen met CSS3.
In de huidige staat, browser ondersteuning voor CSS ' achtergrond-blend-mode eigenschap verbetert. Eerdere versies van browsers hadden voorvoegsels van leveranciers nodig of de activering van experimentele functies, maar caniuse.com rapporteert ondersteuning in de huidige versies van Chrome, Firefox en Opera, met binnenkort Safari.
Er is nog geen enkele teken van IE-ondersteuning, maar omdat mengmodi een progressieve verbetering zijn, kunnen we nu overwegen ze te gebruiken.
Er zijn een aantal overvloeimodi in de aanbevelingen van de CSS3 kandidaat, maar de meest bruikbare voor onze doeleinden is de achtergrond-mengmodus . Met deze eigenschap kunnen we twee afbeeldingen of een afbeelding en een achtergrondkleur mengen.
Dit is de code die we nodig hebben:
En hier is onze standaard CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}We zijn nu klaar om de overvloeimodi toe te voegen.
Om dit te doen, zullen we een andere klasse toevoegen aan onze div, bijvoorbeeld "vermenigvuldigen":
En dan maken we een tweede stijlregel:
.blend.multiply{background-blend-mode: multiply;}Als je de code wilt bekijken die je kunt gebruiken download hier de bronbestanden.
Vermenigvuldig , zoals de naam al doet vermoeden, het basispixel met de overvloeikleur, wat resulteert in een donkerdere kleur. Door zwart te vermenigvuldigen, wordt zwart weergegeven en door vermenigvuldigend wit blijft het beeld ongewijzigd.
background-blend-mode: multiply;Overlay is een complexe mengmodus. De vermenigvuldiging is afhankelijk van de basiskleur: lichte kleuren worden lichter, donkere kleuren donkerder.
background-blend-mode: overlay;Het tegenovergestelde van donkerder , lichter maakt een beeld lichter door de twee overlappende pixels te vergelijken en de lichtere van de twee te kiezen.
background-blend-mode: lighten;Kleurverbranding is het tegenovergestelde van kleuren ontwijken , het maakt de basiskleur donkerder, wat resulteert in een toename van het contrast.
background-blend-mode: color-burn;Zacht licht is vergelijkbaar met hard licht , maar in plaats van de kleuren te vermenigvuldigen of te screenen, gebruikt zacht licht ontwijken en branden voor een subtieler effect.
background-blend-mode: soft-light;Uitsluiting is vergelijkbaar met verschil , maar het produceert minder contrast en is dus iets meer bruikbaar.
background-blend-mode: exclusion;Verzadiging , zoals tint , voegt twee van de waarden van de basiskleur samen met één eigenschap van de overvloeikleur, in dit geval de verzadiging.
background-blend-mode: saturation;Helderheid is het tegenovergestelde van kleur , het combineert de tint en verzadiging van de basiskleur en de helderheid van de overvloeikleur.
background-blend-mode: luminosity;