Salta al contingut principal

El smartphone de Cristalab en CSS3

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)

Enviar comentario



Comentaris

Publica un comentari a l'entrada

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  
Publica un comentari a l'entrada
Més informació

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows]

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows] : El actual “cuello de botella” en nuestras PCs; es decir, donde todo el rendimiento de nuestra PC llega a estancarse , es en el Disco Duro. Si bien los procesadores han evolucionado considerablemente en velocidad / rendimiento, el RAM no sólo es más económico, sino más veloz, y las tarjetas de video siguen innovando con cada generación, los discos duros han permanecido idénticos desde hace años, limitados por la física. Y es que un disco duro tradicional sólo tiene un máximo de velocidad con el que puede girar (medido en revoluciones por minuto, o RPM) que, a su vez, limita la velocidad de lectura y escritura. En pocas palabras, a pesar de que nuestras PCs pueden procesar información mucho más rápido que hace 5 años, los discos duros siguen leyendo (y escribiendo) esta información prácticamente a la misma velocidad. Esto ha cambiado con la llegada de los SSD, los Discos de Estado Sólo que no están limitados por la velo...
Publica un comentari a l'entrada
Més informació

El meu editor de codi preferit el 2024, que això ja se sap que va canviant 😄

Visual Code Visual Code és un editor de codi font lleuger, però potent que s’executa al teu escriptori i està disponible per a Windows, macOS i Linux. Compta amb suport integrat per a JavaScript, TypeScript i Node.js i té un ric ecosistema d’extensions per a altres llenguatges i entorns d’execució (com C++, C#, Java, Python, PHP, Go, .NET).  És una eina ideal per a desenvolupar i depurar aplicacions web i en el núvol. Per què Visual Code? Visual Code té molts avantatges com a editor de codi font, com per exemple: És gratuït, ràpid i fàcil d’instal·lar i actualitzar. Té un ampli ecosistema d’extensions que et permeten afegir funcionalitats i personalitzar la teva experiència de desenvolupament. Té un suport integrat per a molts llenguatges i entorns d’execució, i et permet depurar i executar el teu codi des del mateix editor. Té una interfície senzilla i elegant, amb diferents temes i modes de visualització. Té un sistema de sincronització de configuracions que et permet guardar les...
Publica un comentari a l'entrada
Més informació