Efecto Smartphone con CSS

Efecto Smartphone con CSS

Para mi versión del juego de Tetris, intenté crear un contenedor que se asemeje a un smartphone, el resultado más o menos me dejo satisfecho (o.0!), así que en este tutorial enseñaré como hacerlo.

Resultado final: 



Tetris Processing




Descargar el ejemplo (sólo espere 5 seg y click en saltar publicidad)

Paso 1: Crearemos el borde de nuestro smartphone.

Utilizaremos esta herramienta Ultimate CSS Gradient Generator que genera el codigo CSS. Para utilizar la herramienta seleccionamos un color y graduamos como lo haríamos con cualquier editor de imágenes.  














El codigo que nos genera lo agregamos a la clase borde.

.borde{
 margin-left: auto;
 margin-right: auto; 
 border-radius:40px;
 box-shadow:0px 10px 30px #A2A2A2;
 border: 1px solid #666;
/*------- degradado diagonal -------*/
background: #959595; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #959595 0%, #ededed 24%, #2d2d2d 54%, #b2b2b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(24%,#ededed), color-stop(54%,#2d2d2d), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* IE10+ */
background: linear-gradient(135deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#b2b2b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Paso 2: Sigue el contenedor de nuestra pantalla.

.contenedor{
margin:5px;
border: 1px solid #444;
border-radius:28px;
margin-top:10px;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 38px;
/*--- degradado diagonal ---- */
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(135deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
     
Paso 3: Ahora nuestra pantalla touch screen. Esto es más sencillo.  

.pantalla{
  margin: 0px 15px 30px 15px;
  border: 0px solid #999;
  background: #000000;
}

Codigo de nuestro smartphone, podemos agregar al div pantalla, una imagen o como en el juego de tetris un objeto canvas.

<div class="borde"> 
 <div class="contenedor">
  <div class="caption"><p>Tetris Processing</p></div>
  <div class="pantalla" style="height: 496px; width: 310px;">
<!--   <img src="imagen.png" />  -->
  </div>
 </div>
</div> 
 
Descargar el ejemplo (sólo espere 5 seg y click en saltar publicidad)

0 comentarios:

Publicar un comentario