Morton 13 de julio de 2011 a las 08.25
   Imprimir artículo
elWebmaster.com

CSS3: Cómo crear un reloj al estilo HTC en tu sitio web


css3wide1Una de las razones por la que los tel√©fonos HTC son tan populares actualmente es por su dise√Īo pr√°ctico y elegante. Uno de sus elementos m√°s distintivos es, claramente, su widget de hora y clima. En este art√≠culo podr√°s ver c√≥mo crear un reloj con ese mismo dise√Īo, para poder lucirlo en tu sitio web.

Fuente original del artículo: Seth Stevenson Blog
Traducción realizada por
elWebmaster.com

Haz clic aquí para ver una demostración >>

Primero, el HTML:

  1. <div id="clock">
  2. <div id="time"><span id="hour">12</span> <span id="mins">00</span></div>
  3. <!-- hora -->
  4. <div id="weather">
  5. <div id="location">Des Moines
  6. Nublado</div>
  7. <img id="icon" src="img/sun-and-cloud.png" alt="Nublado" />
  8. <div id="temp">61&amp;grados;</div>
  9. <div id="high-low-temps">H: 63¬į
  10. L: 36¬į</div>
  11. </div>
  12. <!-- clima --></div>
  13. <!-- reloj -->

Luego, el CSS:

  1. #clock {
  2. background: rgba(0, 0, 0, 0.5);
  3. border-radius: 10px;
  4. font-family: Arial, Helvetica, sans-serif;
  5. height: 220px;
  6. margin: 0 auto;
  7. position: relative;
  8. width: 410px;
  9.  
  10. -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
  11. -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
  12. box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
  13. }

Usando RGBa configuramos el fondo a negro con 50% de transparencia.

M√°s CSS:

  1. #top-gradient {
  2. border-radius: 10px;
  3. border-top: 1px solid rgba(255, 255, 255, 0.7); /* 70% transparent white top border */
  4. height: 94px;
  5. position: absolute;
  6. left: 0;
  7. top: 0;
  8. width: 100%;
  9.  
  10. background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 100%); /* FF3.6+ */
  11. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0.1))); /* Chrome,Safari4+ */
  12. background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 100%); /* Chrome10+,Safari5.1+ */
  13. background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 100%); /* Opera11.10+ */
  14. background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 100%); /* IE10+ */
  15. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
  16. background: linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 100%); /* W3C */  }

Aquí usaremos Ultimate CSS Gradient Generator para crear un gradiente de blanco sólido a blanco sólido RGBa.  Una vez que ese código fue copiado, modificaremos su transparencia por cada línea empezando con 10% rgba(255,255,255,0.1) y finalizando con 50% de transparencia rgba(255,255,255,0.5).

