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

最新推荐文章于 2024-12-15 09:50:14 发布

翻译最新推荐文章于 2024-12-15 09:50:14 发布 · 350 阅读

文章标签：

了解如何使用Instagram.css库在浏览器中仅使用CSS应用类似Instagram的图片过滤器效果。这个库提供了超过40种过滤器，可以轻松地应用于图像，创建吸引人的视觉效果。

instagram css

欢迎来到另一个Envato Tuts +快速提示；在今天的视频中，我们将讨论Instagram过滤器。如果您是Instagram用户（甚至可能不是），您会意识到它为您提供了各种不同的过滤器，您可以将它们应用于要上传的照片。如今，仅使用CSS就可以在浏览器中获得相似的结果。让我们来看看！

Instagram.css是一个库，可在Github上使用，它可以为您完成所有繁重的工作。下载它，然后将其添加到您的网页中（或作为资产放入CodePen笔中）。

我们的标记看起来像这样：

<div class="demo-container">
  <figure>
    <img src="boat.jpg">
  </figure>
</div>

我们有一个demo-container ，仅用于将图像集中放置。在<img>标签包装在<figure> ，这是该<figure> ，我们要添加一些类。

目前有超过40种过滤器可用，所有过滤器都列在Github页面上。以下是您可以在下面的嵌入式笔中尝试的一两个示例：

如果打开未缩小的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