Un iPhone 4 réalisé avec CSS3 et JavaScript

10 février 2012

Voici l’idée d’un développeur ukrainien, TjRus, spécialisé dans les applications web : réaliser un iPhone 4 avec une simple feuille de style et le rendre interactif avec quelques lignes de JavaScript. Challenge relevé avec cette création « full » CSS3 plutôt réaliste.

Pas d’image, seulement du CSS !

Les sites utilisant HTML5 et CSS3 se font de plus en plus nombreux sur la toile et nous montrent à quel point ces futurs standards permettront d’enrichir les sites web d’ici quelques années. Certains développeurs, comme TjRus, nous montrent la force de cette technologie en réalisant de petites applications simples et intuitives.

Que ce soit l’iPhone 4 ou les icônes, tout est entièrement réalisé avec des propriétés CSS, soit 3395 lignes de code et aucune image ! Plusieurs propriétés CSS3 sont indispensables pour arriver à un tel résultat, notamment gradient (linear et radial), box-shadow, border-radius, transform (rotate, skew, scale, scaleX et scaleY) ou encore background-size. Voici un exemple d’utilisation :

transform: rotate(-36deg) skew(20deg);
-webkit-transform: rotate(-36deg) skew(20deg);
-moz-transform: rotate(-36deg) skew(20deg);
-o-transform: rotate(-36deg) skew(20deg);

Niveau interaction, il est possible d’utiliser les fonctions de base du téléphone : vous pouvez éteindre, allumer, verrouiller et déverrouiller le téléphone à l’aide de l’écran et des boutons, tout comme vous pouvez le faire sur le véritable produit d’Apple. Le rendu est optimisé pour les dernières versions des navigateurs Firefox, Chrome et Safari.

Requis : navigateur compatible CSS3
Compatibilité : Firefox, Chrome, Safari
Démonstration : http://tjrus.com/iphone
Licence : libre

Commentaires

  • Welcominh

    La qualité des icones est assez impressionnante.

  • Micka05

    Il est pas anglais, il est ukrainien (il vit a Kiev) :)

    • C’est corrigé. Merci :-)

      • Micka05

        Derien ;)

        Tu peux aussi rajouter que cet iPhone coûte 2000 Euros (Si, si, ce n’est pas une blague, il me l’as dit par email).