deblan-mirror/instagram.css
1
0
Fork 0
mirror of https://github.com/picturepan2/instagram.css synced 2024-06-14 11:45:54 +02:00
Code Issues Projects Releases Wiki Activity

Add rest of Instagram filters

Browse source
This commit is contained in:
Yan Zhu 2017-12-25 20:40:44 +08:00
parent 5be9f19acd
commit 7abb802123
35 changed files with 847 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
README.md
View file

@ -22,46 +22,46 @@ Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML
## Available filters
- 1977: `filter-1977`
- Aden: `filter-aden`
- Amaro
- Ashby
- Brannan
- Brooklyn: `filter-brooklyn`
- Charmes
- Clarendon: `filter-clarendon`
- Crema: `filter-crema`
- Dogpatch
- Earlybird
- Gingham: `filter-gingham`
- Ginza
- Hefe
- Helena
- Hudson: `filter-hudson`
- Inkwell
- Kelvin
- Kuno: `filter-juno`
- Lark: `filter-lark`
- Lo-Fi
- Ludwig: `filter-ludwig`
- Maven
- Mayfair
- Moon: `filter-moon`
- Nashville
- Perpetua
- Reyes: `filter-reyes`
- Rise
- Sierra
- Skyline
- Slumber: `filter-slumber`
- 1977 `filter-1977`
- Aden `filter-aden`
- Amaro `filter-amaro`
- Ashby `filter-ashby`
- Brannan `filter-brannan`
- Brooklyn `filter-brooklyn`
- Charmes `filter-charmes`
- Clarendon `filter-clarendon`
- Crema `filter-crema`
- Dogpatch `filter-dogpatch`
- Earlybird `filter-earlybird`
- Gingham `filter-gingham`
- Ginza `filter-ginza`
- Hefe `filter-hefe`
- Helena `filter-helena`
- Hudson `filter-hudson`
- Inkwell `filter-inkwell`
- Kelvin `filter-kelvin`
- Kuno `filter-juno`
- Lark `filter-lark`
- Lo-Fi `filter-lofi`
- Ludwig `filter-ludwig`
- Maven `filter-maven`
- Mayfair `filter-mayfair`
- Moon `filter-moon`
- Nashville `filter-nashville`
- Perpetua `filter-perpetua`
- Reyes `filter-reyes`
- Rise `filter-rise`
- Sierra `filter-sierra`
- Skyline `filter-skyline`
- Slumber `filter-slumber`
- Stinson
- Sutro
- Toaster
- Valencia
- Vesper
- Walden: `filter-walden`
- Willow: `filter-willow`
- X-Pro II: `filter-xpro-ii`
- Sutro `filter-sutro`
- Toaster `filter-toaster`
- Valencia `filter-valencia`
- Vesper `filter-vesper`
- Walden `filter-walden`
- Willow `filter-willow`
- X-Pro II `filter-xpro-ii`
## Custom

6
assets/css/demo.css
View file

