CSSgram 以 CSS 和 Sass 編寫而成 Instagram 濾鏡效果

很多早期會使用 Instagram 的朋友都很喜歡對相片套用濾鏡效果的設計，雖然現在有各種應用程式可以做到，甚至成為內建相片編輯功能，但在當年可以說非常強大，無論相片有沒有拍好，只要加入濾鏡質感馬上提升，還能帶出本來沒有的文青風格。不得不說濾鏡是 IG 會獲得廣泛使用者的原因之一，在這幾年它也陸續加入更多濾鏡效果，如果你很喜歡這些風格，也可以將它使用於自己的網站或部落格。

本文要介紹的「CSSgram」是一個很輕巧的開放原始碼程式庫，可以透過 CSS 或 Sass 方式直接在網站圖片加入類似 Instagram 濾鏡效果，需要做的就只有對圖片加入 filters 語法，透過各種混合技術將顏色疊加到圖片來模擬 Instagram 濾鏡，完全不需要使用相片編輯軟體手動調整，圖片也能維持原有顏色和品質。

依照 CSSgram 網站說明，它使用「偽元素」（例如 :before 和 :after）來建立濾鏡效果，也因此必須將樣式使用在 containing element 而不是像是 <img> 這樣的內容區塊，建議可以將圖片包含在 <figure> 標籤，非常簡單，稍後我會簡單說明。

類似功能最常被討論到瀏覽器的支援度問題，CSSgram 使用 CSS Filters 和 CSS Blend Modes，在新版主要瀏覽器都能正確顯示（Google Chrome、Mozilla Firefox、Opera 和 Safari），不過在舊的 IE 瀏覽器當然是無法使用，對於瀏覽器支援情形可以參考程式庫網站說明。

CSSgram
https://una.im/CSSgram/ （GitHub）

使用教學

STEP 1

打開 CSSgram 網站可以直接選擇內建的範例相片，查看套用 CSSgram 濾鏡工具的效果，將滑鼠游標移動到相片上就會變回沒有濾鏡特效的原始顏色，使用者就能快速比較有濾鏡和原始相片的顏色差異。

STEP 2

要如何將 CSSgram 程式庫加入自己網站呢？

從開發者網站可以找到使用說明，舉例來說，直接點選下載 CSSgram 程式庫的相關檔案（其實就只會用到一個 .css 樣式），以最簡單的方式載入。上方還有透過內容傳遞網路 CDN 服務加速載入速度的鏈結，也就是大家很熟悉的 cdnjs，如果直接取用上方原始碼的話就不用額外下載 CSSgram 程式庫，當然因為檔案不大，你也可以考慮自行托管。

STEP 3

CSSgram 網站也提供透過 <figure> 語法將濾鏡特效套用到圖片的範例，樣式就直接帶入下方可用的 HTML 標籤，如果你只想單獨使用某一個樣式，也可以選擇下載單獨的樣式表檔案，如此一來也能大幅減少檔案大小（即使 CSSgram 已經是非常輕巧的檔案庫）。

CSSgram 濾鏡名稱和 Instagram 一致，也都能夠模擬出非常接近的效果，如果想將某個濾鏡特效套用至圖片，只要從清單找到對應的樣式名稱並加入就能使用濾鏡囉！