instagram css_如何使用纯CSS在浏览器中应用Instagram过滤器

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提供了一种非常快速的方法，可以在浏览器中对图像应用一些很酷的效果。 去下载它，玩一下，然后拉开以应用自己的滤镜和效果。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-apply-instagram-filters-using-pure-css-edit--cms-30507

instagram css