All Projects β†’ azat-io β†’ Postcss Instagram

azat-io / Postcss Instagram

Licence: mit
πŸ“· PostCSS plugin for using Instagram filters in CSS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Postcss Instagram

postcss-if-media
A PostCSS plugin to inline or nest media queries within CSS rules & properties.
Stars: ✭ 35 (-68.47%)
Mutual labels:  postcss, postcss-plugins
Postcss Utilities
PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS
Stars: ✭ 293 (+163.96%)
Mutual labels:  postcss, postcss-plugins
laggard
Automatically generate CSS fallbacks for legacy browsers, built on PostCSS
Stars: ✭ 23 (-79.28%)
Mutual labels:  postcss, postcss-plugins
Postcss Font Family System Ui
PostCSS plugin to transform W3C CSS font-family: system-ui to a practical font-family list
Stars: ✭ 91 (-18.02%)
Mutual labels:  postcss, postcss-plugins
Postcss Plugins
The "officially unofficial" consolidated list of PostCSS plugins in a ready-to-use package
Stars: ✭ 107 (-3.6%)
Mutual labels:  postcss, postcss-plugins
Stylefmt
stylefmt is a tool that automatically formats stylesheets.
Stars: ✭ 2,123 (+1812.61%)
Mutual labels:  postcss, postcss-plugins
react-cli
基于 create-react-app ζ­ε»Ίηš„ε‰η«―θ„šζ‰‹ζžΆ
Stars: ✭ 18 (-83.78%)
Mutual labels:  postcss, postcss-plugins
Rucksack
A little bag of CSS superpowers, built on PostCSS
Stars: ✭ 1,861 (+1576.58%)
Mutual labels:  postcss, postcss-plugins
Stencil Postcss
Autoprefixer plugin for Stencil
Stars: ✭ 19 (-82.88%)
Mutual labels:  postcss, postcss-plugins
Postcss Start To End
PostCSS plugin that lets you control your layout (LTR or RTL) through logical rather than physical rules
Stars: ✭ 18 (-83.78%)
Mutual labels:  postcss, postcss-plugins
Postcss Aspect Ratio Mini
A PostCSS plugin to fix an element's dimensions to an aspect ratio
Stars: ✭ 123 (+10.81%)
Mutual labels:  postcss, postcss-plugins
Postcss At Rules Variables
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...
Stars: ✭ 52 (-53.15%)
Mutual labels:  postcss, postcss-plugins
postcss-gtk
Processes GTK+ CSS into browser CSS
Stars: ✭ 23 (-79.28%)
Mutual labels:  postcss, postcss-plugins
Postcss Cssnext
`postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
Stars: ✭ 5,388 (+4754.05%)
Mutual labels:  postcss, postcss-plugins
Postcss Selector Not
PostCSS plugin to transform :not() W3C CSS level 4 pseudo class to more compatible CSS (multiple css3 :not() selectors)
Stars: ✭ 49 (-55.86%)
Mutual labels:  postcss, postcss-plugins
Postcss High Contrast
Create high contrast version of your project with ease.
Stars: ✭ 108 (-2.7%)
Mutual labels:  postcss, postcss-plugins
Postcss Pxtorem
Convert pixel units to rem (root em) units using PostCSS
Stars: ✭ 1,592 (+1334.23%)
Mutual labels:  postcss
Postcss Less
PostCSS Syntax for parsing LESS
Stars: ✭ 93 (-16.22%)
Mutual labels:  postcss
Uncss
Remove unused styles from CSS
Stars: ✭ 9,170 (+8161.26%)
Mutual labels:  postcss
Elm Batteries
Learn how Elm, Parcel, Cypress and Netlify work together. Get started with Elm navigation, routes, remote data and decoder.
Stars: ✭ 108 (-2.7%)
Mutual labels:  postcss

postcss-instagram

Build Status NPM version Dependency Status

This is a PostCSS plugin for adding Instagram filters to your photos.

Install

With npm do:

npm install postcss-instagram --save

Example

Input

<div class="boo">
  <img src="..." alt="">
</div>
.boo {
  filter: earlybird;
}

Output

.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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.7572 0.30760000000000004 0.0756 0 0 0.1396 0.8744000000000001 0.06720000000000001 0 0 0.10880000000000001 0.2136 0.6524 0 0 0 0 0 1 0" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1.6296000000000002 -0.572 -0.0576 0 0 -0.17040000000000002 1.246 -0.0576 0 0 -0.17040000000000002 -0.572 1.7424000000000002 0 0 0 0 0 1 0" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.1" intercept="-0.050000000000000044" /><feFuncG type="linear" slope="1.1" intercept="-0.050000000000000044" /><feFuncB type="linear" slope="1.1" intercept="-0.050000000000000044" /></feComponentTransfer><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.9" /><feFuncG type="linear" slope="0.9" /><feFuncB type="linear" slope="0.9" /></feComponentTransfer></filter></svg>#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.

Contributing

Pull requests are welcome.

License

MIT Β© Azat S.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].