[CSS] Instagram.css濾鏡包

這幾年社群網站越來越多，而當中Instagram相信大家應該也都不陌生，主要是用來分享照片、影片用。也因為這樣，網站中對於照片的濾鏡效果，就受到了很多人的喜愛喔。有了濾鏡效果，就可以將照片變成喜歡的色調或風格喔。而在Instagram的濾鏡功能中，又提供了42種的濾鏡效果，讓大家在分享生活中的照片時，也能隨著心情來變換照片的風格感覺喔。不過現在呢，在Instagram才有的濾鏡效果，也能用到自已的網站囉。只要進入Instagram.css，將網站中所提供的CSS濾鏡效果下載，並套用到自己的網站，就可以讓網站中的照片，套用各種不同風格的相片濾鏡囉。

Instagram.css的網頁一開啟就可以看到Instagram的各種濾鏡效果，雖然一般是要透過Instagram才能將照片加上這些濾鏡效果，不過現在呢，只要到Instagram.css網站，將這些濾鏡效果的CSS樣式下載，並套用到自已的網站上，就可以讓自己網站中的照片，自由運用這些濾鏡效果喔！且完全不用透過Photoshop，而且在Instagram.css網站上，還有教導大家如何使用喔。現在就來一起看看如何下載與套用吧！

---

 Instagram.css

---

Step1
開啟網頁後，就可以看到所有的濾鏡效果示意圖。點選「GitHub」。

---

Step2
進入「GitHub」後，點選「dist」資料夾。

---

Step3
進入「dist」資料夾後，即可看到Instagram.css的兩個檔案喔，接著可依照Instagram.css所提供的說明來將檔案放至自已的網站中。

---

Step4
另外也可以在進入「GitHub」後，點選右上方的「Clone or download」，再點選「Download ZIP」就可以下載到電腦囉。

---

Step5
下載壓縮後，將「dist」資料夾複製到自已的網站內，然後依照Instagram.css網頁中所說明的方式來套用就可以囉。

---

Step6
當把instagram.css引用到網頁後，接著當要套用特效時，只需在div裡加入class特效名稱，「filter-效果名稱」這樣圖片就可以套用此濾鏡的特效囉！

---

Step7
下圖即為小的用了三種的濾鏡效果後所產生的感覺喔。有興趣的朋友也快來試看看吧。