[笔记] 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


按赞加入粉丝团

延伸阅读