1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [素材] Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片風格

[素材] Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片風格

2018/03/08

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡

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


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


Instagram.css

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

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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


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

梅問題-[素材]Instagram.css濾鏡包,讓網站照片免Photoshop也有Instagram的相片濾鏡


Phobebe 腦袋空空、口袋空空,但人生不空空,裝滿著各種不思議,看似平凡卻小小不平凡的人生~