Comunidad de diseño web y desarrollo en internet online

El smartphone de Cristalab en CSS3

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:



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: 485%; 
   left: 26px; 
   position: absolute; 
   text-shadow: 3px 3px 1px #184f67;
   top: -28px; 
}
h2, p { 
   color: #ffffff; 
   position: absolute; 
   -webkit-transform: rotate(-45deg); 
   z-index: 10000; 
}
h3 { 
   color: #cccccc; 
   font-family: "League Gothic", Helvetica, Arial; 
   font-size: 120%; 
   font-weight: normal; 
   margin-left: 115px; 
   margin-top: 25px; 
   position: absolute; 
}
p { 
   font-family: "Microgramma"; 
   font-size: 80%; 
   left: 54px; 
   top: 79px; 
}
   span, span.one, span.two, span.three, span.four, span.five, span.six, span.seven, span.eight, span.nine, span.ten, span.eleven, span.twelve, span.thirteen, span.fourteen, span.fifteen, span.sixteen, span.seventeen, span.eighteen, span.nineteen, span.twenty, span.twentyOne, span.twentyTwo { 
   background-color: #111111; 
   border-radius: 2px; 
   height: 2px; 
   margin-top: 2px; 
   position: absolute; 
   width: 1px; 
} 
span { 
   margin-left: 3px; 
} 
span.one { 
   margin-left: 6px; 
} 
span.two { 
   margin-left: 9px; 
} 
span.three { 
   margin-left: 12px;
} 
span.four { 
   margin-left: 15px;
} 
span.five { 
   margin-left: 18px;
} 
span.six { 
   margin-left: 21px;
} 
span.seven { 
   margin-left: 24px;
} 
span.eight { 
   margin-left: 27px;
} 
span.nine { 
   margin-left: 30px;
}
span.eleven { 
   margin-left: 33px;
} 
span.twelve { 
   margin-left: 36px; 
} 
span.thirteen { 
   margin-left: 39px; 
} 
span.fourteen { 
   margin-left: 42px; 
} 
span.fifteen { 
   margin-left: 45px;
} 
span.sixteen { 
   margin-left: 48px;
} 
span.seventeen { 
   margin-left: 51px; 
} 
span.eighteen { 
   margin-left: 54px; 
} 
span.nineteen { 
   margin-left: 57px; 
} 
span.twenty { 
   margin-left: 60px;
} 
span.twentyOne { 
   margin-left: 63px;
}
span.twentyTwo { 
   margin-left: 66px; 
}

/* Divs ID's */

