css3 come creare un iphone 5 tramite css

O inabili al maneggio dell'html: il coevo tutorial svilupperà (in scarificata guisa) i seguenti intenti:

creare un iPhone 5 utilizzando esclusivamente CSS3 e div absolute;
specifiche sulla compatibilità dei browsers.

Suggeriscovi scaricare lo .zip ➤ contenente i files allo integro.

demo | iPhone 5 nero
iphone 5

html

<div class="ip5-box">
<!-- pulsantini power, suoneria e volume -->
<div class="ip5-suoneria"></div>
<div class="ip5-volume-top"></div>
<div class="ip5-volume-bot"></div>
<div class="ip5-pulsa"></div>
<!-- contenitore di base e bordino grigio -->
<div class="ip5-base"></div>
<div class="ip5-bordo-grigio"></div>
<!-- effetti di luce sugli angoli -->
<div class="ip5-luce-top-sx"></div>
<div class="ip5-luce-top-dx"></div>
<div class="ip5-luce-bot-sx"></div>
<div class="ip5-luce-bot-dx"></div>
<!-- bordi scuri e contenitore mediano -->
<div class="ip5-bordo-nero"></div>
<div class="ip5-centro-grigio"></div>
<div class="ip5-centro"></div>
<!-- schermo con bordo -->
<div class="ip5-bordo-schermo"></div>
<div class="ip5-schermo">
<!-- fascia superiore contenente icone e orario -->
<div class="ip5-data">
<!-- icona della ricezione -->
<div class="ip5-barre">
<div class="ip5-barra-big">
<div class="ip5-barra-mini">
<div class="ip5-barra-big">
<div class="ip5-barra-mini">
<div class="ip5-barra-mini"></div>
</div>
</div>
</div>
</div>
</div>
<!-- orario -->
<div class="ip5-time">11:45 AM</div>
<!-- icona della batteria -->
<div class="ip5-batteria">
<div class="ip5-batteria-sx">
<div class="ip5-batteria-in"></div>
</div>
<div class="ip5-batteria-dx"></div>
<div class="clear"></div>
</div>
</div>
<!-- wallpaper -->
<div class="ip5-wallpaper"></div>
</div>
<!-- tacchette superiore ed inferiori della scocca -->
<div class="ip5-tacca-top-sx"></div>
<div class="ip5-tacca-top-dx"></div>
<div class="ip5-tacca-bot-sx"></div>
<div class="ip5-tacca-bot-dx"></div>
<!-- effetto lucido dello schermo -->
<div class="ip5-glossy"></div>
<!-- fotocamera -->
<div class="ip5-tondo">
<div class="ip5-tondo-in"></div>
</div>
<!-- griglia ottenuta tramite span di 1px -->
<div class="ip5-griglia">
<div class="ip5-griglia-in">
<div class="ip5-griglia-02">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
<div class="ip5-griglia-01">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
<div class="ip5-griglia-02">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!-- pulsante home ed effetto lucido al suo interno -->
<div class="ip5-home">
<div class="ip5-home-in">
<div class="ip5-curva"></div>
<div class="ip5-quadro"></div>
</div>
</div>
</div>

css

/* schermo lucido */
.ip5-glossy {
pointer-events: none;
}

La proprietà "pointer-events" consente di rendere i div sottostanti al contenitore integrante l'effetto "schermo lucido" clickabili (nell'evenienza intendiate inserire elementi linkabili all'interno del wallpaper).

specifiche & download del tutorial

Browsers in grado di visualizzare ammodo l'iPhone nigreo:

Chrome 10+
Safari 5.1+
Firefox 3.6+
Opera 11.10+ [proprietà "pointer-events" non supportata]
Internet Explorer 10+

scaricate lo .zip ➤ contenente i files allo integro.

demo ➤

commenti