@ -33,6 +33,12 @@
box-shadow: 0 .3rem 2rem rgba(51, 51, 51, .15);
}
.section-filters .card-image img {
-webkit-border-radius: .1rem;
-moz-border-radius: .1rem;
border-radius: .1rem;
}
.section-footer {
color: #acb3c2;
padding: 1.8rem .75rem 1rem .75rem;

2
assets/css/demo.min.css vendored
View file

@ -1 +1 @@
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.0"}.section-hero{padding:1rem .5rem}.section-ad{background:#f0f1f4;padding:1rem 0;text-align:center}.section-filters .container{padding-bottom:3rem;padding-top:2rem}.section-filters .column{padding:1rem}.section-filters .card{border:0}.section-filters .card-image{-webkit-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);-moz-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);box-shadow:0 .3rem 2rem rgba(51,51,51,.15)}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative}.section-footer p{line-height:1}.section-footer a{color:#727e96}.grid-hero{letter-spacing:-.021em;padding-bottom:2rem;padding-top:2rem;position:relative}.grid-hero h1{color:#454d5d;font-size:1.6rem;margin-bottom:1rem}.grid-hero h2{color:#454d5d;font-size:.8rem;font-weight:400;margin-bottom:1.5rem}
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.0"}.section-hero{padding:1rem .5rem}.section-ad{background:#f0f1f4;padding:1rem 0;text-align:center}.section-filters .container{padding-bottom:3rem;padding-top:2rem}.section-filters .column{padding:1rem}.section-filters .card{border:0}.section-filters .card-image{-webkit-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);-moz-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);box-shadow:0 .3rem 2rem rgba(51,51,51,.15)}.section-filters .card-image img{-webkit-border-radius:.1rem;-moz-border-radius:.1rem;border-radius:.1rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative}.section-footer p{line-height:1}.section-footer a{color:#727e96}.grid-hero{letter-spacing:-.021em;padding-bottom:2rem;padding-top:2rem;position:relative}.grid-hero h1{color:#454d5d;font-size:1.6rem;margin-bottom:1rem}.grid-hero h2{color:#454d5d;font-size:.8rem;font-weight:400;margin-bottom:1.5rem}

4
assets/src/demo.scss
View file

@ -33,6 +33,10 @@
.card-image {
box-shadow: 0 .3rem 2rem rgba(#333, .15);
img {
border-radius: .1rem;
}
}
}

297
dist/instagram.css vendored
View file

@ -29,6 +29,33 @@
mix-blend-mode: multiply;
}
.filter-amaro {
-webkit-filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
}
.filter-amaro::before {
background: rgba(125, 105, 24, .2);
content: "";
mix-blend-mode: overlay;
}
.filter-ashby {
-webkit-filter: sepia(.5) contrast(1.2) saturate(1.8);
filter: sepia(.5) contrast(1.2) saturate(1.8);
}
.filter-ashby::before {
background: rgba(125, 105, 24, .35);
content: "";
mix-blend-mode: lighten;
}
.filter-brannan {
-webkit-filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
}
.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 +67,17 @@
mix-blend-mode: overlay;
}
.filter-charmes {
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg);
filter: sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg);
}
.filter-charmes::before {
background: rgba(125, 105, 24, .25);
content: "";
mix-blend-mode: darken;
}
.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);
@ -62,6 +100,25 @@
mix-blend-mode: multiply;
}
.filter-dogpatch {
-webkit-filter: sepia(.35) saturate(1.1) contrast(1.5);
filter: sepia(.35) saturate(1.1) contrast(1.5);
}
.filter-earlybird {
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg);
filter: sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg);
}
.filter-earlybird::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
content: "";
mix-blend-mode: multiply;
}
.filter-gingham {
-webkit-filter: contrast(1.1) brightness(1.1);
filter: contrast(1.1) brightness(1.1);
@ -73,6 +130,42 @@
mix-blend-mode: soft-light;
}
.filter-ginza {
-webkit-filter: sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg);
filter: sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg);
}
.filter-ginza::before {
background: rgba(125, 105, 24, .15);
content: "";
mix-blend-mode: darken;
}
.filter-hefe {
-webkit-filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg);
filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg);
}
.filter-hefe::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
content: "";
mix-blend-mode: multiply;
}
.filter-helena {
-webkit-filter: sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35);
filter: sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35);
}
.filter-helena::before {
background: rgba(158, 175, 30, .25);
content: "";
mix-blend-mode: overlay;
}
.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);
@ -87,6 +180,11 @@
mix-blend-mode: multiply;
}
.filter-inkwell {
-webkit-filter: brightness(1.25) contrast(.85) grayscale(1);
filter: brightness(1.25) contrast(.85) grayscale(1);
}
.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);
@ -98,11 +196,30 @@
mix-blend-mode: overlay;
}
.filter-kelvin {
-webkit-filter: sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
filter: sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
}
.filter-kelvin::before {
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
background: -o-radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
background: -moz-radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
background: -webkit-radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
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-lofi {
-webkit-filter: saturate(1.1) contrast(1.5);
filter: saturate(1.1) contrast(1.5);
}
.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);
@ -114,30 +231,184 @@
mix-blend-mode: overlay;
}
.filter-maven {
-webkit-filter: sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75);
filter: sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75);
}
.filter-maven::before {
background: rgba(158, 175, 30, .25);
content: "";
mix-blend-mode: darken;
}
.filter-mayfair {
-webkit-filter: contrast(1.1) brightness(1.15) saturate(1.1);
filter: contrast(1.1) brightness(1.15) saturate(1.1);
}
.filter-mayfair::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
content: "";
mix-blend-mode: multiply;
}
.filter-moon {
-webkit-filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
}
.filter-nashville {
-webkit-filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
}
.filter-nashville::before {
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
background: -o-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
background: -moz-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
background: -webkit-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
content: "";
mix-blend-mode: screen;
}
.filter-perpetua {
-webkit-filter: contrast(1.1) brightness(1.25) saturate(1.1);
filter: contrast(1.1) brightness(1.25) saturate(1.1);
}
.filter-perpetua::before {
background: linear-gradient(to bottom, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
background: -o-linear-gradient(top, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
background: -moz-linear-gradient(top, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
background: -webkit-linear-gradient(top, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 91, 154, .25)), to(rgba(230, 193, 61, .25)));
content: "";
mix-blend-mode: multiply;
}
.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-rise {
-webkit-filter: sepia(.25) contrast(1.25) brightness(1.2) saturate(.9);
filter: sepia(.25) contrast(1.25) brightness(1.2) saturate(.9);
}
.filter-slumber::before {
background: rgba(125, 105, 24, .25);
.filter-rise::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
background: -webkit-radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
content: "";
mix-blend-mode: lighten;
}
.filter-sierra {
-webkit-filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
}
.filter-sierra::before {
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
background: -o-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
background: -moz-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
background: -webkit-radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
content: "";
mix-blend-mode: screen;
}
.filter-skyline {
-webkit-filter: sepia(.15) contrast(1.25) brightness(1.25) saturate(1.2);
filter: sepia(.15) contrast(1.25) brightness(1.25) saturate(1.2);
}
.filter-slumber {
-webkit-filter: sepia(.35) contrast(1.25) saturate(1.25);
filter: sepia(.35) contrast(1.25) saturate(1.25);
}
.filter-slumber::before {
background: rgba(125, 105, 24, .2);
content: "";
mix-blend-mode: darken;
}
.filter-stinson {
-webkit-filter: sepia(.35) contrast(1.25) brightness(1.1) saturate(1.25);
filter: sepia(.35) contrast(1.25) brightness(1.1) saturate(1.25);
}
.filter-stinson::before {
background: rgba(125, 105, 24, .45);
content: "";
mix-blend-mode: lighten;
}
.filter-sutro {
-webkit-filter: sepia(.4) contrast(1.2) brightness(.9) saturate(1.4) hue-rotate(-10deg);
filter: sepia(.4) contrast(1.2) brightness(.9) saturate(1.4) hue-rotate(-10deg);
}
.filter-sutro::before {
background: radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
background: -o-radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
background: -moz-radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
background: -webkit-radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
content: "";
mix-blend-mode: darken;
}
.filter-toaster {
-webkit-filter: sepia(.25) contrast(1.5) brightness(.95) hue-rotate(-15deg);
filter: sepia(.25) contrast(1.5) brightness(.95) hue-rotate(-15deg);
}
.filter-toaster::before {
background: radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
background: -o-radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
background: -moz-radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
background: -webkit-radial-gradient(circle, #804e0f, rgba(0, 0, 0, .25));
content: "";
mix-blend-mode: screen;
}
.filter-valencia {
-webkit-filter: sepia(.25) contrast(1.1) brightness(1.1);
filter: sepia(.25) contrast(1.1) brightness(1.1);
}
.filter-valencia::before {
background: rgba(230, 193, 61, .1);
content: "";
mix-blend-mode: lighten;
}
.filter-vesper {
-webkit-filter: sepia(.35) contrast(1.15) brightness(1.2) saturate(1.3);
filter: sepia(.35) contrast(1.15) brightness(1.2) saturate(1.3);
}
.filter-vesper::before {
background: rgba(125, 105, 24, .25);
content: "";
mix-blend-mode: overlay;
}
.filter-walden {
-webkit-filter: sepia(.6) contrast(.75) brightness(1.25) saturate(2);
filter: sepia(.6) contrast(.75) brightness(1.25) saturate(2);
-webkit-filter: sepia(.35) contrast(.8) brightness(1.25) saturate(1.4);
filter: sepia(.35) contrast(.8) brightness(1.25) saturate(1.4);
}
.filter-walden::before {
background: rgba(229, 240, 128, .5);
content: "";
mix-blend-mode: darken;
}
.filter-willow {
@ -146,15 +417,15 @@
}
.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);
-webkit-filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
}
.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%);
background: radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
background: -o-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
background: -moz-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
content: "";
mix-blend-mode: multiply;
}

