{"id":5154,"date":"2011-10-11T12:41:53","date_gmt":"2011-10-11T19:41:53","guid":{"rendered":"http:\/\/blogs.adobe.com\/jnack\/?p=5154"},"modified":"2011-10-11T12:41:53","modified_gmt":"2011-10-11T19:41:53","slug":"css-shaders-hell-yeah","status":"publish","type":"post","link":"http:\/\/jnack.com\/blog\/2011\/10\/11\/css-shaders-hell-yeah\/","title":{"rendered":"CSS shaders: Hell yeah."},"content":{"rendered":"<p>&#8220;Flash&#8217;ll be dead soon,&#8221; I thought. &#8220;Web browsers will add animation support, plus live filters, and let me mix it all together on a page.&#8221;<\/p>\n<p>That was back in 1999.<\/p>\n<p>HTML animation is progressing, but it still lacks much of the richness that Flash Player can provide. So, what can we do about it?<\/p>\n<p>Adobe&#8217;s contributing technology &amp; expertise to enable <a href=\"http:\/\/www.adobe.com\/devnet\/html5\/articles\/css-shaders.html\">CSS shaders<\/a>.\u00a0CSS shaders &#8220;define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.&#8221; They work particularly well with CSS animations and CSS transitions, but they even work on video &amp; SVG animations. Check it out:<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.youtube.com\/embed\/NZRqnohI3m4\" width=\"425\" height=\"216\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>So, yeah: Adobe&#8217;s using Flash-derived technology to <strong>make HTML5 more competitive with Flash<\/strong>.<\/p>\n<p><em>Crazy<\/em>, right? Not at all: this increases your ability to present visually rich experiences, and that increases Adobe&#8217;s ability to sell you tools for creating those experiences. \u00a0The different playback technologies are just means to those ends.<\/p>\n<p>Adobe has collaborated with Apple &amp; Opera and has now <a href=\"https:\/\/dvcs.w3.org\/hg\/FXTF\/raw-file\/tip\/custom\/index.html\">submitted the spec to the W3C<\/a>. The code is <del datetime=\"2011-10-11T23:52:16+00:00\">checked into WebKit<\/del> under consideration for inclusion in WebKit, with this demo recorded using a build of Chromium. In addition Microsoft has added support for SVG filters in the IE10 platform preview. [Update: IE10 supports SVG filters, but it doesn&#8217;t support Filter Effects on HTML or CSS shaders.]\u00a0For details, sample code, etc., <a href=\"http:\/\/www.adobe.com\/devnet\/html5\/articles\/css-shaders.html\">check out this post from Vincent Hardy<\/a>.<\/p>\n<p>Exciting times.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Flash&#8217;ll be dead soon,&#8221; I thought. &#8220;Web browsers will add animation support, plus live filters, and let me mix it all together on a page.&#8221; That was back in 1999. HTML animation is progressing, but it still lacks much of the richness that Flash Player can provide. So, what can we do about it? Adobe&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[34],"tags":[],"_links":{"self":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/5154"}],"collection":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/comments?post=5154"}],"version-history":[{"count":0,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/5154\/revisions"}],"wp:attachment":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/media?parent=5154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/categories?post=5154"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/tags?post=5154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}