CSS Shaders: 3D effects for the web
Adobe, Apple and Opera jointly developed CSS Shaders specifications for generating high-quality video effects in the browser, and filters can be applied to any HTML element. They look familiar to anyone who applied effects in the Flash animation editor, or to those who know the
The CSS Shaders algorithm works like this: any HTML or SVG element is superimposed with a polygonal mesh (step 1), with which the vertex shader works, as in WebGL. The object can be transformed in three-dimensional space (step 2), after which it is rendered, that is, translated into raster graphics (step 3).
')
Some filters on the CSS Shaders demo seem to duplicate the functionality of WebGL. Not surprisingly, the CSS Shaders shaders are written in the same OpenGL Shading Language language as the WebGL shaders. However, the fundamental difference is that WebGL works only through
The CSS Shaders developers borrowed a lot from the SVG filter specifications ( Filter Effects 1.0 ). The main difference is that for the
Here’s what a typical Filter Effects 1.0 effect set looks like.
The code for this example is:
The beauty of Filter Effects is in the simplicity of syntax and CSS integration. But the possibilities of these filters are very limited, in the specifications there are only nine preset effects for the
The result of applying filters with such parameters is shown in the illustration.
And that's all, there are no other filters. CSS Shaders are a completely different matter. Thanks to
Agree, there is a difference.
Code:
Here are some examples of using CSS Shaders in plain HTML content.
The draft CSS Shaders submitted to the W3C consortium for consideration, how long the case will be delayed there is unknown. Now Adobe, Apple and Opera are trying to promote CSS Shaders code for inclusion in the WebKit engine. Until that happened, Adobe developers had to compile their own Chromium build to record a demo video.
For a detailed overview of CSS Shaders, as well as examples on writing shaders, see the Vincent Hardy article on the Adobe Developer Connection website.
PS Thus, Adobe continues to release technologies that will certainly bury Flash. This is done deliberately : everyone understands that the future is in HTML5, and the company has enough sense not to swim against the stream.
filter element from Filter Effects 1.0 for SVG. Here is the same, only much better.The CSS Shaders algorithm works like this: any HTML or SVG element is superimposed with a polygonal mesh (step 1), with which the vertex shader works, as in WebGL. The object can be transformed in three-dimensional space (step 2), after which it is rendered, that is, translated into raster graphics (step 3).
')
Some filters on the CSS Shaders demo seem to duplicate the functionality of WebGL. Not surprisingly, the CSS Shaders shaders are written in the same OpenGL Shading Language language as the WebGL shaders. However, the fundamental difference is that WebGL works only through
canvas and only with preset effects, but CSS Shaders are more versatile, because you can write your own filter, load it through a style sheet and apply it to any element on the page.The CSS Shaders developers borrowed a lot from the SVG filter specifications ( Filter Effects 1.0 ). The main difference is that for the
filter element they added a custom() function through which you can specify arbitrary effects properties. It would seem that a trifle allows you to create effects of a fundamentally higher level. This can be illustrated by the following example.Here’s what a typical Filter Effects 1.0 effect set looks like.
The code for this example is:
<html> <head> ... <style> #shaded { filter: grayscale(1); transition: filter ease-in 0.3s; } #shaded:hover { filter: grayscale(0); } </style> </head> <body> <div id="shaded"> <div id="multi-col"> <h2>The Creative Web</h2> <p>Lorem ipsum dolor ... </p> <img id="png-img" src="planes.jpg"/> <p>Mauris at ... </p> <img id="svg-img" src="picture.svg" /> <p>Morbi congue ....</p> <img id="css3-img" src="html5_css3_styling.svg" /> </div> </div> </body> </html> The beauty of Filter Effects is in the simplicity of syntax and CSS integration. But the possibilities of these filters are very limited, in the specifications there are only nine preset effects for the
filter :- blur (5, 5)
- drop-shadow (10, 5, 5)
- hue-rotate (328deg)
- saturate (5)
- invert (1)
- grayscale (1)
- opacity (0.5)
- gamma (1.1, 3.6, 0)
- sepia (0.5)
The result of applying filters with such parameters is shown in the illustration.
And that's all, there are no other filters. CSS Shaders are a completely different matter. Thanks to
custom() you can impose additional effects. For example, turning a picture from black and white into a color one is complemented by a slight inclination of the picture and the “wave” effect, when the color gradually fills the picture from bottom to top.Agree, there is a difference.
Code:
<html> <head> ... <style> #shaded { filter: custom(url('wobble.vs') /* wobble effect */ url('color-swipe.fs'), /* swipe effect */ 40 40, /* mesh lines/cols */ amplitude 60, /* wobble strength */ amount 0.0); /* effect amount */ transition: filter ease-in-out 2s; ...; } #shaded:hover { filter: custom(url('wobble.vs') url('color-swipe.fs'), 40 40, amplitude 60, amount 1.0); } </style> </head> <body> <div id="shaded"> <div id="multi-col"> <h2>The Creative Web</h2> <p>Lorem ipsum dolor ... </p> <img id="png-img" src="planes.jpg"/> <p>Mauris at ... </p> <img id="svg-img" src="picture.svg" /> <p>Morbi congue ....</p> <img id="css3-img" src="html5_css3_styling.svg" /> </div> </div> </body> </html> Here are some examples of using CSS Shaders in plain HTML content.
The draft CSS Shaders submitted to the W3C consortium for consideration, how long the case will be delayed there is unknown. Now Adobe, Apple and Opera are trying to promote CSS Shaders code for inclusion in the WebKit engine. Until that happened, Adobe developers had to compile their own Chromium build to record a demo video.
For a detailed overview of CSS Shaders, as well as examples on writing shaders, see the Vincent Hardy article on the Adobe Developer Connection website.
PS Thus, Adobe continues to release technologies that will certainly bury Flash. This is done deliberately : everyone understands that the future is in HTML5, and the company has enough sense not to swim against the stream.
Source: https://habr.com/ru/post/130366/
All Articles