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

New version of demo page

Browse source
This commit is contained in:
Yan Zhu 2017-11-20 21:09:05 +08:00
parent aed73d4809
commit e11d16efac
4 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/instagram.css vendored
View file

@ -33,7 +33,7 @@
}
.filter-walden {
filter: sepia(.6) contrast(.75) brightness(1.1) saturate(2);
filter: sepia(.6) contrast(.75) brightness(1.25) saturate(2);
}
.filter-willow {

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{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}
/*! 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.25) 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}

29
index.html
View file

@ -14,14 +14,40 @@
<body>
<div class="section section-hero">
<div id="overview" class="grid-hero container grid-lg text-center">
<h1>Instagram.css</h1>
<h2>Pure CSS Instagram filters</h2>
<p>
<a href="#content" class="btn btn-primary btn-lg">Demo</a>
<a href="https://github.com/picturepan2/instagram.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
</p>
<p class="text-gray">Latest version: <span class="version"></span></p>
<p><a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a></p>
</div>
</div>
<div class="section section-ad">
<div class="hide-md">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-2225124559530218"
data-ad-slot="9894180784"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="show-md">
<!-- GitHub-sm -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-2225124559530218"
data-ad-slot="9278881734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div id="content" class="section section-device">
<div class="container grid-xl text-center">
<div class="columns">
@ -108,6 +134,7 @@
</div>
</div>
</div>
<div class="section section-ad">
<div class="hide-md">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

2
src/_walden.scss
View file

@ -1,4 +1,4 @@
// Walden Filter
.filter-walden {
filter: sepia(.6) contrast(.75) brightness(1.1) saturate(2);
filter: sepia(.6) contrast(.75) brightness(1.25) saturate(2);
}