azat-io / Postcss Instagram
Licence: mit
π· PostCSS plugin for using Instagram filters in CSS
Stars: β 111
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
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
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].