Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azat-io/postcss-instagram
:camera: PostCSS plugin for using Instagram filters in CSS
https://github.com/azat-io/postcss-instagram
css instagram-filters postcss postcss-plugins
Last synced: 9 days ago
JSON representation
:camera: PostCSS plugin for using Instagram filters in CSS
- Host: GitHub
- URL: https://github.com/azat-io/postcss-instagram
- Owner: azat-io
- License: mit
- Created: 2015-09-20T15:02:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-06T20:33:15.000Z (almost 7 years ago)
- Last Synced: 2024-02-02T16:03:21.526Z (5 months ago)
- Topics: css, instagram-filters, postcss, postcss-plugins
- Language: JavaScript
- Homepage:
- Size: 1.08 MB
- Stars: 119
- Watchers: 8
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE-MIT
Lists
- awesome-github-star - postcss-instagram - io | 118 | (JavaScript)
README
# postcss-instagram
[][ci] [][npm] [][deps]
This is a PostCSS plugin for adding Instagram filters to your photos.
## Install
With [npm](https://npmjs.org/package/postcss-instagram) do:
```
npm install postcss-instagram --save
```
## Example
### Input
```html
```
```css
.boo {
filter: earlybird;
}
```
### Output
```css
.boo:after {
box-shadow:inset 0 0 3em #222;
position:absolute;
top:0;
right:0;
bottom:2px;
left:0;
z-index:1;
content:'';
}
.boo img{
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:sepia(0.4) saturate(1.8) contrast(1.1) brightness(0.9) hue-rotate(-20deg);
filter:sepia(0.4) saturate(1.8) contrast(1.1) brightness(0.9) hue-rotate(-20deg);
}
.boo {
position:relative;
display:inline-block;
}
```
### Filters
Here is a full list of plugin filters:
* 1977
* amaro
* brannan
* earlybird
* inkwell
* kalvin
* lo-fi
* nashville
* toaster
You can look filter examples [here](https://github.com/azat-io/postcss-instagram/blob/master/LIST.md).
## Contributing
Pull requests are welcome.
## License
MIT © [Azat S.](http://azat.io)
[ci]: https://travis-ci.org/azat-io/postcss-instagram
[deps]: https://gemnasium.com/azat-io/postcss-instagram
[npm]: http://badge.fury.io/js/postcss-instagram
[postcss]: https://github.com/postcss/postcss