Le logo Opera entièrement en CSS3

8 décembre 2010

Reproduire le logo du navigateur Opera en utilisant uniquement les propriétés de la technologie CSS3 : c’est le défi qu’a relevé David Desandro, webdesigner américain sans cesse à la recherche de nouvelles façons de concevoir le Web. Le résultat est tout simplement bluffant.

Les propriétés CSS3 utilisées

  • Border Radius permet d’arrondir les coins d’une bordure d’un élément HTML. Supportée par Opera 10.5+ (border-radius), Firefox 3.6+ (-moz), Chrome 5+ et Safari 4+ (-webtkit), c’est cette propriété qui donne les courbures du logo généré en CSS.
    -moz-border-radius: 220px/235px;
    -webkit-border-radius: 220px 235px;
    border-radius: 220px/235px;
    
  • Gradient permet de créer des dégradés de couleur sur un élément HTML. Seuls les navigateurs basés sur Gecko (Firefox) et Webkit (Safari, Chrome) sont en mesure de lire correctement cette propriété. Cependant, la syntaxe est légèrement différente entre les deux moteurs.
    background: #E71616;
    background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, 
        #800000 85%, #b80304);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A),
        color-stop(50%, #E71616), color-stop(80%, #800000), 
        color-stop(85%, #800000), to(#b80304) );
    
  • Box Shadow permet de générer une ombre portée sur n’importe quel élément HTML. Tout comme border radius, box shadow est compris par Opera 10.5+, Firefox 3.6+, Chrome 5+ et Safari 4+.
    -moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
    -webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
    box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
    

Des différences selon le navigateur

Comme vous pouvez le constater, le rendu n’est pas vraiment celui escompté sur les différentes versions d’Internet Explorer mais aussi, et de façon plus étonnante, sur Opera (qui ne supporte pas la propriété gradient). Un excellent travail cependant, qui mérite le coup d’œil et qui donne une idée de ce qu’on peut faire avec CSS3.

[Mars 2011] : Le logo est désormais compatible sur Firefox 3.6+, Safari 4+, Chrome 5+, et Opera 11.1+.

Requis : navigateur compatible CSS3
Démonstration : http://desandro.com/articles/opera-logo-css/
Licence : libre

Commentaires