[筆記] CSSgram – 輕鬆套用 Instagram 上的濾鏡效果

Instagram 是近幾年相當熱門的社群,其一大特色就是其豐富的照片濾鏡效果,有好心人士將其效果用 CSS 給做出來了。你只需要簡單的套用一支 CSS,並且放在區塊元素上就可以達成了。
CSS Instagram cssgram


原理

利用偽元素 (Pseudo Element) :before 和 :after 的方式在圖片 <img> 所在的區塊新增樣式。

注意事項

1. 由於是在外層的區塊元素上下手,所以會有機會出現「圖片大小相同」,但套用樣式後卻大小不一的問題。必要時可能會需要設定寬度和高度比例。
2. 最後一筆 commit 是 2016 年了,若之後有IG官方有新增更多的濾鏡,那就有可能會找不到。

如何安裝

[Github]:https://github.com/una/CSSgram
引用 CDN:<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css”>


可以套用的樣式

支援瀏覽器

簡言之,傳統的 IE 不能用,Edge 以後的世代,只要注意版本號即可

cssgram-apply-your-image-with-instagram-filter-

整合進你的 Scss / Sass

你可以到他們的 Github 的頁面上,取得原始碼整合進你的專案裡。@extend / @mixins 都是可以使用的方式,但建議後者為佳,因為編譯出來的檔案筆比較小。


Demo

按讚加入粉絲團

延伸閱讀