2
dist/instagram.min.css vendored
View file

File diff suppressed because one or more lines are too long

268
index.html
View file

@ -84,6 +84,39 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-amaro">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Amaro</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-ashby">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Ashby</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-brannan">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Brannan</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">
@ -95,6 +128,17 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-charmes">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Charmes</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-clarendon">
@ -117,6 +161,28 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-dogpatch">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Dogpatch</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-earlybird">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Earlybird</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">
@ -127,6 +193,39 @@
</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-ginza">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Ginza</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-hefe">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Hefe</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-helena">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Helena</span>
</div>
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
@ -139,6 +238,28 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-inkwell">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Inkwell</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-kelvin">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Kelvin</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-juno">
@ -161,6 +282,17 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-lofi">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Lo-Fi</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-ludwig">
@ -172,6 +304,28 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-maven">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Maven</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-mayfair">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Mayfair</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">
@ -183,6 +337,28 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-nashville">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Nashville</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-perpetua">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Perpetua</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-reyes">
@ -194,6 +370,39 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-rise">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Rise</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-sierra">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Sierra</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-skyline">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Skyline</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-slumber">
@ -205,6 +414,61 @@
</div>
</div>
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-stinson">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Stinson</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-sutro">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Sutro</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-toaster">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Toaster</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-valencia">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Valencia</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-vesper">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Vesper</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-walden">
@ -266,8 +530,8 @@
</div>
<footer class="section section-footer">
<div id="copyright" class="grid-footer container grid-lg">
<p><a href="https://github.com/picturepan2/emoji.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
<div id="copyright" class="grid-footer container grid-lg text-center">
<p><a href="https://github.com/picturepan2/instagram.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
<p>Code with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/devices.css/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</footer>