#buttons { 
   background: -webkit-linear-gradient(top, #d5d7da 0%,#fafafa 12%,#fafafa 88%,#d5d7da 100%); 
   box-shadow: 0 0 0 1px #a8a3a1; 
   border-radius: 2px 0 0 2px; 
   height: 126px; 
   margin-left: 33px; 
   margin-top: 90px; 
   position: absolute; 
   width: 2px; 
   z-index: 9999; 
}
#button { 
   background: -webkit-linear-gradient(top, #000000 0%,#07070d 100%); 
   box-shadow: 0 0 0 1px #a2a2a4, 
            0 0 0 2px #d5d7da, 
            0 0 0 3px #fafafa, 
            0 0 0 4px #a2a2a4; 
   border-radius: 5px; 
   height: 22px; 
   margin-left: 135px; 
   margin-top: 551px; 
   position: absolute; 
   width: 58px; 
}
#buttons:after { 
   background: -webkit-linear-gradient(top, #d5d7da 0%,#fafafa 12%,#fafafa 88%,#d5d7da 100%); 
   box-shadow: 0 0 0 1px #a8a3a1; 
   border-radius: 0 2px 2px 0; 
   content: ""; 
   height: 62px; 
   margin-left: 340px; 
   margin-top: 24px; 
   position: absolute; 
   width: 2px; 
   z-index: 9999; 
}
#camera { 
   background-color: #1d2228; 
   border-radius: 50%; 
   box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, 
            inset rgba(0,0,0,0.1) 1px 1px 2px, 
            inset rgba(255,255,255,0.07) -2px -2px 1px; 
   height: 10px; 
   margin-left: 262px; 
   margin-top: 10px; 
   overflow: hidden; 
   position: absolute; 
   width: 10px; 
   z-index: 9999; 
}
#camera:after { 
   background: -webkit-radial-gradient(35% 35%, ellipse closest-side, #131313, #000000 300%); 
   border-radius: 50%; 
   content: ""; 
   display: block; 
   height: 4px; 
   left: 3px; 
   position: absolute; 
   top: 3px; width: 4px;
}
#earphone { 
   background: -webkit-linear-gradient(top, #bbbbbb 0%, #aaaaaa 100%); 
   border-radius: 4px; 
   box-shadow: 0 0 0 1px #222222,  
   inset 0 1px 0 rgba(255,255,255,0.1); 
   height: 6px; margin-left: 129px; 
   margin-top: 10px; 
   position: absolute; 
   width: 70px; 
}
#headset { 
   background-color: #1d2228; 
   border-radius: 50%; 
   box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, 
            inset rgba(0,0,0,0.1) 1px 1px 2px, 
            inset rgba(255,255,255,0.07) -2px -2px 1px; 
   height: 4px; 
   margin-left: 238px; 
   margin-top: 13px; 
   overflow: hidden; 
   position: absolute; 
   width: 4px; 
   z-index: 9999; 
}
#logo { 
   background: -webkit-linear-gradient(top, transparent 0%, transparent 12%, #b3b3b3 12%, #b3b3b3 88%, transparent 88%, transparent 100%); 
   border-radius: 50%; 
   height: 160px; 
   position: absolute; 
   margin-left: 70px; 
   margin-top: 100px; -webkit-transform: rotate(45deg);
   width: 160px; 
}
#logo:after { 
   background-color: #1e6381; 
   border-radius: 50%; 
   box-shadow: 0 0 0 4px #ffffff, 
            0 0 0 7px #b3b3b3; 
   content: ""; 
   height: 130px; 
   left: 15px; 
   position: 
   absolute; 
   top: 15px; 
   width: 130px;
}
#progress { 
   background-color: #111111; 
   border-radius: 4px; 
   box-shadow: 0 1px 5px rgba(0,0,0,0.8) inset, 
            0 1px 0 #444444; 
   height: 26px; 
   margin-left: 51px; 
   margin-top: 294px; 
   position: absolute; 
   width: 196px;
   z-index: 9998; 
}
#progress:after { 
   background: -webkit-linear-gradient(top, #1e6381 0%, #184d64 100%); 
   border-radius: 3px; 
   content: ""; 
   height: 20px; 
   left: 3px; 
   position: absolute; 
   top: 3px; 
   width: 120px;
}
#smartphone { 
   background-color: #000000; 
   border-radius: 35px; 
   box-shadow: 0 0 0 1px #a2a2a4, 
            0 0 0 2px #d5d7da, 
            0 0 0 3px #fafafa, 
            0 0 0 4px #d5d7da, 
            0 0 0 5px #a8a3a1, 
            14px 14px 40px rgba(0,0,0,0.16), 
            -14px -3px 40px rgba(0,0,0,0.16); 
   height: 588px; 
   margin: 40px; 
   width: 328px; 
   z-index: -1; 
}
#smartphone:after { 
   background: -webkit-linear-gradient(-199deg, rgba(255,255,255,0) 65%, rgba(255,255,255,0.04) 65%, rgba(255,255,255,0.08) 100%); 
   border-radius: 35px; 
   content: ""; 
   height: 588px; 
   position: absolute; 
   overflow: hidden; 
   width: 328px; 
   z-index: 9999999; 
}
#screen { 
   background: -webkit-linear-gradient(top, #202020 0%, #383838 100%); 
   height: 480px ; 
   margin-left: 13px; 
   margin-top: 56px; 
   position: absolute; 
   width: 302px;
}



El código CSS3 es un poquito largo como para explicarlo parte por parte, pero al modificarlo se darán cuenta de cada uno de sus elementos.

Sólo nos quedaría agregar el @font-face:

Código :

@font-face { 
   font-family: "Nasalization"; 
   src: url("nasalization-webfont.eot"); 
   src: url("nasalization-webfont.eot?#iefix") format("embedded-opentype"), 
   url("nasalization-webfont.woff") format("wof"), 
   url("nasalization-webfont.ttf") format("truetype"), 
   url("nasalization-webfont.svg#NasalizationFreeRegular") format("svg"); 
   font-weight: normal; 
   font-style: normal; 
}
@font-face { 
   font-family: "Microgramma"; 
   src: url("microgramma-webfont.eot"); 
   src: url("microgramma-webfont.eot?#iefix") format("embedded-opentype"), 
   url("microgramma-webfont.woff") format("woff"), 
   url("microgramma-webfont.ttf") format("truetype"), 
   url("microgramma-webfont.svg#TurkishMicrogrammaRegular") 
   format("svg"); 
   font-weight: normal; 
   font-style: normal; 
} 
@font-face {
   font-family: "League Gothic"; src: url("league-webfont.eot"); 
   src: url("league-webfont.eot?#iefix") format("embedded-opentype"), 
   url("league-webfont.woff") format("woff"), 
   url("league-webfont.ttf") format("truetype"), 
   url("league-webfont.svg#LeagueGothicRegular") format("svg"); 
   font-weight: normal; 
   font-style: normal; 
}



Las tipografías son "League Gothic", "Microgramma", "Nasalization".

Podemos ver el demo aquí. (Funciona solamente en Chrome y Safari)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate