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

Add new filters

Browse source
This commit is contained in:
Yan Zhu 2017-11-21 14:28:57 +08:00
parent ab6f2c4d6c
commit d18ec67173
10 changed files with 76 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
dist/instagram.css vendored
View file

@ -3,35 +3,55 @@
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-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: -moz-radial-gradient(center center, circle, transparent 25%, rgba(25, 62, 167, .25) 100%);
background: radial-gradient(circle at center center, transparent 25%, rgba(25, 62, 167, .25) 100%);
background: -o-radial-gradient(center center, circle, transparent 25%, rgba(25, 62, 167, .25) 100%);
background: -webkit-radial-gradient(center center, circle, transparent 25%, rgba(25, 62, 167, .25) 100%);
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: "";
display: block;
height: 100%;
left: 0;
mix-blend-mode: multiply;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.filter-moon {
@ -55,17 +75,10 @@
}
.filter-xpro-ii::before {
background: -moz-radial-gradient(center center, circle, transparent 0, rgba(0, 0, 0, .65) 100%);
background: radial-gradient(circle at center center, transparent 0, rgba(0, 0, 0, .65) 100%);
background: -o-radial-gradient(center center, circle, transparent 0, rgba(0, 0, 0, .65) 100%);
background: -webkit-radial-gradient(center center, circle, transparent 0, rgba(0, 0, 0, .65) 100%);
background: radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .65) 100%);
background: -o-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .65) 100%);
background: -moz-radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .65) 100%);
background: -webkit-radial-gradient(circle closest-corner, 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
View file

@ -1 +1 @@
/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */[class*=filter]{position:relative}.filter-1977{-webkit-filter:sepia(.5) hue-rotate(-30deg) saturate(1.4);filter:sepia(.5) hue-rotate(-30deg) saturate(1.4)}.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-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:-moz-radial-gradient(center center,circle,transparent 25%,rgba(25,62,167,.25) 100%);background:radial-gradient(circle at center center,transparent 25%,rgba(25,62,167,.25) 100%);background:-o-radial-gradient(center center,circle,transparent 25%,rgba(25,62,167,.25) 100%);background:-webkit-radial-gradient(center center,circle,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{-webkit-filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35);filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.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:-moz-radial-gradient(center center,circle,transparent 0,rgba(0,0,0,.65) 100%);background:radial-gradient(circle at center center,transparent 0,rgba(0,0,0,.65) 100%);background:-o-radial-gradient(center center,circle,transparent 0,rgba(0,0,0,.65) 100%);background:-webkit-radial-gradient(center center,circle,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}
/*! 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-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-moon{-webkit-filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35);filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.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,.65) 100%);background:-o-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.65) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.65) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.65) 100%);content:"";mix-blend-mode:multiply}

10
index.html
View file

@ -71,6 +71,16 @@
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-brooklyn">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Brooklyn</span>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-clarendon">

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "instagram.css",
"version": "0.1.0",
"version": "0.1.1",
"homepage": "http://picturepan2.github.io/instagram.css",
"author": "Yan Zhu <picturepan2@hotmail.com>",
"description": "Instagram.css",

10
src/_brooklyn.scss Normal file
View file

@ -0,0 +1,10 @@
// Brooklyn Filter
.filter-brooklyn {
filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
&::before {
background: rgba(127, 187, 227, .2);
content: "";
mix-blend-mode: overlay;
}
}

6
src/_clarendon.scss
View file

@ -1,4 +1,10 @@
// Clarendon Filter
.filter-clarendon {
filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);
&::before {
background: rgba(127, 187, 227, .4);
content: "";
mix-blend-mode: overlay;
}
}

10
src/_core.scss
View file

@ -1,4 +1,14 @@
// Filter Core
[class*="filter"] {
position: relative;
&::before {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
}

9
src/_hudson.scss
View file

@ -3,15 +3,8 @@
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%);
background: radial-gradient(circle closest-corner, 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;
}
}

9
src/_xpro-ii.scss
View file

@ -3,15 +3,8 @@
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%);
background: radial-gradient(circle closest-corner, 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;
}
}

1
src/instagram.scss
View file

@ -4,6 +4,7 @@
/*! Filters.css v#{$version} | MIT License | github.com/picturepan2/filters.css */
@import "core";
@import "1977";
@import "brooklyn";
@import "clarendon";
@import "hudson";
@import "moon";