Un poco m√°s de CSS:

  1. #hour, #mins {
  2. background: rgb(255,255,255); /* Old browsers */
  3. background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(223,223,223,1) 1%, rgba(212,212,212,1) 2%, rgba(239,239,239,1) 3%, rgba(205,205,205,1) 4%, rgba(239,239,239,1) 5%, rgba(205,205,205,1) 47%, rgba(190,190,190,1) 48%, rgba(250,250,250,1) 49%, rgba(194,194,194,1) 93%, rgba(206,206,206,1) 94%, rgba(223,223,223,1) 95%, rgba(202,202,202,1) 96%, rgba(232,232,232,1) 97%, rgba(208,208,208,1) 98%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  4. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(223,223,223,1)), color-stop(2%,rgba(212,212,212,1)), color-stop(3%,rgba(239,239,239,1)), color-stop(4%,rgba(205,205,205,1)), color-stop(5%,rgba(239,239,239,1)), color-stop(47%,rgba(205,205,205,1)), color-stop(48%,rgba(190,190,190,1)), color-stop(49%,rgba(250,250,250,1)), color-stop(93%,rgba(194,194,194,1)), color-stop(94%,rgba(206,206,206,1)), color-stop(95%,rgba(223,223,223,1)), color-stop(96%,rgba(202,202,202,1)), color-stop(97%,rgba(232,232,232,1)), color-stop(98%,rgba(208,208,208,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  5. background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,1) 1%,rgba(212,212,212,1) 2%,rgba(239,239,239,1) 3%,rgba(205,205,205,1) 4%,rgba(239,239,239,1) 5%,rgba(205,205,205,1) 47%,rgba(190,190,190,1) 48%,rgba(250,250,250,1) 49%,rgba(194,194,194,1) 93%,rgba(206,206,206,1) 94%,rgba(223,223,223,1) 95%,rgba(202,202,202,1) 96%,rgba(232,232,232,1) 97%,rgba(208,208,208,1) 98%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  6. background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,1) 1%,rgba(212,212,212,1) 2%,rgba(239,239,239,1) 3%,rgba(205,205,205,1) 4%,rgba(239,239,239,1) 5%,rgba(205,205,205,1) 47%,rgba(190,190,190,1) 48%,rgba(250,250,250,1) 49%,rgba(194,194,194,1) 93%,rgba(206,206,206,1) 94%,rgba(223,223,223,1) 95%,rgba(202,202,202,1) 96%,rgba(232,232,232,1) 97%,rgba(208,208,208,1) 98%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
  7. background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,1) 1%,rgba(212,212,212,1) 2%,rgba(239,239,239,1) 3%,rgba(205,205,205,1) 4%,rgba(239,239,239,1) 5%,rgba(205,205,205,1) 47%,rgba(190,190,190,1) 48%,rgba(250,250,250,1) 49%,rgba(194,194,194,1) 93%,rgba(206,206,206,1) 94%,rgba(223,223,223,1) 95%,rgba(202,202,202,1) 96%,rgba(232,232,232,1) 97%,rgba(208,208,208,1) 98%,rgba(255,255,255,1) 100%); /* IE10+ */
  8. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  9. background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,1) 1%,rgba(212,212,212,1) 2%,rgba(239,239,239,1) 3%,rgba(205,205,205,1) 4%,rgba(239,239,239,1) 5%,rgba(205,205,205,1) 47%,rgba(190,190,190,1) 48%,rgba(250,250,250,1) 49%,rgba(194,194,194,1) 93%,rgba(206,206,206,1) 94%,rgba(223,223,223,1) 95%,rgba(202,202,202,1) 96%,rgba(232,232,232,1) 97%,rgba(208,208,208,1) 98%,rgba(255,255,255,1) 100%); /* W3C */
  10.  
  11. border-radius: 10px;
  12. font-size: 120px;
  13. height: 150px;
  14. padding-top: 10px;
  15. text-shadow: #000 1px 1px 1px;
  16. text-align: center;
  17. width: 150px;
  18. -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
  19. -moz-box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
  20. box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
  21. }
  22. #hour {
  23. position: absolute;
  24. left: 36px;
  25. top: -15px;
  26. }
  27. #mins {
  28. position: absolute;
  29. right: 36px;
  30. top: -15px;
  31. }

…y el toque final de estilo. Aqu√≠ definiremos la posici√≥n del resto del texto que indicar√° lugar y temperatura as√≠ como definir √≠conos y fuente:

  1. #weather {
  2. color: #fff;
  3. text-shadow: 0 1px 2px rgba(0,0,0,0.75);  /* Give all text a slight shadow for readability */
  4. }
  5. #location {
  6. font-size: 16px;
  7. line-height: 22px;
  8. position: absolute;
  9. bottom: 15px;
  10. left: 15px;
  11. }
  12. #icon {
  13. position: absolute;
  14. bottom: -28px;
  15. left: 113px;
  16. }
  17. #temp {
  18. font-size: 34px;
  19. font-weight: normal;
  20. position: absolute;
  21. bottom: 12px;
  22. right: 60px;
  23. }
  24. #high-low-temps {
  25. position: absolute;
  26. bottom: 15px;
  27. right:  15px;
  28. }

Y eso es todo. ¬°Esperamos que te sea de utilidad!

Haz clic aquí para ver una demostración >>

Fuente original del artículo: Seth Stevenson Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Al dice:

    Acabo de ver la demostraci√≥n… queda igual! Utilic√© bastante tiempo un HTC y es verdad que una de las mejores cosas que tiene es el dise√Īo para mostrar la hora y clima. Es bueno ver que van surgiendo formas novedosas y aprovechar las ventajas de CSS 3.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder