Instagram filter library in Sass and CSS.
Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we’re doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!
We are 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.
This library uses CSS Filters and CSS Blend Modes. These features are supported in the following browsers:
 |  |  |  |  |
|---|---|---|---|---|
| 43+ ✔ | 38+ ✔ | Nope ✘ | 32+ ✔ | 8+ ✔ |
For more information, check on Can I Use.
There are currently 2 ways to consume this library:
When using CSS classes, you can simply add the class with the filter name to the element containing your image.
<head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"><link rel="stylesheet" href="css/vendor/cssgram.min.css">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 just using one of the styles.
For use in HTML markup:
class="aden"class="reyes"class="perpetua"class="inkwell"class="toaster"class="walden"class="hudson"class="gingham"class="mayfair"class="lofi"class="xpro2"class="_1977"class="brooklyn"class="nashville"@extendIf 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 😊.
scss/cssgram.scss via an @import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram'@extend %aden) in your element.For example:
<!-- HTML -->
<figure class="viz--beautiful">
<img src="../img.png">
</figure>
// Sass
.viz--beautiful {
@extend %aden;
}
Alternatively, you can just download and link any individual .scss file in your Sass manifest (i.e. scss/aden.scss), if you're just using one of the styles.
For use in Sass stylesheets:
@extend %aden@extend %reyes@extend %perpetua@extend %inkwell@extend %toaster@extend %walden@extend %hudson@extend %gingham@extend %mayfair@extend %lofi@extend %xpro2@extend %_1977@extend %brooklyn@extend %nashvilleEither:
Or:
npm install dependencies (must have Node installed)gulp to compile CSS and the test siteIf you’d like to contribute, the following filters are yet to be added:
Filters are really fun to create! Reference photos created by Miles Croxford can be found here.
source/css/cssgram.css contains each of the CSS classes you can apply to your <img> to give it the filter. You should use source/css/cssgram.min.css for production if you want access to all of the librarysource/scss/ contains the source files for individual classes and placeholder selectors you can use to extend CSS classes in Sasssite/ is the public facing websitesite/test is how you test filters if you're developing, remember to change is_done for the filter you're creating in site/test/index.twig whilst gulp is running.Note: this will also have mixin options and a PostCSS Component.
FAQs
The npm package cssgram receives a total of 9 weekly downloads. As such, cssgram popularity was classified as not popular.
We found that cssgram demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.