Posted By

jntu_gnec on 08/27/11

Tagged

Versions (?)

Last Edited at 08/27/11 03:08am

Statistics

Viewed 516 times

Favorited by 0 user(s)

Related snippets

Clock Widget Pure CSS3

/ Published in: CSS

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

Highlighted TextExpand

<!DOCTYPE html>
<html>
	<head>
		<title>Clock Widget by www.Megawrz.com</title>
		<meta charset="utf-8">
		<style>
		#clock-widget {
			width: 347px;
			height: 143px;

background-color: #000;
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, #000),
				color-stop(0.75, rgba(0, 0, 0, 0.8))
			);
			background-image: -moz-linear-gradient(
				center bottom,
				rgb(0, 0, 0) 0%,
				rgba(0, 0, 0, 0.8) 75%
			);

border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-o-border-radius: 5px;

box-shadow: 0 0 10px #555;
			-webkit-box-shadow: 0 0 10px #555;
			-moz-box-shadow: 0 0 10px #555;
			-o-box-shadow: 0 0 10px #555;

font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
			font-weight: bold;
		}

#clock-widget .time {
			width: 228px;
			height: 116px;

float: left;
			margin: 13.5px;

background-color: #fff;
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(212, 212, 212)),
				color-stop(0.75, #fff)
			);
			background-color: -moz-linear-gradient(
				center bottom,
				rgb(212, 212, 212) 0%,
				#fff 75%
			);

border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-o-border-radius: 5px;

box-shadow: inset 0 0 7px #555;
			-webkit-box-shadow: inset 0 0 7px #555;
			-moz-box-shadow: inset 0 0 7px #555;
			-o-box-shadow: inset 0 0 7px #555;

text-shadow: 1px 1px 0 #fff;
			text-align: center;
			line-height: 116px;
			font-size: 5em;
		}

#clock-widget .date {
			height: 116px;
			padding: 13.5px;

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 2px 0 rgba(255, 255, 255, 0.15);
			text-align: center;
			line-height: 39px;

color: #fff;
		}

#clock-widget .dayofmonth {
			font-size: 4em;
		}
		</style>
	</head>
	<body>

function update_time() {
			date = new Date();
			clock_widget.getElementsByClassName('time')[0].innerHTML = date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
			clock_widget.getElementsByClassName('dayofweek')[0].innerHTML = days_week[date.getDay()];
			clock_widget.getElementsByClassName('dayofmonth')[0].innerHTML = date.getDate();
			clock_widget.getElementsByClassName('month')[0].innerHTML = months[date.getMonth()];
		}

setInterval(update_time, 1000);
		update_time();
		</script>
		<br>
		<h4> For more Widgets Visit : <a href="http://www.megawrz.com/">Soruce Site</a></h4>
	</body>
</html>

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.