Une télévision avec du pure CSS3

1 août 2011

Pas d’image, uniquement du HTML et du CSS ! C’est Will Phillips, un webdesigner américain, qui nous présente une télévision générée via une simple feuille de style. Une création originale qui mérite d’être vue !

Uniquement du code

Une télévision en pure CSS, génial ! Mais ça sert à quoi ? Et bien à pas grand chose. Ceci dit, ce n’est pas l’objectif de l’auteur. Il s’agit d’abord d’un travail qui montre que l’on peut être créatif avec du code, sans passer par un logiciel de retouche d’image, et ainsi qui appuie une fois de plus sur les capacités de CSS3. Si cette technologie n’est toujours pas finalisée, elle vient lentement bousculer certaines habitudes des intégrateurs d’aujourd’hui. Fini les bordures arrondies ou les ombres avec un montage d’images. Pourquoi utiliser des images quand on peut sans passer avec quelques lignes de code ? Simplement parce que CSS3 n’est pas compatible avec tous les navigateurs, notamment Internet Explorer 6-7-8.

Les propriétés CSS3 utilisées

Pour arriver à ce résultat, il faut une structure HTML adéquate pour imbriquer correctement les « div ». Puis c’est la feuille de style qui va faire le reste. On retrouve les propriétés CSS3 suivantes :

  • Gradient pour créer des dégradés de couleur sur un élément HTML.
  • Border Radius pour arrondir les coins d’une bordure d’un élément HTML.
  • Box Shadow pour générer une ombre portée sur un élément HTML.
  • Rotate pour appliquer une rotation sur un élément HTML.
  • Translate pour appliquer une translation sur un élément HTML.
  • Mask pour appliquer un masque sur le background d’un élément HTML (uniquement avec Webkit) :
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(180,180,180,0.2)), color-stop(0.5, rgba(150,150,150,1)), color-stop(0.5, rgba(102,102,102,1)), color-stop(0.51, rgba(120,120,120,0.5)));
    

Et ça marche partout pareil ?

Sans surprise, la télévision est compatible seulement avec les navigateurs qui utilisent les moteurs Webkit (Chrome 7+, Safari 5+) et Mozilla (Firefox 3.6+). Elle ne fonctionne pas à 100% sur Opera 11 qui supporte la propriété CSS3 gradient uniquement depuis la version 11.10 (« -o-gradient »). Il n’y a aucun support pour Internet Explorer. Cependant, vous pourrez toujours vous amuser sur les navigateurs récents qui génèrent correctement cette télévision pour y présenter des vidéos YouTube par exemple.

Requis : navigateur compatible CSS3
Démonstration : http://www.sleekdesignstudio.com/labs/css3tv
Licence : libre

Commentaires

  • Alors honoré d’être en vedette ici, sur votre blog! Je vous remercie beaucoup. Espérons que d’autres apprécient cette démo que j’ai créé et apprendre de lui. (à partir de Google Translate)

    • Anonyme

      Great job Will ! Keep working and tell me when you do something new like this.

  • Simo19922

    oO sans commentaire !
    Juste,  » un grand bravo  » à celui qui l’a réalisé