Bleeding-Edge HTML5 - HTML5 Advertising - page 302

CSS Filters
The CSS shaders specification operates in conjunction with the CSS filters specification, which gives you the
remarkable ability to add Photoshop-like filters via straight CSS and create some amazing image composites and
effects. You can use filters such as blur, gray scale, drop-shadow (different than box-shadow), and sepia as well as
adjusting the hue, saturation, and level (HSL) and inverting an image's color space. In addition, you can adjust and
manipulate properties such as brightness, contrast, and saturation. Listing 12-3 outlines how this can be achieved in
CSS very easily.

Listing 12-3. CSS Filters Example

<style>
#someElement {
-webkit-filter: blur(10px);
-webkit-filter: grayscale(1);
-webkit-filter: drop-shadow(5px 5px 20px black);
-webkit-filter: sepia(1);
-webkit-filter: brightness(10);
-webkit-filter: contrast(10);
-webkit-filter: hue-rotate(360deg);
-webkit-filter: invert(1);
-webkit-filter: saturate(10);
-webkit-filter: opacity(1);
}
</style>

As you can see, you can combine filter effects to create a very unique arrangement for images and even add
animation on these effects. In this example, you're just manipulating every filter property, which would create an
image that is completely washed out because of the contrast and brightness settings on the max value. I suggest
playing around with each of these properties individually to get comfortable with how you can perform nondestructive
editing to your images right inside the browser. This is also really helpful in mobile advertising on iDevices since iOS6
and BlackBerry 10 are both supporting the CSS filters spec with a Webkit prefix, and support will be coming to other
browsers as well. Good examples of the CSS filters are located at http://html5-demos.appspot.com/static/css/
filters/index.html ; for more information on the CSS filters spec, visit http://dvcs.w3.org/hg/FXTF/raw-file/tip/
filters/index.html or get started working with filters using Adobe's new CSS FilterLab at http://html.adobe.com/
webstandards/csscustomfilters/cssfilterlab .

■ Filters are resource-intensive. Use them sparingly and only when necessary within your ad content, especially
when animating them. always perform feature detection because it's not fully adopted just yet as well.

Note

Matrix3D
As you're aware, CSS is getting a lot of new features in its level 3 and eventually level 4 specifications as formalized
by the W3C. One that I am most excited for is the Matrix3D property for elements. Using Matrix3D , it's possible to
completely distort an image in 3D space. With this in mind, you can create image manipulations and transitions over
the HTML5 video element to create believable composites with DOM elements seemingly embedded within the
video itself.