HTML and CSS Reference
In-Depth Information
Figure 12-4.
An example of how a publisher can exclude page content around ad inventory
For more information on the exclusions specification, visit
http://dev.w3.org/csswg/css3-exclusions
or
CSS Shaders
This is where it gets really amazing with CSS! With, CSS shaders, you can finally bring true motion graphics to the
browser natively that leverage the machine's GPU. What does this mean? Well, for starters, you can now do rich
cinematic effects all while leveraging simple CSS declarations and vertex shaders. Vertex shaders are coordinates
given to the machine's GPU for processing graphic manipulations and shades, which is similar to the technology used
in popular 3D programs.
The reason you use a vertex shader (VS) is to transform the object you are targeting and manipulate it in 3D
space. With CSS shaders, you can soon control properties such as position, color, and texture on an object with really
creative and amazing results that you're used to seeing in true motion-graphics programs. Need to create a realistic
page-turning effect or a waving flag? Then you should be taking a look at what can be done with shaders! These new
features will create really amazing experiences in your web and advertising content, but keep in mind that these can
ask a lot of your machine, so be sure you're working with a higher-end graphics card when this working spec becomes
a reality, and as always, feature detect for the support and offer graceful degradation to users whose machines may
not be up to speed. The following code is an example of CSS shaders:
<style>
#someElement {
filter: custom(url(wave.vs), amount 0);
transition-property: filter;
}
#someElement:hover {
filter: custom(url(wave.vs), amount 1);
}
</style>
This example outlines the
filter
property and a
custom
URL to the
wave.vs
vertex shader. On hover, you simply
increase the wave amount to 1 from 0, so the effect transitions to that amount, thus creating an animation effect. CSS
shaders are getting rolled into the CSS filters specification for now and will even be implemented in IE 10.
