Advanced Search

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

Expand | Embed | Plain Text

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.