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

  • Alejandro

    El creador de los iconos del iPhone es un dios, y fuera de eso, vaya cambio al logo de Aeromental (n) hasta donde yo se en los últimos años al menos el logo de Aeromental es conocido por ser de color blanco, rojo o azul, ¿pero naranja?, ósea es innovador y no digo que es un mal cambio pero te quita la idea de “Aeromental” me costara asimilar eso pero de todos formas gran cambio (y)

    :cerealguy:

  • ugn2010

    OMLJ!!! Ese tipo si que tenia tiempo libre para hacer todo ese chorizo de codigo, solo para mostrarnos unos iconos perfectamente hechos…