Add filters Aden, Crema and Ludwig

dist/instagram.css

@@ -18,6 +18,17 @@
   filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
 }
 
+.filter-aden {
+  -webkit-filter: sepia(.2) brightness(1.15) saturate(1.4);
+  filter: sepia(.2) brightness(1.15) saturate(1.4);
+}
+
+.filter-aden::before {
+  background: rgba(125, 105, 24, .1);
+  content: "";
+  mix-blend-mode: multiply;
+}
+
 .filter-brooklyn {
   -webkit-filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
   filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
@@ -40,6 +51,17 @@
   mix-blend-mode: overlay;
 }
 
+.filter-crema {
+  -webkit-filter: sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);
+  filter: sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);
+}
+
+.filter-crema::before {
+  background: rgba(125, 105, 24, .2);
+  content: "";
+  mix-blend-mode: multiply;
+}
+
 .filter-gingham {
   -webkit-filter: contrast(1.1) brightness(1.1);
   filter: contrast(1.1) brightness(1.1);
@@ -81,6 +103,17 @@
   filter: sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);
 }
 
+.filter-ludwig {
+  -webkit-filter: sepia(.25) contrast(1.05) brightness(1.05) saturate(2);
+  filter: sepia(.25) contrast(1.05) brightness(1.05) saturate(2);
+}
+
+.filter-ludwig::before {
+  background: rgba(125, 105, 24, .1);
+  content: "";
+  mix-blend-mode: overlay;
+}
+
 .filter-moon {
   -webkit-filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
   filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
@@ -92,14 +125,14 @@
 }
 
 .filter-slumber {
-  -webkit-filter: sepia(.65) contrast(.95) brightness(1.25) saturate(2);
-  filter: sepia(.65) contrast(.95) brightness(1.25) saturate(2);
+  -webkit-filter: sepia(.45) contrast(.95) brightness(1.25) saturate(1.5);
+  filter: sepia(.45) contrast(.95) brightness(1.25) saturate(1.5);
 }
 
 .filter-slumber::before {
-  background: rgba(127, 187, 227, .4);
+  background: rgba(125, 105, 24, .25);
   content: "";
-  mix-blend-mode: multiply;
+  mix-blend-mode: lighten;
 }
 
 .filter-walden {

dist/instagram.min.css

@@ -1 +1 @@
-/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */[class*=filter]{position:relative}[class*=filter]::before{display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.filter-1977{-webkit-filter:sepia(.5) hue-rotate(-30deg) saturate(1.4);filter:sepia(.5) hue-rotate(-30deg) saturate(1.4)}.filter-brooklyn{-webkit-filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-brooklyn::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-clarendon{-webkit-filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-clarendon::before{background:rgba(127,187,227,.4);content:"";mix-blend-mode:overlay}.filter-gingham{-webkit-filter:contrast(1.1) brightness(1.1);filter:contrast(1.1) brightness(1.1)}.filter-gingham::before{background:#e6e6e6;content:"";mix-blend-mode:soft-light}.filter-hudson{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg)}.filter-hudson::before{background:radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-o-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);content:"";mix-blend-mode:multiply}.filter-juno{-webkit-filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8)}.filter-juno::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-lark{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25)}.filter-moon{-webkit-filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35);filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.filter-reyes{-webkit-filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4)}.filter-slumber{-webkit-filter:sepia(.65) contrast(.95) brightness(1.25) saturate(2);filter:sepia(.65) contrast(.95) brightness(1.25) saturate(2)}.filter-slumber::before{background:rgba(127,187,227,.4);content:"";mix-blend-mode:multiply}.filter-walden{-webkit-filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2);filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2)}.filter-willow{-webkit-filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2);filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2)}.filter-xpro-ii{-webkit-filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4);filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4)}.filter-xpro-ii::before{background:radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-o-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);content:"";mix-blend-mode:multiply}
+/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */[class*=filter]{position:relative}[class*=filter]::before{display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.filter-1977{-webkit-filter:sepia(.5) hue-rotate(-30deg) saturate(1.4);filter:sepia(.5) hue-rotate(-30deg) saturate(1.4)}.filter-aden{-webkit-filter:sepia(.2) brightness(1.15) saturate(1.4);filter:sepia(.2) brightness(1.15) saturate(1.4)}.filter-aden::before{background:rgba(125,105,24,.1);content:"";mix-blend-mode:multiply}.filter-brooklyn{-webkit-filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-brooklyn::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-clarendon{-webkit-filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-clarendon::before{background:rgba(127,187,227,.4);content:"";mix-blend-mode:overlay}.filter-crema{-webkit-filter:sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);filter:sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg)}.filter-crema::before{background:rgba(125,105,24,.2);content:"";mix-blend-mode:multiply}.filter-gingham{-webkit-filter:contrast(1.1) brightness(1.1);filter:contrast(1.1) brightness(1.1)}.filter-gingham::before{background:#e6e6e6;content:"";mix-blend-mode:soft-light}.filter-hudson{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg)}.filter-hudson::before{background:radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-o-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);content:"";mix-blend-mode:multiply}.filter-juno{-webkit-filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8)}.filter-juno::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-lark{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25)}.filter-ludwig{-webkit-filter:sepia(.25) contrast(1.05) brightness(1.05) saturate(2);filter:sepia(.25) contrast(1.05) brightness(1.05) saturate(2)}.filter-ludwig::before{background:rgba(125,105,24,.1);content:"";mix-blend-mode:overlay}.filter-moon{-webkit-filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35);filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.filter-reyes{-webkit-filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4)}.filter-slumber{-webkit-filter:sepia(.45) contrast(.95) brightness(1.25) saturate(1.5);filter:sepia(.45) contrast(.95) brightness(1.25) saturate(1.5)}.filter-slumber::before{background:rgba(125,105,24,.25);content:"";mix-blend-mode:lighten}.filter-walden{-webkit-filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2);filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2)}.filter-willow{-webkit-filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2);filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2)}.filter-xpro-ii{-webkit-filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4);filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4)}.filter-xpro-ii::before{background:radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-o-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);content:"";mix-blend-mode:multiply}

index.html

@@ -15,7 +15,7 @@
   <div class="section section-hero">
     <div id="overview" class="grid-hero container grid-lg text-center">
       <h1>Instagram.css</h1>
-      <h2>Pure CSS Instagram filters</h2> 
+      <h2>Complete set of Instagram filters in pure CSS</h2> 
       <p>
         <a href="#content" class="btn btn-primary btn-lg">Demo</a>
         <a href="https://github.com/picturepan2/instagram.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
@@ -71,6 +71,16 @@
             </div>
           </div>
         </div>
+        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
+          <div class="card">
+            <div class="card-image filter-aden">
+              <img src="assets/img/instagram-example.jpg" class="img-responsive">
+            </div>
+            <div class="card-header">
+              <span class="h6">Aden</span>
+            </div>
+          </div>
+        </div>
         <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
           <div class="card">
             <div class="card-image filter-brooklyn">
@@ -91,6 +101,16 @@
             </div>
           </div>
         </div>
+        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
+          <div class="card">
+            <div class="card-image filter-crema">
+              <img src="assets/img/instagram-example.jpg" class="img-responsive">
+            </div>
+            <div class="card-header">
+              <span class="h6">Crema</span>
+            </div>
+          </div>
+        </div>
         <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
           <div class="card">
             <div class="card-image filter-gingham">
@@ -131,6 +151,16 @@
             </div>
           </div>
         </div>
+        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
+          <div class="card">
+            <div class="card-image filter-ludwig">
+              <img src="assets/img/instagram-example.jpg" class="img-responsive">
+            </div>
+            <div class="card-header">
+              <span class="h6">Ludwig</span>
+            </div>
+          </div>
+        </div>
         <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
           <div class="card">
             <div class="card-image filter-moon">

src/_aden.scss

@@ -0,0 +1,10 @@
+// Aden Filter 
+.filter-aden {
+  filter: sepia(.2) brightness(1.15) saturate(1.4);
+  
+  &::before {
+    background: rgba(125, 105, 24, .1);
+    content: "";
+    mix-blend-mode: multiply;
+  }
+}

src/_crema.scss

@@ -0,0 +1,10 @@
+// Crema Filter 
+.filter-crema {
+  filter: sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);
+
+  &::before {
+    background: rgba(125, 105, 24, .2);
+    content: "";
+    mix-blend-mode: multiply;
+  }
+}

src/_hudson.scss

@@ -3,7 +3,7 @@
   filter: sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);
 
   &::before {
-    background: radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, 0.25) 100%);
+    background: radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, .25) 100%);
     content: "";
     mix-blend-mode: multiply;
   }

src/_ludwig.scss

@@ -0,0 +1,10 @@
+// Ludwig Filter 
+.filter-ludwig {
+  filter: sepia(.25) contrast(1.05) brightness(1.05) saturate(2);
+
+  &::before {
+    background: rgba(125, 105, 24, .1);
+    content: "";
+    mix-blend-mode: overlay;
+  }
+}

src/_slumber.scss

@@ -1,10 +1,10 @@
 // Slumber Filter 
 .filter-slumber {
-  filter: sepia(.65) contrast(.95) brightness(1.25) saturate(2);
+  filter: sepia(.45) contrast(.95) brightness(1.25) saturate(1.5);
 
   &::before {
-    background: rgba(127, 187, 227, .4);
+    background: rgba(125, 105, 24, .25);
     content: "";
-    mix-blend-mode: multiply;
+    mix-blend-mode: lighten;
   }
 }

src/instagram.scss

@@ -4,12 +4,15 @@
 /*! Filters.css v#{$version} | MIT License | github.com/picturepan2/filters.css */
 @import "core";
 @import "1977";
+@import "aden";
 @import "brooklyn";
 @import "clarendon";
+@import "crema";
 @import "gingham";
 @import "hudson";
 @import "juno";
 @import "lark";
+@import "ludwig";
 @import "moon";
 @import "reyes";
 @import "slumber";