开源软件名称（OpenSource Name）：

una/CSSgram

开源软件地址(OpenSource Url)：

https://github.com/una/CSSgram

开源编程语言(OpenSource Language)：

HTML 58.4%

开源软件介绍(OpenSource Introduction)：

CSSgram

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:


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.

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