近年來，網(wǎng)頁設(shè)計(jì)，特別是CSS，已經(jīng)呈現(xiàn)出可預(yù)測的模式。首先，我們創(chuàng)建特殊效果，大量使用圖像，外部庫或兩者。然后CSS出現(xiàn)并添加了這些功能 - 大大減少了對外部資源的需求。這意味著我們需要的大部分幕后功能都只是內(nèi)置在瀏覽器中。

CSS混合模式就是這樣一個(gè)啟示。它允許元素顯示前景層和背景層的顏色。這與Photoshop混合模式的工作方式非常相似 - 制作一些有趣的效果。

雖然在撰寫本文時(shí)瀏覽器支持不是100％（這也是托了微軟的福）設(shè)計(jì)師們已經(jīng)在探索混合模式可以實(shí)現(xiàn)的目標(biāo)。以下是我們發(fā)現(xiàn)的一些更令人興奮的例子。

看混合可以制造的差異

讓我們從這個(gè)方便的演示開始，它演示了每個(gè)混合模式對背景圖像的作用。使用下拉菜單查看各種模式如何影響顯示。變異量可能會(huì)讓您大吃一驚。

 

主題背景

這是CSS混合模式的一個(gè)非常實(shí)用的用法。在此庫中選擇一張照片，它不僅僅顯示完整尺寸的圖片。您還可以在背景中找到混合和模糊的圖像版本，從而獲得更加身臨其境的體驗(yàn)。

過濾和混合

使用CSS可能進(jìn)行的圖像處理量非常驚人。此工具提供視覺證明，可讓您調(diào)整基本/中間/高光效果和使用的顏色。最終的結(jié)果可能是遠(yuǎn)遠(yuǎn)不同于原始的東西。

小代碼，大結(jié)果

這張精心混合的照片提供了一個(gè)可以用CSS完成的實(shí)例。令人印象深刻的是樣式表只有五行長。這是設(shè)置照片背景，添加漸變和完成混合的問題。您甚至無法在圖像編輯器中快速創(chuàng)建此效果！

漸進(jìn)式導(dǎo)航

混合模式不僅可用于令人驚嘆的圖像效果。在這里，它在基于滾動(dòng)的導(dǎo)航菜單中用作有用的微交互。用戶可以根據(jù)菜單項(xiàng)的顏色不透明度查看他們正在閱讀的當(dāng)前章節(jié)。更重要的是，效果還表明你是在一章的開頭還是結(jié)尾。jQuery也是一個(gè)很大的幫助，跟蹤滾動(dòng)位置。

雙重麻煩

多重曝光攝影的過程將兩個(gè)圖像合二為一。這個(gè)概念在這里用得很有效，背景照片與動(dòng)畫GIF相結(jié)合，創(chuàng)造出一種相當(dāng)迷幻的東西。它也增強(qiáng)了玩一些經(jīng)典視頻游戲的沖動(dòng)。

完全Rad文本

將混合模式與SVG文本相結(jié)合，您可以創(chuàng)建一些華麗的效果。在此示例中，創(chuàng)建了兩層文本。一個(gè)是填充顏色，另一個(gè)是輪廓。然后將它們彼此偏移定位，從而產(chǎn)生這種引人注目的功能性外觀。它甚至響應(yīng)。

無縫的彩虹

我們將結(jié)束我們的收藏，舉例說明一點(diǎn)點(diǎn)創(chuàng)造力如何能夠取得長足的進(jìn)展。這種令人驚嘆的彩虹色可能看起來很復(fù)雜。然而，它實(shí)際上由三個(gè)相當(dāng)基本的CSS漸變和混合模式組成。有時(shí)，簡單真的更好。

通過混合脫穎而出

CSS混合模式為各種設(shè)計(jì)元素提供了很好的節(jié)奏變化。雖然我們可能會(huì)將它們與圖像緊密關(guān)聯(lián)，但上面的示例也顯示了其他一些有效用途。文本甚至導(dǎo)航等項(xiàng)目都可以從中受益。

更好的是，他們采用了我們在印刷設(shè)計(jì)中長期看到的技術(shù)，并使其成為我們可以在網(wǎng)絡(luò)上輕松實(shí)現(xiàn)的技術(shù) - 無需圖像編輯器。

花點(diǎn)時(shí)間嘗試CSS混合模式，看看它們?nèi)绾卧鰪?qiáng)您的下一個(gè)項(xiàng)目。