instagram css
欢迎来到另一个Envato Tuts +快速提示; 在今天的视频中,我们将讨论Instagram过滤器。 如果您是Instagram用户(甚至可能不是),您会意识到它为您提供了各种不同的过滤器,您可以将它们应用于要上传的照片。 如今,仅使用CSS就可以在浏览器中获得相似的结果。 让我们来看看!
观看截屏
Instagram.css
Instagram.css是一个库,可在Github上使用,它可以为您完成所有繁重的工作。 下载它,然后将其添加到您的网页中(或作为资产放入CodePen笔中 )。
我们的标记看起来像这样:
<div class="demo-container">
<figure>
<img src="boat.jpg">
</figure>
</div>
我们有一个demo-container
,仅用于将图像集中放置。 在<img>
标签包装在<figure>
,这是该<figure>
,我们要添加一些类。
添加filter-
类
目前有超过40种过滤器可用,所有过滤器都列在Github页面上 。 以下是您可以在下面的嵌入式笔中尝试的一两个示例:
- 1977
filter-1977
- 海伦娜
filter-helena
- 开尔文
filter-kelvin
- 月亮
filter-moon
- Poprocket
filter-poprocket
- 雷耶斯
filter-reyes
- 塞拉
filter-sierra
- 烤
filter-toaster
- 瓦伦西亚
filter-valencia
- 瓦尔登
filter-walden
它是如何工作的?
如果打开未缩小的instagram.css版本,您会看到每个类都应用CSS filter
属性,例如:
.filter-1977 {
filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
}
其他的则更进一步,并向位于图像上方的伪元素添加了混合模式:
.filter-amaro::before {
background: rgba(125, 105, 24, .2);
content: "";
mix-blend-mode: overlay;
}
应用于filter
和mix-blend-mode
会更改图像的通道,饱和度和亮度,并组合在一起,从而产生类似于Instagram的效果。 这些效果也非常强大,以前只有在使用SVG的浏览器中才能实现。
浏览器支持
CSS过滤器在现代浏览器中得到了很好的支持,包括最新版本的Edge(13+)。 IE不提供支持,IE Mobile也不提供支持。 查看CanIUse了解更多详细信息。
结论
快速提示就是这样; instagram.css提供了一种非常快速的方法,可以在浏览器中对图像应用一些很酷的效果。 去下载它,玩一下,然后拉开以应用自己的滤镜和效果。
instagram css