TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

It's possible to have such filters with Firefox as well if you use {filter:url(#svgFilter)} (see https://developer.mozilla.org/en-US/docs/CSS/filter). But I have to admit it's not as simple as webkit does.

An example: http://jsbin.com/ekekug/2 (only Firefox, and I didn't reproduce OP's tilt-shift effect)

Also, I'm wondering if it's not better to use Canvas for performance reasons.

Why do you need jQuery ? Can't you use the :hover pseudo-class, along with CSS3 opacity transition on the mask ?

Can you make it show on mouseover/not mouseover - I can't tell if it works or not (tested in chromium)

Like other post-processed tilt shift effects, this will look best when objects are very short when measured perpendicular to the blur. If you have an object that spans most of the frame and crosses the blur then you will have parts of the shot which are at the same focal length but have different blurs which will give away the effect.

These examples were well chose to avoid this issue. The Empire State Building actually has the blur running vertically which is why you don't see it there. And the airplane is a great example because the front of the plane and the jetway are in a plane and the falloff was well chosen to start just above the top of the jetway.

Nice one! Works just fine in Safari6 as well.

Nice effect!

These kind of effects always seem kind of pointless at first, until a company like Instagram comes around and almost defines their whole product around them (same with Pinterest and the Masonry layout). I'm sure very cool things will come out of the new CSS blur features too.

works on Chrome on my Mac but not on my Linux VM.

Blur is a digital or postprocessing technique for miniature faking.

Tilt is a lens technique for miniature faking.

Shift is not related to miniature faking.

It is bizarre to name one faking technique after a different one, instead of after the end effect you are faking.