mirror of
https://github.com/picturepan2/instagram.css
synced 2024-06-15 04:05:03 +02:00
second wave of filters
This commit is contained in:
Yan Zhu
parent
f226c2b34e
commit
aed73d4809
58
dist/instagram.css
vendored
58
dist/instagram.css
vendored
|
|
@ -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;
|
||||
}
|
||||
2
dist/instagram.min.css
vendored
2
dist/instagram.min.css
vendored
|
|
@ -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)}
|
||||
/*! 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}
|
||||
64
index.html
64
index.html
|
|
@ -37,14 +37,74 @@
|
|||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive i-1977">
|
||||
<div class="card-image filter-1977">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">1977</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-clarendon">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Clarendon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-hudson">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Hudson</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-moon">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Moon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-willow">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Willow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-walden">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Walden</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-xpro-ii">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">X-Pro II</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
4
src/_clarendon.scss
Normal file
4
src/_clarendon.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Clarendon Filter
|
||||
.filter-clarendon {
|
||||
filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||
}
|
||||
4
src/_core.scss
Normal file
4
src/_core.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Filter Core
|
||||
[class*="filter"] {
|
||||
position: relative;
|
||||
}
|
||||
17
src/_hudson.scss
Normal file
17
src/_hudson.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
4
src/_moon.scss
Normal file
4
src/_moon.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Moon Filter
|
||||
.filter-moon {
|
||||
filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
|
||||
}
|
||||
4
src/_walden.scss
Normal file
4
src/_walden.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Walden Filter
|
||||
.filter-walden {
|
||||
filter: sepia(.6) contrast(.75) brightness(1.1) saturate(2);
|
||||
}
|
||||
4
src/_willow.scss
Normal file
4
src/_willow.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Willow Filter
|
||||
.filter-willow {
|
||||
filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2);
|
||||
}
|
||||
17
src/_xpro-ii.scss
Normal file
17
src/_xpro-ii.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in a new issue