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

最後更新於 2020 年 07 月 07 日

很多早期會使用 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 也有提供內容傳遞網路連結

 

相關的文章

Photerloo 上傳照片自動產生 Instagram Hashtags,增加 IG 照片觸及人數

去年我已經將自己的 Facebook 帳號刪除,個人網誌也已荒廢一段時間,不過一些日常瑣事和想法還是會透過 Instagram 分享,我是一個喜歡拍照並以文字紀錄生活的人,想想 IG 好像更適合自己吧!這幾年有不少人都將重心轉移到 Instagram ,相較於 Facebook 還得面對親朋好友或同事的壓力,或許隨手拍拍照片影片分享社群比較沒有負擔。

to Stories 快速將相片影片分享 Instagram 限時動態,支援各種常見 App(iOS)

你喜歡使用 Instagram 限時動態(Stories)分享相片影片嗎?這個功能最早出現於 2016 年,特色是上傳的內容會在 24 小時自動消失,還能知道有那些人曾經看過你的動態,對於一些比較無關緊要的記錄(或是不想要貼照片洗版別人)就可以透過限動更新。限時動態還能加入問與答、投票和選擇題等等互動式選項,相較於貼文來說更能和其他使用者連結,也變成許多人喜愛的功能。

移除被 Instagram 色情廣告帳號亂標記的相片,開啟手動批准標籤功能

經常在新聞看到各種詐騙手法,好像不管怎樣都是那些招式變來變去,在網路上廣告或垃圾留言也是層出不窮,幾年前 Facebook 亂標記好友在購物詐騙相片裡的手法現在也出現在 Instagram,只不過是換成了色情廣告帳號,主要還是要吸引使用者注意,讓使用者透過點進去釣魚網站來竊取 Instagram 帳號密碼。前陣子又開始出現一波帳號被盜用、張貼假的雷朋詐騙廣告手法,如果你或你身邊的朋友同事遇到了,可以重設密碼、開啟雙重驗證防護提高帳號安全性。

IG 帳號被盜被貼廣告?重設密碼、開啟雙重驗證防護更安全

最近 Instagram 假雷朋詐騙廣告又來了!本以為這個詐騙手法已經成為過去式,距離上次大規模洗版已經超過一年多的時間,最近又有死灰復燃跡象,如果你看到 IG 好友突然貼出像上圖「Ray-Ban Only One Day!!!」或類似折扣資訊,請記得不要進入圖片標示的網站,因為這絕對是詐騙,而且付款後也收不到商品,甚至可能讓你的個資或信用卡資訊外洩!如果想購買商品還是選擇安全、可信賴的電商平台或實體店面才是正道。

Instagram Picker 免費 IG 抽獎工具,貼上貼文網址指定抽獎人數隨機抽取

現在很常看到網紅或品牌在 Instagram 辦抽獎活動,其實這在早期 Facebook 剛在台灣紅起來時經常看到,主要是透過留言、分享轉貼和標記朋友等方式增加互動率,再以抽獎程式隨機抽出幸運的朋友,以前介紹過「粉絲團留言抽籤小助手」就是非常有用的抽獎工具,IG 則是使用另一個「Instagram 抽獎神器」進行抽獎,前者在免費下依然可以用於粉絲專頁抓留言或是心情回覆,後者現在必須要支付一年 450 元年費來維持程式維護和伺服器支出才能使用。

回應