文青必備！Instagram.css 使用樣式表為網站圖片加入 IG 濾鏡效果

近年越來越多人使用的 Instagram，這款圖片影片分享社群應用程式開始於 2010 年，後來在 2012 年被 Facebook 收購成為旗下服務，Pseric 很早就開始使用 Instagram，最令我印象深刻的是「濾鏡」（Filters）功能（也算是早期大家會想玩 IG 的原因），可將照片快速轉成很有質感的色調，以前還沒開始流行時大家都以為你怎麼這麼會拍照，後來幾乎大部分跟拍照或圖片編輯有關的應用都已內建濾鏡。

當然濾鏡有其可取之處，對於不知道要怎麼調整相片細節的一般使用者來說可快速讓本來拍得不那麼好的照片加分不少，只是久了大家也看膩、麻痺了，濾鏡再怎麼調都不如一開始就拍出好看照片，因此透過各種選項來調整細節，就能讓照片看起來更有自己的風格。

之前曾在網路上看到很有趣的專案，本文要介紹的「Instagram.css」就是透過 CSS 語法來為相片加入 Instagram 濾鏡效果，如果你想讓自己網站或部落格內的相片有 IG 文青感，那麼不用再丟進去應用程式處理，直接套用 CSS 就能做出相同效果。

Instagram.css 在網站上展示 CSS 效果，看起來就跟 Instagram 處理後如出一轍，這個專案開放原始碼，可直接從 GitHub 頁面來獲取原始碼或免費下載，透過 figure 語法指定樣式屬性就能讓相片套用某一種濾鏡效果，有興趣的朋友不妨來這裡研究一下。

網站名稱：Instagram.css
網站鏈結：https://picturepan2.github.io/instagram.css/

使用教學

STEP 1

開啟 Instagram.css 專案首頁，可以看到這些套用 CSS 濾鏡特效的範例，命名方式也和 IG 相同，那麼要怎麼樣把效果套用到自己的網站呢？首先，點選上方「GitHub」鏈結來存取專案頁面。

STEP 2

從 GitHub 的 /dist/ 路徑就能找到 instagram.css（或已壓縮最小化的 instagram.min.css）兩個檔案。

依照 Instagram.css 的 GitHub 頁面說明，將樣式表下載、上傳到自己空間，透過語法來載入就能使用。如果你只會用到其中幾種濾鏡效果，也可將 CSS 的部份段落複製出來使用，最後再以 figure 語法就能為圖片加入不同的特效。

完整的濾鏡名稱可以在 GitHub 頁面找到。Instagram.css 使用 Autoprefixer 來確保大多數樣式可相容於早期的瀏覽器，對於主要瀏覽器來說，這些效果都可以被正常支援及顯示。