Sunday, January 31, 2016

Video filters - image adjustments using CSS3 filters

CSS3 filters can be used on native HTML5 video objects as well as on images. 
I've recently created a little widget that opens an image adjustments menu on top
of the playing video (thank you Muli Dayan for your help with this one!).

The widget allows video image manipulations using these CSS3 filters:

  • Brightness
  • Contrast
  • Greyscale
  • Saturation
  • Hue-rotate
  • Sepia
Chrome and Safari except CSS filers by defining the "webkitFilter" property.
FireFox requires definition of the "filter" property.
IE is not supported as it lacks support for CSS3 filters.

Feel free to play with the demo and download the source code from Github.

No comments:

Post a Comment

About Me

My photo
I've been developing Internet and rich-media application for 15 years. In my work I emphasis usability and best user experience as well as sleek design. My main expertise are JavaScript, Flex and Flash.