• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

una/CSSgram: CSS library for Instagram filters

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

una/CSSgram

开源软件地址(OpenSource Url):

https://github.com/una/CSSgram

开源编程语言(OpenSource Language):

HTML 58.4%

开源软件介绍(OpenSource Introduction):

CSSgram

CDNJS

CSSGram is an Instagram filter library written in Sass and CSS.

What is This?

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly using CSS. What we're doing is adding filters to the images, as well as applying color and/or gradient overlays via various blending techniques to mimic filter effects. This means less manual image processing and more fun filter effects on the web!

We're using pseudo-elements (i.e. ::before and ::after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a replaced element like <img>). The recommendation is to wrap your images in a <figure> tag. More about the tag here.

Browser Support

This library uses CSS Filters and CSS Blend Modes. These features are supported in the following browsers:

Chrome logo Firefox logo Internet Explorer logo Edge logo Opera logo Safari logo
43+ 38+ Nope ✘ 13 32+ 8+

For more information, check on Can I Use.

Usage

There are currently 2 ways to consume this library:

Use CSS classes

When using CSS classes, you can simply add the class with the filter name to the element containing your image.

  1. Include the CDN link in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. We're also on CDNJS which means another option is <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
  • Alternatively, you can download the CSSgram library locally and link to the it within your project: <link rel="stylesheet" href="css/vendor/cssgram.min.css">
  • Add a class to your image element with the name of the filter you would like to use

For example:

<!-- HTML -->
<figure class="aden">
  <img src="../img.png">
</figure>

Alternatively, you can just download and link to any individual css file (e.g. <link rel="stylesheet" href="css/vendor/aden.min.css">) if you're using only one of the styles.

Available Classes

For use in HTML markup:

  • 1977: class="_1977"
  • Aden: class="aden"
  • Amaro: class="amaro"
  • Brannan: class="brannan"
  • Brooklyn: class="brooklyn"
  • Clarendon: class="clarendon"
  • Gingham: class="gingham"
  • Hudson: class="hudson"
  • Inkwell: class="inkwell"
  • Kelvin: class="kelvin"
  • Lark: class="lark"
  • Lo-fi: class="lofi"
  • Mayfair: class="mayfair"
  • Moon: class="moon"
  • Nashville: class="nashville"
  • Perpetua: class="perpetua"
  • Reyes: class="reyes"
  • Rise: class="rise"
  • Slumber: class="slumber"
  • Stinson: class="stinson"
  • Toaster: class="toaster"
  • Valencia: class="valencia"
  • Walden: class="walden"
  • Willow: class="willow"
  • X-Pro-2: class="xpro2"

Use Sass @extend or @mixin

If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Bayonetta/BookLibrary: 简易图书管理系统发布时间:2022-08-15
下一篇:
Rahul-Raviprasad/Library: A Library management system发布时间:2022-08-15
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap