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

Improve Poprocket filter

Browse source
This commit is contained in:
Yan Zhu 2018-01-03 11:40:47 +08:00
parent 5f81fff3bb
commit 3484020dc4
8 changed files with 40 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -49,6 +49,7 @@ Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML
- Moon `filter-moon`
- Nashville `filter-nashville`
- Perpetua `filter-perpetua`
- Poprocket `filter-poprocket`
- Reyes `filter-reyes`
- Rise `filter-rise`
- Sierra `filter-sierra`
@ -62,7 +63,6 @@ Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML
- Walden `filter-walden`
- Willow `filter-willow`
- X-Pro II `filter-xpro-ii`
- Poprocket(old) `filter-poprocket`
## Custom

24
dist/instagram.css vendored
View file

@ -1,4 +1,4 @@
/*! Instagram.css v0.1.2 | MIT License | github.com/picturepan2/instagram.css */
/*! Instagram.css v0.1.3 | MIT License | github.com/picturepan2/instagram.css */
[class*="filter"] {
position: relative;
}
@ -290,6 +290,20 @@
mix-blend-mode: multiply;
}
.filter-poprocket {
-webkit-filter: sepia(.15) brightness(1.2);
filter: sepia(.15) brightness(1.2);
}
.filter-poprocket::before {
background: radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
background: -o-radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
background: -moz-radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
background: -webkit-radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, black 80%);
content: "";
mix-blend-mode: screen;
}
.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);
@ -428,10 +442,4 @@
background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
content: "";
mix-blend-mode: multiply;
}
.filter-poprocket::before {
background-image: radial-gradient(circle closest-corner, rgba(206, 39, 70, 0.84) 10%, rgba(255, 255, 255, 0)), radial-gradient(circle closest-corner, rgba(15, 5, 46, 0.84) 90%, rgba(255, 255, 255, 0) 10%);
content: "";
mix-blend-mode: screen;
}
}

2
dist/instagram.min.css vendored
View file

File diff suppressed because one or more lines are too long

25
index.html
View file

@ -359,6 +359,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-poprocket">
<img src="assets/img/instagram-example.jpg" class="img-responsive"/>
</div>
<div class="card-header">
<span class="h6">Poprocket</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">
@ -501,19 +512,7 @@
</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-poprocket">
<img src="assets/img/instagram-example.jpg" class="img-responsive"/>
</div>
<div class="card-header">
<span class="h6">Poprocket</span>
</div>
</div>
</div>
</div>
</div>
</div>

2
package.json
View file

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

14
src/_poprocket.scss
View file

@ -1,10 +1,10 @@
//Poprocket effect
// Poprocket Filter
.filter-poprocket {
//filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
filter: sepia(.15) brightness(1.2);
&::before {
background-image: radial-gradient(circle closest-corner, rgba(206, 39, 70, .84) 10%, rgba(255, 255, 255, 0)), radial-gradient(circle closest-corner, rgba(15,5,46,.84) 90%, rgba(255,255,255,0) 10%);
content: "";
mix-blend-mode: screen;
}
&::before {
background: radial-gradient(circle closest-corner, rgba(206, 39, 70, .75) 40%, rgba(0, 0, 0, 1) 80%);
content: "";
mix-blend-mode: screen;
}
}

2
src/_variables.scss
View file

@ -1,5 +1,5 @@
// Version
$version: "0.1.2";
$version: "0.1.3";
// Core variables
$primary-color: #5764c6 !default;

2
src/instagram.scss
View file

@ -30,6 +30,7 @@
@import "moon";
@import "nashville";
@import "perpetua";
@import "poprocket";
@import "reyes";
@import "rise";
@import "sierra";
@ -43,4 +44,3 @@
@import "walden";
@import "willow";
@import "xpro-ii";
@import "poprocket";