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 :
Publié 26 décembre 07 06:13 par FREMYCOMPANY

Commentaires

# Ashi4 said on décembre 26, 2007 19:09:

C'est une démonstration intéressante, mais malheureusement cela manque de possibilité de mise en place en réel sur un site internet compte tenu du faite que cela n'est fonctionnel que sur internet explorer. un jour peux être on aura un validation de la W3C sur un format ouvert et permettant de faire de tel effect. (ne pas oublier SVG au passage, qui permet je crois de faire cela depuis longtemps,  mais qui est resté assez inconnu du grand public)

# cyril said on décembre 26, 2007 20:41:

SVG n'est pas compatible IE et son concurrent serait plus VML ...

Je trouve les filtres directX pas forcément très utile. Le seul que j'utilise et l'opacité (normal) et de temps en temps celui qui rajoute un effet d'ombre, les autres sont que des gadgets de fin des années 90 (Web 0.5 ? ;))

De plus les filtres directX sont particulièrement couteux en CPU ...

# Ashi4 said on décembre 26, 2007 22:31:

de mémoire le plug in de abode marche sous IE pour svg. enfin j'ai testé ça il y a longtemps... IE7 n'existait pas en ce temps.

# FREMYCOMPANY said on décembre 26, 2007 22:49:

@ashi4 : Oui, c'est sûr. Mais rien n'empeche d'en utiliser certains pour agrémenter le GUI et de laisser tomber FF et companie (le site reste fonctionnel mais l'effet GUI est manquant, ce qui n'est pas grave en soit)

@cyril : En effet les filtres DirectX sont couteux en CPU, il faut bien le reconnaitre. Mais je ne suis pas d'accord avec toi pour dire qu'ils ne sont pas utiles. Certes l'effet 3D tient plus du gadget qu'autre chose (quoique cela puisse se révéler utile pour les jeux en lignes ASP/PHP + HTML/Javascript) mais de nombreux effets de transitions (pixelate, ...) sont d'un très bon effet, il me semble.

Ce genre d'effet, tu ne pourras jamais les réaliser sans DirectX, même avec un code JavaScript de 5000 lignes...

SVG/VML peut être une alternative, mais dans ce cas on sort du domaine de l'HTML, ce que je n'ai jamais vraiment aimé...

# FREMYCOMPANY said on décembre 26, 2007 23:00:

Concernant l'abandon de FF&co pour les effets GUI, on pourrait d'ailleurs aussi parler des tonnes de choses dont FF est capable et IE pas. Quand cela va dans ce sens-là, on ne doit pas hésiter non plus à utiliser la fonction quand même pour en faire bénéficier aux utilisateurs de FireFox (et tant pis pour ceux d'IE : pour eux on garde un mode "compatibilité); Alors, il me semble justifié de faire cela dans l'autre sens aussi (FF en "compatibilité" et IE bénéficiant de son avantage)...

Les commentaires anonymes sont désactivés

About FREMYCOMPANY

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.


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01




Search

Go

Ce blog

Abonnements