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: 3 months 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 (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-06T20:33:15.000Z (over 7 years ago)
• Last Synced: 2024-06-20T13:16:19.624Z (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

Awesome Lists containing this project

• awesome-github-star - postcss-instagram - io | 118 | (JavaScript)

README

        
# postcss-instagram



[![Build Status](https://travis-ci.org/azat-io/postcss-instagram.svg?branch=master)][ci] [![NPM version](https://badge.fury.io/js/postcss-instagram.svg)][npm] [![Dependency Status](https://gemnasium.com/azat-io/postcss-instagram.svg)][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