CSS3: Cmo crear un reloj al estilo HTC en tu sitio web - elWebmaster.comhttp://www.elwebmaster.com/general/css3-como-crear-un-reloj-al-estil...

MORTON

13 DE JULIO DE 2011 A LAS 08.25

CSS3: Cmo crear un reloj al estilo HTC en tu sitio web

WIDGET, CSS3, RELOJ, ESTILO, HTC, CLIMA, CLOCK

Una de las razones por la que los telfonos HTC son tan populares actualmente es por su diseo prctico y elegante. Uno de sus elementos ms distintivos es, claramente, su widget de hora y clima. En este artculo podrs ver cmo crear un reloj con ese mismo diseo, para poder lucirlo en tu sitio web. Fuente original del artculo: Seth Stevenson Blog Traduccin realizada por elWebmaster.com Haz clic aqu para ver una demostracin >> Primero, el HTML: PLAIN TEXT
1. <div id="clock"> 3. <!-- hora --> 2. <div id="time"><span id="hour">12</span> <span id="mins">00</span></div> 4. <div id="weather"> 6. Nublado</div>

5. <div id="location">Des Moines 7. <img id="icon" src="img/sun-and-cloud.png" alt="Nublado" /> 8. <div id="temp">61&amp;grados;</div> 10. L: 36</div> 11. </div> 9. <div id="high-low-temps">H: 63

12. <!-- clima --></div> 13. <!-- reloj -->

Luego, el CSS: PLAIN TEXT

1. #clock { 2. background: rgba(0, 0, 0, 0.5); 3. border-radius: 10px; 5. height: 220px; 4. font-family: Arial, Helvetica, sans-serif; 6. margin: 0 auto;

7. position: relative;

1 de 4

19/07/2011 12:13 p.m.

CSS3: Cmo crear un reloj al estilo HTC en tu sitio web - elWebmaster.comhttp://www.elwebmaster.com/general/css3-como-crear-un-reloj-al-estil...

8. width: 410px; 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. } 9.

Usando RGBa configuramos el fondo a negro con 50% de transparencia. Ms CSS: PLAIN TEXT
1. #top-gradient { 2. border-radius: 10px; 4. height: 94px; 6. left: 0; 7. top: 0; 9.

3. border-top: 1px solid rgba(255, 255, 255, 0.7); /* 70% transparent white top border */ 5. position: absolute;

8. width: 100%; 10. background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255 12. background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255, 14. background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255, 15. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF' 16. background: linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,

11. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba 13. background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255

Aqu usaremos Ultimate CSS Gradient Generator para crear un gradiente de blanco slido a blanco slido RGBa. Una vez que ese cdigo fue copiado, modificaremos su transparencia por cada lnea empezando con 10% rgba(255,255,255,0.1) y finalizando con 50% de transparencia
rgba(255,255,255,0.5).

Un poco ms de CSS: PLAIN TEXT

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,

4. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba 5. background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223 6. background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223 8. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff' 10. 7. background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223 9. background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,1)

2 de 4

19/07/2011 12:13 p.m.

CSS3: Cmo crear un reloj al estilo HTC en tu sitio web - elWebmaster.comhttp://www.elwebmaster.com/general/css3-como-crear-un-reloj-al-estil...

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 posicin del resto del texto que indicar lugar y temperatura as como definir conos y fuente: PLAIN TEXT
1. #weather { 2. color: #fff; 4. }

3. text-shadow: 0 1px 2px rgba(0,0,0,0.75); 5. #location {

/* Give all text a slight shadow for readabilit

6. font-size: 16px;

7. line-height: 22px; 9. bottom: 15px;

8. position: absolute; 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;

3 de 4

19/07/2011 12:13 p.m.

CSS3: Cmo crear un reloj al estilo HTC en tu sitio web - elWebmaster.comhttp://www.elwebmaster.com/general/css3-como-crear-un-reloj-al-estil...

21. bottom: 12px; 22. right: 60px; 23. }

24. #high-low-temps { 26. bottom: 15px; 27. right: 28. } 15px;

25. position: absolute;

Y eso es todo. Esperamos que te sea de utilidad! Haz clic aqu para ver una demostracin >> Fuente original del artculo: Seth Stevenson Blog Traduccin realizada por elWebmaster.com

18

Me gusta

1.

Al dice:
Mircoles, 13 de Julio de 2011 a las 12.30

Acabo de ver la demostracin... queda igual! Utilic bastante tiempo un HTC y es verdad que una de las mejores cosas que tiene es el diseo para mostrar la hora y clima. Es bueno ver que van surgiendo formas novedosas y aprovechar las ventajas de CSS 3.

4 de 4

19/07/2011 12:13 p.m.