很多早期會使用 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 一致,也都能夠模擬出非常接近的效果,如果想將某個濾鏡特效套用至圖片,只要從清單找到對應的樣式名稱並加入就能使用濾鏡囉!

值得一試的三個理由:

  1. 在網頁以 CSS 樣式為圖片加入 Instagram 濾鏡效果
  2. 透過 CSS 或 Sass 即可載入樣式無需使用圖片編輯軟體
  3. 程式庫輕巧,開放原始碼,cdnjs 也有提供內容傳遞網路連結