Un iPhone en CSS/xHTML et jQuery
Un iPhone en CSS/xHTML et jQuery
fév 04
Voici une création assez sublime pour mériter d’être partagée. En effet, voici un tutoriel permettant de créer un iPhone en xHTML/CSS avec des effets jQuery.
L’article original est disponible ci-dessos via CSS-Tricks.
Via
Avant de commencer je vous propose de voir une démo en ligne ou/et de télécharger directement le code source.
Demo en ligne
Télécharger les sources
En tout cas si le tutoriel vous intéresse vous pouvez le lire ici :
Lire sur CSS-Tricks en anglais
Lire en français (GTranslate)
Je pense que la grande image de l’iphone n’est pas necessaire, donc rien a voir, ce qui est interessant, c’est le principe…
Si on veut qu’une personne croit etre sur l’iphone, alors la coque image ne sert a rien, surtout si la personne utilise elle meme un iphone …
Oui en effet ce sont des images, néanmoins je trouve qu’il est bien fait. Le but n’étant pas de « dessiner » un iPhone, pour cela il nous faudrait utiliser un logiciel tel que PhotoShop, mais de permettre une navigation iPhone-like qui pourrait intéresser certains webmasters. Alors oui ce n’est pas compliqué, mais en même temps si ça l’était ça serait nettement moins intéressant…
De plus, avec un peu d’imagination on peut créer un site (ou une partie) entièrement avec ce code. Avec des liens internes qui utiliseraient le même code et faire un genre d’iPhone en ligne.
Aucun intérêt tu veux dire… :-/
Regarde vraiment la source de la page.
Il y a surtout une grosse image qui représente tout l’iphone http://demo.marcofolio.net/iphone/springboard/images/iphone-bg.png
Si tu as la webdeveloppeur toolbar sur ton firefox, va dans « Images »> »view images informations » et tu verras toutes les images utilisées.
Ensuite il suffit de coller les icones dedans et ça ce n’est pas bien dur