diff --git a/dist/instagram.css b/dist/instagram.css index ce6dbd7..5783f8b 100644 --- a/dist/instagram.css +++ b/dist/instagram.css @@ -1,4 +1,58 @@ /*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */ -.i-1977 { - filter: sepia(.5) hue-rotate(-30deg) saturate(1.2); +[class*="filter"] { + position: relative; +} + +.filter-1977 { + filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); +} + +.filter-clarendon { + filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg); +} + +.filter-hudson { + filter: sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg); +} + +.filter-hudson::before { + background: radial-gradient(circle at center center, transparent 25%, rgba(25, 62, 167, .25) 100%); + content: ""; + display: block; + height: 100%; + left: 0; + mix-blend-mode: multiply; + position: absolute; + top: 0; + width: 100%; + z-index: 1; +} + +.filter-moon { + filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35); +} + +.filter-walden { + filter: sepia(.6) contrast(.75) brightness(1.1) saturate(2); +} + +.filter-willow { + filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2); +} + +.filter-xpro-ii { + filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4); +} + +.filter-xpro-ii::before { + background: radial-gradient(circle at center center, transparent 0, rgba(0, 0, 0, .65) 100%); + content: ""; + display: block; + height: 100%; + left: 0; + mix-blend-mode: multiply; + position: absolute; + top: 0; + width: 100%; + z-index: 1; } \ No newline at end of file diff --git a/dist/instagram.min.css b/dist/instagram.min.css index f3045d8..8c1692d 100644 --- a/dist/instagram.min.css +++ b/dist/instagram.min.css @@ -1 +1 @@ -/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */.i-1977{filter:sepia(.5) hue-rotate(-30deg) saturate(1.2)} \ No newline at end of file +/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */[class*=filter]{position:relative}.filter-1977{filter:sepia(.5) hue-rotate(-30deg) saturate(1.4)}.filter-clarendon{filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-hudson{filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg)}.filter-hudson::before{background:radial-gradient(circle at center center,transparent 25%,rgba(25,62,167,.25) 100%);content:"";display:block;height:100%;left:0;mix-blend-mode:multiply;position:absolute;top:0;width:100%;z-index:1}.filter-moon{filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.filter-walden{filter:sepia(.6) contrast(.75) brightness(1.1) saturate(2)}.filter-willow{filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2)}.filter-xpro-ii{filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4)}.filter-xpro-ii::before{background:radial-gradient(circle at center center,transparent 0,rgba(0,0,0,.65) 100%);content:"";display:block;height:100%;left:0;mix-blend-mode:multiply;position:absolute;top:0;width:100%;z-index:1} \ No newline at end of file diff --git a/index.html b/index.html index cdfe934..2751871 100644 --- a/index.html +++ b/index.html @@ -37,14 +37,74 @@
-
- +
+
1977
+
+
+
+ +
+
+ Clarendon +
+
+
+
+
+
+ +
+
+ Hudson +
+
+
+
+
+
+ +
+
+ Moon +
+
+
+
+
+
+ +
+
+ Willow +
+
+
+
+
+
+ +
+
+ Walden +
+
+
+
+
+
+ +
+
+ X-Pro II +
+
+
diff --git a/src/_1977.scss b/src/_1977.scss index 42cec43..91bb83f 100644 --- a/src/_1977.scss +++ b/src/_1977.scss @@ -1,4 +1,4 @@ // 1977 Filter -.i-1977 { - filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2); +.filter-1977 { + filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); } diff --git a/src/_clarendon.scss b/src/_clarendon.scss new file mode 100644 index 0000000..e95ed81 --- /dev/null +++ b/src/_clarendon.scss @@ -0,0 +1,4 @@ +// Clarendon Filter +.filter-clarendon { + filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg); +} diff --git a/src/_core.scss b/src/_core.scss new file mode 100644 index 0000000..b9b3771 --- /dev/null +++ b/src/_core.scss @@ -0,0 +1,4 @@ +// Filter Core +[class*="filter"] { + position: relative; +} diff --git a/src/_hudson.scss b/src/_hudson.scss new file mode 100644 index 0000000..88852d7 --- /dev/null +++ b/src/_hudson.scss @@ -0,0 +1,17 @@ +// Hudson Filter +.filter-hudson { + filter: sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg); + + &::before { + background: radial-gradient(circle at center center, transparent 25%, rgba(25, 62, 167, 0.25) 100%); + content: ""; + display: block; + height: 100%; + left: 0; + mix-blend-mode: multiply; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } +} diff --git a/src/_moon.scss b/src/_moon.scss new file mode 100644 index 0000000..81e0c19 --- /dev/null +++ b/src/_moon.scss @@ -0,0 +1,4 @@ +// Moon Filter +.filter-moon { + filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35); +} diff --git a/src/_walden.scss b/src/_walden.scss new file mode 100644 index 0000000..473d56f --- /dev/null +++ b/src/_walden.scss @@ -0,0 +1,4 @@ +// Walden Filter +.filter-walden { + filter: sepia(.6) contrast(.75) brightness(1.1) saturate(2); +} diff --git a/src/_willow.scss b/src/_willow.scss new file mode 100644 index 0000000..4867de9 --- /dev/null +++ b/src/_willow.scss @@ -0,0 +1,4 @@ +// Willow Filter +.filter-willow { + filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2); +} diff --git a/src/_xpro-ii.scss b/src/_xpro-ii.scss new file mode 100644 index 0000000..e911819 --- /dev/null +++ b/src/_xpro-ii.scss @@ -0,0 +1,17 @@ +// X-Pro II Filter +.filter-xpro-ii { + filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4); + + &::before { + background: radial-gradient(circle at center center, transparent 0, rgba(0, 0, 0, .65) 100%); + content: ""; + display: block; + height: 100%; + left: 0; + mix-blend-mode: multiply; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } +} diff --git a/src/instagram.scss b/src/instagram.scss index eefee2e..638b2a0 100644 --- a/src/instagram.scss +++ b/src/instagram.scss @@ -2,4 +2,11 @@ @import "variables"; /*! Filters.css v#{$version} | MIT License | github.com/picturepan2/filters.css */ +@import "core"; @import "1977"; +@import "clarendon"; +@import "hudson"; +@import "moon"; +@import "walden"; +@import "willow"; +@import "xpro-ii";