10
src/_amaro.scss Normal file
View file

@ -0,0 +1,10 @@
// Amaro Filter
.filter-amaro {
filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
&::before {
background: rgba(125, 105, 24, .2);
content: "";
mix-blend-mode: overlay;
}
}

10
src/_ashby.scss Normal file
View file

@ -0,0 +1,10 @@
// Ashby Filter
.filter-ashby {
filter: sepia(.5) contrast(1.2) saturate(1.8);
&::before {
background: rgba(125, 105, 24, .35);
content: "";
mix-blend-mode: lighten;
}
}

4
src/_brannan.scss Normal file
View file

@ -0,0 +1,4 @@
// Brannan Filter
.filter-brannan {
filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
}

10
src/_charmes.scss Normal file
View file

@ -0,0 +1,10 @@
// Charmes Filter
.filter-charmes {
filter: sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg);
&::before {
background: rgba(125, 105, 24, .25);
content: "";
mix-blend-mode: darken;
}
}

4
src/_dogpatch.scss Normal file
View file

@ -0,0 +1,4 @@
// Dogpatch Filter
.filter-dogpatch {
filter: sepia(.35) saturate(1.1) contrast(1.5);
}

10
src/_earlybird.scss Normal file
View file

@ -0,0 +1,10 @@
// Earlybird Filter
.filter-earlybird {
filter: sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg);
&::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
content: "";
mix-blend-mode: multiply;
}
}

10
src/_ginza.scss Normal file
View file

@ -0,0 +1,10 @@
// Ginza Filter
.filter-ginza {
filter: sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg);
&::before {
background: rgba(125, 105, 24, .15);
content: "";
mix-blend-mode: darken;
}
}

10
src/_hefe.scss Normal file
View file

@ -0,0 +1,10 @@
// Hefe Filter
.filter-hefe {
filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg);
&::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
content: "";
mix-blend-mode: multiply;
}
}

10
src/_helena.scss Normal file
View file

@ -0,0 +1,10 @@
// Helena Filter
.filter-helena {
filter: sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35);
&::before {
background: rgba(158, 175, 30, .25);
content: "";
mix-blend-mode: overlay;
}
}

4
src/_inkwell.scss Normal file
View file

@ -0,0 +1,4 @@
// Inkwell Filter
.filter-inkwell {
filter: brightness(1.25) contrast(.85) grayscale(1);
}

10
src/_kelvin.scss Normal file
View file

@ -0,0 +1,10 @@
// Kelvin Filter
.filter-kelvin {
filter: sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
&::before {
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
content: "";
mix-blend-mode: overlay;
}
}

4
src/_lofi.scss Normal file
View file

@ -0,0 +1,4 @@
// Lo-Fi Filter
.filter-lofi {
filter: saturate(1.1) contrast(1.5);
}

10
src/_maven.scss Normal file
View file

@ -0,0 +1,10 @@
// Maven Filter
.filter-maven {
filter: sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75);
&::before {
background: rgba(158, 175, 30, .25);
content: "";
mix-blend-mode: darken;
}
}

10
src/_mayfair.scss Normal file
View file

@ -0,0 +1,10 @@
// Mayfair Filter
.filter-mayfair {
filter: contrast(1.1) brightness(1.15) saturate(1.1);
&::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
content: "";
mix-blend-mode: multiply;
}
}

10
src/_nashville.scss Normal file
View file

@ -0,0 +1,10 @@
// Nashville Filter
.filter-nashville {
filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
&::before {
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
content: "";
mix-blend-mode: screen;
}
}

