Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/spite/css-filters-devtools-extension

CSS Filters DevTools Extension
https://github.com/spite/css-filters-devtools-extension

Last synced: 21 days ago
JSON representation

CSS Filters DevTools Extension

Host: GitHub
URL: https://github.com/spite/css-filters-devtools-extension
Owner: spite
License: mit
Created: 2015-12-15T02:00:03.000Z (almost 9 years ago)
Default Branch: master
Last Pushed: 2016-02-23T16:31:46.000Z (over 8 years ago)
Last Synced: 2024-10-04T13:13:16.492Z (about 1 month ago)
Language: JavaScript
Size: 2.97 MB
Stars: 21
Watchers: 4
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # css-filters-devtools-extension

CSS Filters DevTools Extension

![](https://raw.githubusercontent.com/spite/css-filters-devtools-extension/master/about/demo.gif)

An extension for Chrome DevTools that adds a sidebar to the Elements panel to easily edit and arrange CSS Filters.

#### How to install ####

[![npm](https://raw.githubusercontent.com/spite/css-filters-devtools-extension/master/about/ChromeWebStore_Badge_v2_496x150.png)](https://chrome.google.com/webstore/detail/jeidmdcnbpcnjmmeelolmhldaboickfn)

[Install the extension from the Chrome Store](https://chrome.google.com/webstore/detail/jeidmdcnbpcnjmmeelolmhldaboickfn)

#### Features ####

Supported filters:

- Blur

- Grayscale

- Brightness

- Contrast

- Sepia

- Saturation

- HueRotate

- Invert

- Opacity

- DropShadow

- Url

Add and remove

Edit with sliders and input boxes

Drag and drop to arrange the filter stack

#### TO DO ####

Improve color selector in ``drop-shadow``

#### Credits ####

Inspired on [Firefox's DevTools CSS filters editor](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters)

Drag and drop sort by [Sortable](http://rubaxa.github.io/Sortable/)

RegExp foo developed with [regular expressions 101](https://regex101.com/)

[MDN CSS Filter](https://developer.mozilla.org/en/docs/Web/CSS/filter)

[Understanding CSS Filter Effects (HTML5Rocks)](http://www.html5rocks.com/en/tutorials/filters/understanding-css/)

Tested in the amazing [CSSGram](http://una.im/CSSgram/)

#### License ####

MIT licensed

Copyright (C) 2015 Jaume Sanchez Elias [@thespite](https://twitter.com/thespite), [clicktorelease.com](https://www.clicktorelease.com)