Le logo d’Internet Explorer en CSS3

16 janvier 2011

Après le navigateur Opera, c’est au tour d’Internet Explorer d’avoir son logo reproduit entièrement avec des propriétés CSS, notamment CSS3. C’est Andreas Jacob, un webdesigner allemand qui s’est inspiré du travail de David Desandro pour réaliser le logo du navigateur de Microsoft et le résultat mérite le coup d’œil.

Les propriétés CSS3 utilisées

Les trois propriétés suivantes sont supportées par Opera 10.5+, Firefox 3.6+, Chrome 5+ et Safari 4+. Chaque navigateur utilise sa syntaxe : -moz pour Firefox, -webkit pour Chrome/Safari, et -o ou sans préfixe pour Opera.

  • Border Radius permet d’arrondir les coins d’une bordure d’un élément HTML.
  • Box Shadow permet de générer une ombre portée sur n’importe quel élément HTML.
  • Transformation permet d’appliquer des transformations sur un élément HTML : rotation, décalage, zoom, déformation, ou encore perspective.

Ces deux propriétés sont supportées uniquement par les navigateurs qui utilisent les moteurs Gecko (Firefox 3.6+) et Webkit (Safari 4+, Chrome 5+).

  • Gradient permet de créer des dégradés de couleur sur un élément HTML.
  • Border Colors permet d’utiliser plusieurs couleurs sur la bordure d’un élément HTML, soit au maximum x couleurs pour x pixels.

Des différences selon le navigateur

Comme vous pouvez le constater, le rendu sur Opera semble être identique à celui sur Internet Explorer. En fait, seules les propriétés des navigateurs basés sur les moteurs Gecko (Firefox) et Webkit (Safari, Chrome) ont été utilisées par Andreas Jacob. Opera utilise le moteur Presto. En ajoutant les propriétés sans leur préfixe, on obtient le résultat suivant :

On distingue l’absence des dégradés de couleur car Opera 10.5 ne supporte pas la propriété gradient. A noter qu’il faut remplacer le background gradient par un simple background avec couleur unie pour éviter que l’élément ne soit transparent. Quant au problème de Chrome 5 qui n’affiche pas la même chose que Safari, il semblerait que cela vienne d’un bug dans la version du moteur Webkit.

Requis : navigateur compatible CSS3
Démonstration : http://cordobo.com/wp-content/uploads/ie-pure-css-logo/
Licence : libre

Commentaires

  • Ca marche parfaitement sur Chrome 14-dev.

    • Anonyme

      Le bug affectait la version 5 de Chrome. Je ne sais pas si c’est le cas pour les versions plus récentes.