Les CSS Custom Filtrers permettent d’avoir des filtres CSS personnalisés en plus des filtres CSS existants. Ces filtres personnalisés utilisent le langage OpenGL (utilisé par WebGL) et permettent de faire des effets CSS 3D vraiment bluffants. Quelques exemples d’utilisation.
Il est loin le temps où le CSS permettait surtout de gérer sa couleur de police et la couleur de fond du site. Le langage CSS a d’abord permis de positionner au mieux les éléments dans une page web et de se libérer de l’obligation d’utiliser systématiquement des tableaux HTML. Avec HTML5 (voir la présentation des API sur ce blog) et CSS3 (voir les nouveautés du CSS3 sur ce blog), on découvre presque chaque jour les possibilités énormes que va permettre ce langage dans l’avenir.
Les filtres CSS
CSS permet d’utiliser un certain nombre de filtres (blur, grayscale, contrast, brightness…), qui peuvent être utilisés ensuite dans des animations. Vous pouvez aller voir cette page de démonstration pour avoir une vue exhaustive des filtres, avec la syntaxe à utiliser.
Les CSS Custom Filters
Les CSS Custom Filters permettent d’ajouter une méthode custom à l’attribut CSS filter, comme suit :
#monStyle {
filter: custom(......);
}
Cette méthode custom() va pouvoir utiliser des Shaders écrits en OpenGL. Ces Shaders permettent de rendre des textures, de jouer avec la lumière, de jouer sur la réflexion et la réfraction… Ils sont utilisés dans des rendus 3D et en image de synthèse. On parler donc d’ici d’effets qui peuvent être de véritables effets cinématographiques.
Pour avoir des premiers aperçus de quelques effets utilisant les CSS Custom Filters, et pour avoir des exemples de syntaxe, je vous invite à aller voir ce tutoriel très complet chez Adobe, un autre très complet également chez Altered Qualia, ainsi que cette introduction sur HTML5Rocks.
