Jednou z nejcennějších vlastností Photoshopu - pravděpodobně funkce, která ji poháněla před konkurencí - je režimy kombinace. Režimy kombinace vezmou dva pixely položené na sebe a kombinují je různými způsoby, například režim tmavší kombinace barev jednoduše vykreslí tmavší ze dvou pixelů. Při rozbalení v celém obrazu mohou režimy kombinace vytvářet některé úžasné efekty.
Přestože Adobe Photoshop nevymyslel způsoby kombinace, její implementace je jistě nejvíce emulovaná. Nyní však nepotřebujete, aby Photoshop styloval vaše snímky tímto způsobem, protože to dokážeme dynamicky pomocí CSS3.
V současném stavu, podpora prohlížeče pro vlastnost CSS v režimu blend-blend se zlepšuje. Dřívější verze prohlížečů vyžadovaly předpony dodavatelů nebo aktivace experimentálních funkcí, ale caniuse.com hlásí podporu v aktuálních verzích prohlížečů Chrome, Firefox a Opera.
Zatím neexistují žádné známky podpory IE, ale vzhledem k tomu, že režimy kombinace jsou progresivní vylepšení, můžeme začít uvažovat o jejich využití.
V doporučeních pro kandidáty na CSS3 existuje několik možností kombinace módu, ale pro naše účely je nejužitečnějším režimem míchání pozadí . Tato vlastnost nám umožňuje smíchat dva obrázky nebo obrázek a barvu pozadí.
Zde je kód, který potřebujeme:
A tady je náš základní CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Nyní jsme připraveni přidat režimy prolnutí.
Chcete-li to provést, přidáme do naší třídy další třídu, například "násobit":
Pak vytvoříme pravidlo druhého stylu:
.blend.multiply{background-blend-mode: multiply;}Pokud se chcete podívat na kód, který můžete zde stahujte zdrojové soubory.
Násobení , jak naznačuje název, násobí základní pixel barevnou barvou, což vede k tmavší barvě. Vynásobení černých výsledků černou a vynásobení bílé zanechává obraz nezměněný.
background-blend-mode: multiply;Překrytí je komplexní mód míchání. Násobení závisí na základní barvě: světlé barvy se zesvětlí, tmavé barvy se ztmaví.
background-blend-mode: overlay;Polární protisměnný tmavý obraz zesvětlí obraz srovnáním dvou překrývajících se obrazových bodů a výběrem zapalovače obou.
background-blend-mode: lighten;Barevný opálení je polárním opakem barevného úniku , čímž ztmavuje základní barvu, což vede ke zvýšení kontrastu.
background-blend-mode: color-burn;Měkké světlo je podobné tvrdému světlu , ale namísto násobení nebo promítání barvy měkké světlo používá dodge a vypaluje pro jemnější efekt.
background-blend-mode: soft-light;Výjimka je podobná rozdílu , ale produkuje méně kontrastu, takže je trochu použitelnější.
background-blend-mode: exclusion;Saturace , jako odstín , spojuje dvě hodnoty základní barvy s jednou vlastností barvy směsi, v tomto případě saturací.
background-blend-mode: saturation;Svítivost je opakem barvy , kombinuje odstín a sytost základní barvy a jas barvy směsi.
background-blend-mode: luminosity;