Clock Widget Pure CSS3


/ Published in: CSS
Save to your folder(s)

This is a CSS3 and JavaScript widget to show the current date and time


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Clock Widget by www.Megawrz.com</title>
  5. <meta charset="utf-8">
  6. <style>
  7. #clock-widget {
  8. width: 347px;
  9. height: 143px;
  10.  
  11. background-color: #000;
  12. background-image: -webkit-gradient(
  13. linear,
  14. left bottom,
  15. left top,
  16. color-stop(0, #000),
  17. color-stop(0.75, rgba(0, 0, 0, 0.8))
  18. );
  19. background-image: -moz-linear-gradient(
  20. center bottom,
  21. rgb(0, 0, 0) 0%,
  22. rgba(0, 0, 0, 0.8) 75%
  23. );
  24.  
  25. border-radius: 5px;
  26. -webkit-border-radius: 5px;
  27. -moz-border-radius: 5px;
  28. -o-border-radius: 5px;
  29.  
  30. box-shadow: 0 0 10px #555;
  31. -webkit-box-shadow: 0 0 10px #555;
  32. -moz-box-shadow: 0 0 10px #555;
  33. -o-box-shadow: 0 0 10px #555;
  34.  
  35. font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  36. font-weight: bold;
  37. }
  38.  
  39. #clock-widget .time {
  40. width: 228px;
  41. height: 116px;
  42.  
  43. float: left;
  44. margin: 13.5px;
  45.  
  46. background-color: #fff;
  47. background-image: -webkit-gradient(
  48. linear,
  49. left bottom,
  50. left top,
  51. color-stop(0, rgb(212, 212, 212)),
  52. color-stop(0.75, #fff)
  53. );
  54. background-color: -moz-linear-gradient(
  55. center bottom,
  56. rgb(212, 212, 212) 0%,
  57. #fff 75%
  58. );
  59.  
  60. border-radius: 5px;
  61. -webkit-border-radius: 5px;
  62. -moz-border-radius: 5px;
  63. -o-border-radius: 5px;
  64.  
  65. box-shadow: inset 0 0 7px #555;
  66. -webkit-box-shadow: inset 0 0 7px #555;
  67. -moz-box-shadow: inset 0 0 7px #555;
  68. -o-box-shadow: inset 0 0 7px #555;
  69.  
  70. text-shadow: 1px 1px 0 #fff;
  71. text-align: center;
  72. line-height: 116px;
  73. font-size: 5em;
  74. }
  75.  
  76. #clock-widget .date {
  77. height: 116px;
  78. padding: 13.5px;
  79.  
  80. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 2px 0 rgba(255, 255, 255, 0.15);
  81. text-align: center;
  82. line-height: 39px;
  83.  
  84. color: #fff;
  85. }
  86.  
  87. #clock-widget .dayofmonth {
  88. font-size: 4em;
  89. }
  90. </style>
  91. </head>
  92. <body>
  93.  
  94. <div id="clock-widget">
  95. <div class="time"></div>
  96. <div class="date">
  97. <div class="dayofweek"></div>
  98. <div class="dayofmonth"></div>
  99. <div class="month"></div>
  100. </div>
  101. </div>
  102.  
  103. <script>
  104. var date,
  105. days_week = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  106. months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  107. clock_widget = document.getElementById('clock-widget');
  108.  
  109. function update_time() {
  110. date = new Date();
  111. clock_widget.getElementsByClassName('time')[0].innerHTML = date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
  112. clock_widget.getElementsByClassName('dayofweek')[0].innerHTML = days_week[date.getDay()];
  113. clock_widget.getElementsByClassName('dayofmonth')[0].innerHTML = date.getDate();
  114. clock_widget.getElementsByClassName('month')[0].innerHTML = months[date.getMonth()];
  115. }
  116.  
  117. setInterval(update_time, 1000);
  118. update_time();
  119. </script>
  120. <br>
  121. <h4> For more Widgets Visit : <a href="http://www.megawrz.com/">Soruce Site</a></h4>
  122. </body>
  123. </html>

URL: http://www.megawrz.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.