El smartphone de Cristalab en CSS3

| enero 17, 2012 |
Tags: , , , , , , , , , , , , , ,

En esta ocasión les enseñaré a hacer el diseño de un Smartphone estilo Cristalab, sin utilizar imágenes, sólo con código, gracias a CSS3.

El resultado será el siguiente:

88705 phone 1326589889 full550 El smartphone de Cristalab en CSS3

Primero haremos la estructura HTML5:

Código :

<!doctype html>
<html lang="es">
<head>
   <meta charset="utf-8">
   <title>Cristalab Phone</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
      <div id="buttons"></div>
   <div id="smartphone">
      <div id="earphone">
         <span class="zero"></span><span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span><span class="six"></span><span class="seven"></span><span class="eight"></span><span class="nine"></span><span class="ten"></span><span class="eleven"></span><span class="twelve"></span><span class="thirteen"></span><span class="fourteen"></span><span class="fifteen"></span><span class="sixteen"></span><span class="seventeen"></span><span class="eighteen"></span><span class="nineteen"></span><span class="twenty"></span><span class="twentyOne"></span><span class="twentyTwo"></span>
      </div>
      <div id="headset"></div>
      <div id="camera"></div>
      <h3>CRISTALAB PHONE</h3>
      <div id="screen">
         <div id="logo"><h2>CL</h2><br />
              <p>CRISTA<b>LAB</b></p></div>
         <div id="progress"></div>
      </div>
      <div id="button"></div>
   </div>
</body>
</html>

Posteriormente le daremos estilo con CSS3:

Código :

/* Etiquetas */


h2 {

   font-family: "Nasalization";

   font-size: ...

Continua leyendo desde la fuente



Related posts:
  1. Menú desplegable con HTML5 y CSS3 En este tutorial haremos un menu desplegable con HTML5 y...
    2. 

  2. Animación de nubes con CSS3 En este tutorial haremos una animación sencilla de nubes con...
    3. 

  3. Logo de Mejorando.la con CSS3 En este tutorial les enseñaré a hacer el logo de...
    4. 

  4. Crear un botón 3D con CSS3 En este tutorial vamos a aprender a crear un botón...
    5. 

  5. Formulario de contacto en HTML5 y CSS3 Hola a todos, espero que se encuentren muy bien. Vamos...
    6. 



Related posts brought to you by Yet Another Related Posts Plugin.
 


			
						

Este articulo no pertenece a Shft.Info 
 indexamos los artículos que se encuentran en otros sitios y los organizamos en este directorio de articulos.

Leave a Reply