Other AngularJS demos

CSS3 image manipulation - angular - webapp

This is an example of how you can use Google AngularJS for building webapps.
The sliders are binded using only markup to values. It makes binding data two ways very easy!
Try dragging the sliders and see instant action and instant generation of CSS.
Hover over the image to see default rendering.
Updated 2012-08-24 - @netsi1964 - my blog
Remember to hover over the image to see an animated transformation from original to your manipulated image.


.Blur { -webkit-filter: blur({{Blur}}px); -moz-filter: blur({{Blur}}px); -ms-filter: blur({{Blur}}px); -o-filter: blur({{Blur}}px); filter: blur({{Blur}}px); } .Greyscale { -webkit-filter: grayscale({{Greyscale}}%); -moz-filter: grayscale({{Greyscale}}%); -o-filter: grayscale({{Greyscale}}%); -ms-filter: grayscale({{Greyscale}}%); filter: grayscale({{Greyscale}}%); } .Sepia { -webkit-filter: sepia({{Sepia}}%); -moz-filter: sepia({{Sepia}}%); -o-filter: sepia({{Sepia}}%); -ms-filter: sepia({{Sepia}}%); filter: sepia({{Sepia}}%); } .Brightness { -webkit-filter: brightness({{Brightness}}); -moz-filter: brightness({{Brightnesspia}}); -o-filter: brightness({{Brightness}}); -ms-filter: brightness({{Brightness}}); filter: brightness({{Brightness}}); } .Saturation { -webkit-filter: saturate({{Saturation}}%); -moz-filter: saturate({{Saturation}}%); -o-filter: saturate({{Saturation}}%); -ms-filter: saturate({{Saturation}}%); filter: saturate({{Saturation}}%); } .Contrast { -webkit-filter: contrast({{Contrast}}%); -moz-filter: contrast({{Contrast}}%); -o-filter: contrast({{Contrast}}%); -ms-filter: contrast({{Contrast}}%); filter: contrast({{Contrast}}%); } .HueRotate { -webkit-filter: hue-rotate({{HueRotate}}deg); -moz-filter: hue-rotate({{HueRotate}}deg); -o-filter: hue-rotate({{HueRotate}}deg); -ms-filter: hue-rotate({{HueRotate}}deg); filter: hue-rotate({{HueRotate}}deg); } .Invert { -webkit-filter: invert({{Invert}}%); -moz-filter: invert({{Invert}}%); -o-filter: invert({{Invert}}%); -ms-filter: invert({{Invert}}%); filter: invert({{Invert}}%); } .BorderRadius { border-radius: {{BorderRadius}}%; } .BoxShadow { -webkit-box-shadow: 0px 0px {{BoxShadow}}px rgba(0,0,0,.5); box-shadow: 0px 0px {{BoxShadow}}px rgba(0,0,0,.5); }