10
src/_perpetua.scss Normal file
View file

@ -0,0 +1,10 @@
// Perpetua Filter
.filter-perpetua {
filter: contrast(1.1) brightness(1.25) saturate(1.1);
&::before {
background: linear-gradient(to bottom, rgba(0, 91, 154, .25), rgba(230, 193, 61, .25));
content: "";
mix-blend-mode: multiply;
}
}

10
src/_rise.scss Normal file
View file

@ -0,0 +1,10 @@
// Rise Filter
.filter-rise {
filter: sepia(.25) contrast(1.25) brightness(1.2) saturate(.9);
&::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(230, 193, 61, .25) 100%);
content: "";
mix-blend-mode: lighten;
}
}

10
src/_sierra.scss Normal file
View file

@ -0,0 +1,10 @@
// Sierra Filter
.filter-sierra {
filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);
&::before {
background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(0, 0, 0, .65) 100%);
content: "";
mix-blend-mode: screen;
}
}

4
src/_skyline.scss Normal file
View file

@ -0,0 +1,4 @@
// Skyline Filter
.filter-skyline {
filter: sepia(.15) contrast(1.25) brightness(1.25) saturate(1.2);
}

6
src/_slumber.scss
View file

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

10
src/_stinson.scss Normal file
View file

@ -0,0 +1,10 @@
// Stinson Filter
.filter-stinson {
filter: sepia(.35) contrast(1.25) brightness(1.1) saturate(1.25);
&::before {
background: rgba(125, 105, 24, .45);
content: "";
mix-blend-mode: lighten;
}
}

10
src/_sutro.scss Normal file
View file

@ -0,0 +1,10 @@
// Sutro Filter
.filter-sutro {
filter: sepia(.4) contrast(1.2) brightness(.9) saturate(1.4) hue-rotate(-10deg);
&::before {
background: radial-gradient(circle closest-corner, transparent 50%, rgba(0, 0, 0, .5) 90%);
content: "";
mix-blend-mode: darken;
}
}

10
src/_toaster.scss Normal file
View file

@ -0,0 +1,10 @@
// Toaster Filter
.filter-toaster {
filter: sepia(.25) contrast(1.5) brightness(.95) hue-rotate(-15deg);
&::before {
background: radial-gradient(circle, rgb(128, 78, 15), rgba(0, 0, 0, .25));
content: "";
mix-blend-mode: screen;
}
}

10
src/_valencia.scss Normal file
View file

@ -0,0 +1,10 @@
// Valencia Filter
.filter-valencia {
filter: sepia(.25) contrast(1.1) brightness(1.1) ;
&::before {
background: rgba(230, 193, 61, .1);
content: "";
mix-blend-mode: lighten;
}
}

10
src/_vesper.scss Normal file
View file

@ -0,0 +1,10 @@
// Vesper Filter
.filter-vesper {
filter: sepia(.35) contrast(1.15) brightness(1.2) saturate(1.3);
&::before {
background: rgba(125, 105, 24, .25);
content: "";
mix-blend-mode: overlay;
}
}

8
src/_walden.scss
View file

@ -1,4 +1,10 @@
// Walden Filter
.filter-walden {
filter: sepia(.6) contrast(.75) brightness(1.25) saturate(2);
filter: sepia(.35) contrast(.8) brightness(1.25) saturate(1.4);
&::before {
background: rgba(229, 240, 128, .5);
content: "";
mix-blend-mode: darken;
}
}

4
src/_xpro-ii.scss
View file

@ -1,9 +1,9 @@
// X-Pro II Filter
.filter-xpro-ii {
filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4);
filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
&::before {
background: radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .45) 100%);
background: radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
content: "";
mix-blend-mode: multiply;
}

24
src/instagram.scss
View file

@ -5,17 +5,41 @@
@import "core";
@import "1977";
@import "aden";
@import "amaro";
@import "ashby";
@import "brannan";
@import "brooklyn";
@import "charmes";
@import "clarendon";
@import "crema";
@import "dogpatch";
@import "earlybird";
@import "gingham";
@import "ginza";
@import "hefe";
@import "helena";
@import "hudson";
@import "inkwell";
@import "juno";
@import "kelvin";
@import "lark";
@import "lofi";
@import "ludwig";
@import "maven";
@import "mayfair";
@import "moon";
@import "nashville";
@import "perpetua";
@import "reyes";
@import "rise";
@import "sierra";
@import "skyline";
@import "slumber";
@import "stinson";
@import "sutro";
@import "toaster";
@import "valencia";
@import "vesper";
@import "walden";
@import "willow";
@import "xpro-ii";