Imprimer Envoyer 1 Réaction 69 Approbations 

Un iPhone entièrement en CSS3 sans image

Publié le 04 janvier 2012 , par Tanguy Andrillon - mis à jour le 04 janvier 2012 à 14h - dans Divers - Mots clés : iPhone

Le CSS3 permet de faire des prouesses visuels sur le web.

>> Retour à l'article <<

>> Comparateur de prix Mac, iPod & iPhone

Réactions


fofo_4012 - le 05/01/12 à 08:39
Mouais:
- 3395 lignes de CSS,
- 335 lignes de javascript,
- 14,7ko de code source sur la page principale, 126ko de css

c'est certes une belle démo technique de ce que peut faire CSS3, mais je pense que c'est tout ce qui ne faut pas faire :
- c'est lourd à traité par le navigateur,
- c'est finalement assez gros 150ko, un SVG ou PNG n'aurait-il pas été plus rapide à traiter ?
- c'est inmaintenable :
background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
Les commentaires sur ce document sont clos.
  • Tout
  • Hi-Tech
  • Matériel
  • Mac
  • Jeux

Les plus commentés

Derniers Tests

Tous les tests

Participez !