+
+ For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.
+ +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 content-block 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. This features are supported in the following browsers:
+ +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.
+ +The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element
+ with the name of the filter you would like to use (shown below)
If you want to work locally, do the following:
+ +<link rel="stylesheet" href="css/vendor/cssgram.min.css">For example:
+ +
+ <!-- HTML -->
+ <figure class="aden">
+ <img src="../img.png">
+ </figure>
+ <link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.
+
+ class="_1977"class="aden"class="brooklyn"class="clarendon"class="earlybird"class="gingham"class="hudson"class="inkwell"class="lark"class="lofi"class="mayfair"class="moon"class="nashville"class="perpetua"class="reyes"class="rise"class="slumber"class="toaster"class="walden"class="willow"class="xpro2"@extendsIf 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; (or using mixins @include aden();) in your element.For example:
+ +
+ <!-- HTML -->
+ <figure class="viz--beautiful">
+ <img src="../img.png">
+ </figure>
+
+ // Sass
+ .viz--beautiful {
+ @extend %aden;
+ }
+
+ // Sass (without adding new CSS3 filters)
+ .viz--beautiful {
+ @include aden();
+ }
+ // Sass (adding new CSS3 filters)
+ .viz--beautiful {
+ @include aden(blur(2px) /*...*/);
+ }
+ scss/aden.scss), if you're just using one of the styles.
+
+ @extend %_1977;@extend %aden;@extend %brooklyn;@extend %clarendon;@extend %earlybird;@extend %gingham;@extend %hudson;@extend %inkwell;@extend %lark;@extend %lofi;@extend %mayfair;@extend %moon;@extend %nashville;@extend %perpetua;@extend %reyes;@extend %rise;@extend %slumber;@extend %toaster;@extend %walden;@extend %willow;@extend %xpro2;
For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.
-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!
+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 content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.
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 content-block like <img>. The recommendation is to
+ wrap your images in a <figure> tag. More about the tag here.
For more information, check on Can I Use.
-When using CSS classes, you can simply add the class with the filter name to the element containing your image.
-The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element with the name of the filter you would like to use (shown below)
The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element
+ with the name of the filter you would like to use (shown below)
If you want to work locally, do the following:
<link rel="stylesheet" href="css/vendor/cssgram.min.css"><link rel="stylesheet" href="css/vendor/cssgram.min.css">class="_1977"class="aden"class="brooklyn"class="clarendon"class="earlybird"class="gingham"class="hudson"class="inkwell"class="lark"class="lofi"class="mayfair"class="moon"class="nashville"class="perpetua"class="reyes"class="rise"class="slumber"class="toaster"class="walden"class="willow"class="xpro2"class="_1977"class="aden"class="brooklyn"class="clarendon"class="earlybird"class="gingham"class="hudson"class="inkwell"class="lark"class="lofi"class="mayfair"class="moon"class="nashville"class="perpetua"class="reyes"class="rise"class="slumber"class="toaster"class="walden"class="willow"class="xpro2"@extendsIf 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 😊.
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 😊.
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.@extend %aden; (or using mixins @include aden();) in your element.For example:
@@ -288,43 +657,91 @@@extends
+ // Sass (without adding new CSS3 filters)
+ .viz--beautiful {
+ @include aden();
+ }
+ // Sass (adding new CSS3 filters)
+ .viz--beautiful {
+ @include aden(blur(2px) /*...*/);
+ }
+ scss/aden.scss), if you're just using one of the styles.
@extend %_1977;@extend %aden;@extend %brooklyn;@extend %clarendon;@extend %earlybird;@extend %gingham;@extend %hudson;@extend %inkwell;@extend %lark;@extend %lofi;@extend %mayfair;@extend %moon;@extend %nashville;@extend %perpetua;@extend %reyes;@extend %rise;@extend %slumber;@extend %toaster;@extend %walden;@extend %willow;@extend %xpro2;@extend %_1977;@extend %aden;@extend %brooklyn;@extend %clarendon;@extend %earlybird;@extend %gingham;@extend %hudson;@extend %inkwell;@extend %lark;@extend %lofi;@extend %mayfair;@extend %moon;@extend %nashville;@extend %perpetua;@extend %reyes;@extend %rise;@extend %slumber;@extend %toaster;@extend %walden;@extend %willow;@extend %xpro2;@include _1977();@include aden();@include brooklyn();@include clarendon();@include earlybird();@include gingham();@include hudson();@include inkwell();@include lark();@include lofi();@include mayfair();@include moon();@include nashville();@include perpetua();@include reyes();@include rise();@include slumber();@include toaster();@include walden();@include willow();@include xpro2();