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 @@