Plantilla de Smartphone con web incluida

Lo que veis aquí arriba no es una imagen, es un teléfono –un toque Iphone– realizado únicamente con HMTL y CSS3

Lo que he hecho es muy sencillo, consiste en poner un fondo con un degradado, encima un div que será la parte negra del teléfono. Dentro de este divo otro div con lo que será el contenido del teléfono.

Para los detalles he hecho dos circulos en la parte superior que serán la cámara y auricular y el circulo inferior que servirá de botón, un poco de sombras y listo.

HACIENDO UN TELEFONO CON ESTILOS CSS3 Y HTML. Ideal para mostrar una web o un boceto de app

En cuanto a los estilos para darle forma, muy facil, el “div carcasa” es un rectangulo con las puntas redondas, y el “div contenido” es otro rectangulo sencillo.

Dentro del “div contenido” he puesto un object, aunque puede ponerse un iframe o una imagen estática o lo que se te ocurra, el límite como siempre, es la imaginación..

MAKING OFF

See the Pen CSS3 Smartphone Template with object tag included by Ricardo Izquierdo (@riczurdo) on CodePen.

¿Te ha gustado este post?



Agradezco muchísimo tus comentarios