Los íconos del iPhone recreados con sólo código CSS3

@ 26 . septiembre . 2011

íconos del iPhone con CSS3

El poder del CSS3: Hay que sacarse el sombrero ante la persona que ha recreado los íconos del iPhone usando únicamente divs y CSS3, ni una sola imagen. De hecho si le quitamos los estilos solo veremos esto:

280

Monday

7
z
+

×
=
73°

El HTML para el bloque de notas solo es este:

           <div class="notes icon">
                <div class="header"></div>
                <div class="paper">
                    <div class="paper-rip"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>

                    <div class="line-last"></div>
                    <div class="margin-lines"></div>
                </div>
            </div>

(y) Recomiendo que lo vean con Safari o con Chrome, puesto que sólo ha codificado con -webkit- y no así con funciones de -moz- (necesario para Firefox).

Disfrútenlo desde su página original: Graphicpeel.com/cssiosicons

Autor del post: DanielSemper: @aeromental + Facebook