图片/图形

CSS实现类似Instagram应用的图片过滤特效

也想出现在这里?联系我们
创客主机


CSSgram 是一款实现类似 Instagram 应用的图片过滤特效的 CSS 库。该 CSS 库使用伪元素来创建图片过滤效果,它内置有 13 种不同的图片过滤特效,可用于网页图片的美化。Instagram 是一款最初运行在 iOS 平台上的移动应用,以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享彼此,安卓版 Instagram 于 2012 年 4 月 3 日起登陆 Android 应用商店 Google Play。Instagram 提供了这样一套顺畅的操作流程:拍照--滤镜特效(以 lomo 风为主的 11 种照片特效)--添加说明/添加地点--分享。

使用方法

使用该图片过滤特效需要引入 cssgram.min.css 文件。

  1. <link rel="stylesheet" href="css/cssgram.min.css">

HTML 结构

由于该图片过滤特效使用伪元素来进行图片过滤,所以必须在一个容器元素上进行过滤,例如使用一个<img>元素,建议使用<figure>元素来包裹图片。

  1. <figure class="aden">
  2.  <img src="../img.png">
  3. </figure>

在 HTML 标签上可以添加的过滤效果的 CSS 类有:

Aden:class="aden"

Reyes:class="reyes"

Perpetua:class="perpetua"

Inkwell:class="inkwell"

Toaster:class="toaster"

Walden:class="walden"

Hudson:class="hudson"

Gingham:class="gingham"

Mayfair:class="mayfair"

Lo-fi:class="lofi"

X-Pro II:class="xpro2"

1977:class="_1977"

Brooklyn:class="brooklyn"
更多详信息:https://github.com/una/CSSgram

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!