Le logo HTML5 entièrement en CSS3

20 février 2011

Après les logos d’Opera et d’Internet Explorer, c’est au tour de HTML5 d’avoir son « blason » reproduit uniquement avec des propriétés CSS. Moins impressionnant que les deux cités précédemment, mais tout aussi intéressant !

Un logo uniquement en CSS

Les deux propriétés CSS3 utilisées sont Opacity et Transform :

Opacity permet d’appliquer un degré d’opacité sur un élément HTML. Son opacité s’applique également sur ses enfants. Cette propriété fonctionne sur Chrome, Safari 4+, Opera 10+, Firefox 3+ et Internet Explorer 9. Elle peut également fonctionner sur IE6, IE7, et IE8 grâce à l’emploi d’un filtre propriétaire mais ça n’est pas le cas ici.

Transform, comme son nom l’indique, permet d’appliquer des transformations de toute sorte sur un élément HTML : rotation, inclinaison, zoom, déformation, ou encore translation. Ces transformations 2D sont compatibles uniquement avec les dernières versions des principaux navigateurs du marché.

  • Rotate permet d’appliquer une rotation sur un élément HTML.
    transform: rotate(-28deg);
    -ms-transform: rotate(-28deg);
    -moz-transform: rotate(-28deg);
    -webkit-transform: rotate(-28deg);
    -o-transform: rotate(-28deg);
    
  • Skew permet d’appliquer une inclinaison sur un élément HTML.
    transform: skew(5deg);
    -ms-transform: skew(5deg);
    -moz-transform: skew(5deg);
    -webkit-transform: skew(5deg);
    -o-transform: skew(5deg);
    
  • Scale permet d’appliquer une déformation sur un élément HTML.
    transform: scale(0.85);	
    -ms-transform: scale(0.85);	
    -moz-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -o-transform: scale(0.85);
    

Le résultat est fidèle au logo officiel HTML5 et compatible avec les dernières versions des navigateurs Firefox, Opera, Chrome, Safari et Internet Explorer 9.

Requis : navigateur compatible CSS3
Démonstration : http://www.red-team-design.com/wp-content/uploads/2011/01/html5-css3-logo-updated.html
Licence : libre

Commentaires