mirror of
https://github.com/picturepan2/instagram.css
synced 2024-06-07 00:12:26 +02:00
Add Readme and new browser support
This commit is contained in:
Yan Zhu
parent
e11d16efac
commit
ab6f2c4d6c
34
README.md
Normal file
34
README.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
# Instagram.css
|
||||
|
||||
Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to the [CSSgram](https://github.com/una/CSSgram) for inspiration.
|
||||
|
||||
## What's next
|
||||
|
||||
- Add more Instagram filters
|
||||
|
||||
## Getting started
|
||||
|
||||
Download the compiled and minified [Instagram.css files](https://github.com/picturepan2/instagram.css). Include `instagram.css` located in `/dist` in your website or Web app <head> part.
|
||||
|
||||
`<link rel="stylesheet" href="dist/instagram.css">`
|
||||
|
||||
Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML source code and paste it to anywhere you want. All filters use the same HTML structure with different `filter-[filter-name]` classes.
|
||||
|
||||
|
||||
## Custom
|
||||
|
||||
You can custom Instagram.css by modifing SASS `.scss` files located in `src` folder.
|
||||
|
||||
## Browser support
|
||||
|
||||
Devices.css uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers. For best compatibility, these browsers are recommended:
|
||||
|
||||
- Chrome (18+)
|
||||
- Microsoft Edge (13+)
|
||||
- Firefox (35+)
|
||||
- Safari (6+)
|
||||
- Opera (15+)
|
||||
|
||||
Built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.
|
||||
|
||||
Devices.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) for the further development. ♥
|
||||
13
dist/instagram.css
vendored
13
dist/instagram.css
vendored
|
|
@ -4,19 +4,25 @@
|
|||
}
|
||||
|
||||
.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%;
|
||||
|
|
@ -29,23 +35,30 @@
|
|||
}
|
||||
|
||||
.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%;
|
||||
|
|
|
|||
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 */[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}
|
||||
/*! 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}
|
||||
|
|
@ -27,11 +27,6 @@
|
|||
"gulp-sass": "latest"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 4 Chrome versions",
|
||||
"Edge >= 12",
|
||||
"Firefox ESR",
|
||||
"last 4 Safari versions",
|
||||
"last 4 Opera versions",
|
||||
"Explorer >= 10"
|
||||
"> 0%"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue