keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
44,350,279,013 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
19 Responses
Pro
Dave Shea
If anyone thought this whole Processing kick I've been on lately doesn't have much to do with the web, here's a fun counter-argument. Coming soon.
(This is a screenshot of a Safari window, but it works fine in everything else that supports canvas.)
almost 2 years ago
Pro
Dave Shea
A tweet by Cameron Moll inspired this. Won't be able to do the CSS syntax, but it is working with simple classes at the moment, eg. <img class="filter filter-greyscale">
almost 2 years ago
If I were to use these filters (variety of them) on a photo gallery (20-30 thumbnails), what would the performance be like? Just curious.
almost 2 years ago
Pro
Dan Cederholm
Had always wondered if something like this was possible. Whoa!
almost 2 years ago
Pro
Ahmed Chergaoui
Oh!
almost 2 years ago
Pro
Scott Boms
Wow. I suppose I shouldn't be surprised but I am. And I can think of something that I'm working on that could use just such a thing...
almost 2 years ago
Pro
Dave Shea
@Erik - should be pretty damn fast. The processing happens up front, redrawing the page will be as instantaneous as if the canvas elements were images. In fact... hmm. They could just *be* images come to think of it. Canvas would be the shim that does the rendering, but it could ultimately dump the results back to an image. That would enable CSS background images too. Must try.
almost 2 years ago
Pro
Rogie
Whoa, totally rad! I want in!
almost 2 years ago
Pro
Tim Van Damme
Giddy just thinking about the possibilities...
almost 2 years ago
Oh sweet zombie jesus. Want!
almost 2 years ago
:-D
A cool way would be to:
1) grab all the imgs with class fx
2) create a sprite inside the canvas (check data-* attributes for list of desired fx'es)
3) replace the src of the image with a data-uri from the canvas
4) use css to make use of those in whatever states we need by adjusting background-position.
Looking forward to seeing a plug-n-play way of using this... :)
almost 2 years ago
Pro
Dave Shea
Good news! Despite a miserably hot day, I managed to make some good progress refactoring this so it applies nicely to the following two elements:
<img src="lighthouse.jpg" class="filter-blur">
<div class="filter-blur"></div>
(where the div has a background set with CSS)
More soon.
almost 2 years ago
Pro
Jeremy Anderson
Holy radness I was just thinking about something like this.
almost 2 years ago
Pro
Cameron Moll
Really excited to see where this goes, Dave. I'll have probably a couple opportunities to use the method as soon as it's available.
almost 2 years ago
This is something I've wanted for ages, so I'll be watching very closely. Nice work Dave.
almost 2 years ago
Pro
Trent Walton
Next... layer-blend:color-burn; ;)
almost 2 years ago
Pro
Tait Brown
I wish webkit would support SVG filters already, I was looking for something like this only the other day.
almost 2 years ago
Pro
Dave Shea
That "more soon" thing? That'd be today.
http://github.com/mezzoblue/PaintbrushJS
See the demo page with example usage:
http://mezzoblue.com/tests/canvas/lib/demo/
Just a starting point, there's a long way to go.
almost 2 years ago
Pro
Davin Risk
This is ridiculously awesome.
almost 2 years ago