Imprimer Envoyer 1 Réaction 68 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.

Le langage de mise en forme CSS3 (Cascading Style Sheets : feuilles de style en cascade) est très performant comme le montre le développeur de Tjrus. Il a réussi à modéliser un iPhone 4 avec son écran de verrouillage et son écran d'accueil sans utiliser une seule image. Tout le rendu visuel est généré par le code CSS3 qui représente tout de même 3395 lignes de code CSS et 335 lignes de JavaScript.

iphone4-CSS3

L'interactivité n'est pas le but de la démonstration même s'il est possible de déverrouiller l'écran, d'éteindre le téléphone et de le rallumer via le bouton d'accueil. L'intérêt est ici de démontrer que le CSS peut être utilisé afin de rendre des formes complexes à l'écran notamment pour la mise en page des sites Internet par exemple.

Vers un iPad à moins de 300 euros ?   Office 2010 sur iPad
>> Comparateur de prix Mac, iPod & iPhone

Dernières 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

Derniers Tests

Tous les tests

Les plus commentés

Participez !