Les transformations DirectX sous Internet Explorer (CSS Filter)
C'est relativement peut connu...
Et pourtant cela existe : les transformations DirectX sous Internet Explorer (5.5 ou plus).
Donnez un effet 3D à vos éléments HTML, faites-les faire des rotations, redimensionnez-les, déformez les, appliquez-leur un effet flou, rendez-les translucides en tout ou en partie, ... Bref, faites-en ce que vous voulez et plus encore !
(1) Cela ne nécessite rien sur l'ordinateur client si ce n'est une carte graphique compatible DirectX.
(2) Ces exemples n'utilisent que du CSS et du JavaScript.
Toute l'info dont vous avez besoin sur les filtres DirectX se trouve sur la MSDN: http://msdn2.microsoft.com/en-us/library/ms532847(VS.85).aspx
Quelques exemples intéressants
Radar de la marine
Transparence et effet brillant
Des transitions dignes de Power Point
Effets lumineux de type Flash/Silverlight
Un exemple de 3D avec le filtre "Matrix"
Matrix est un effet très peu connu (même parmi les connaisseurs des "Filtres DirectX") et pour cause, son utilisation s'avère très vite laborieuse. Sa puissance étonnera pourtant les développeurs web ! Grâce à lui, vous pouvez donner l'impression qu'une DIV, une IMG ou tout élément de votre choix est en rotation 3D dans la page !
Comment ? En effectuant une combinaison savante de filtres "Matrix" successifs, et en les ajustant tous les 25, 50, 100, ... millième de secondes.
Voir la page d'exemple : http://www.saint-boni.be/atelier/perso/Matrix%20Object.html
Et sur les navigateurs alternatifs ?
Aucun navigateur autre qu'IE ne gère les filtres DirectX, c'est quelque chose de tout à fait propriétaire à Microsoft. Mais existe-t-il des fonctions, si pas identiques, qui soit similaires à ce qu'Internet Explorer est capable de faire ?
Tous les navigateurs gèrent aujourd'hui la propriété CSS opacity, copie incomplète du filtre Alpha. Au dela de cette propriété, rien n'est implémenté par FireFox, ni par Opéra.
Du coté de Safari par contre...
Des intiatives intéressantes existent.
La propriété outline, quand elle est utilisée sans argument particulier, fonctionne un peu comme le filtre Glow d'IE.
La propriété -webkit-transform (implémenté dans Safari 4.0/3.5 et des les derniers builds de WebKit), est une implémentation de Matrix (une amélioration, même, car elle est plus simple à utiliser)
Affaire à suivre donc !
Conclusion
Les navigateurs alternatifs ont tôt fait de vanter leur supériorité CSS mais les transformations web sont et resteront un grand avantage d'Internet Explorer.
Dommage que cela ne soit pas assez mis en avant !
Fremy
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.
