Skip to content

Instantly share code, notes, and snippets.

@tschmidt

tschmidt/CSS3_Clock.html

Created January 14, 2011 17:25
Show Gist options
  • Save tschmidt/779920 to your computer and use it in GitHub Desktop.
Save tschmidt/779920 to your computer and use it in GitHub Desktop.
Download ZIP
A clock made using CSS3 techniques and a little bit of JS
Raw
CSS3_Clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3 clock face</title>
<style type='text/css'>
* {
margin: 0;
padding: 0;
font-family: arial;
}
html { height: 100%; }
body {
background-color: #333;
text-align: center;
padding: 100px;
font-family: 'Helvetica Neue', Arial, sans-serif;
width: 900px;
margin: 0px auto;
}
ul, ul li {
list-style: none;
}
ul { position: relative; }
.number {
background-color: #141212;
background: -moz-linear-gradient(top, #141212 0%, #232323 50%, #0a0e0a 50%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #141212), color-stop(50%, #232323), color-stop(50%, #0a0e0a), color-stop(100%, #0a0809));
line-height: 395px;
color: #fff;
font-size: 293px;
font-weight: bold;
height: 400px;
width: 400px;
display: inline-block;
position: relative;
border: 1px solid #000;
border-bottom-color: #262626;
border-top: none;
margin: 0 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 10px 15px #000000;
-moz-box-shadow: 0px 10px 15px #000000;
-o-box-shadow: 0px 10px 15px #000000;
box-shadow: 0px 10px 15px #000000;
}
.number:after {
content: '';
height: 40px;
width: 402px;
margin: 0 auto;
display: block;
position: relative;
top: -32px;
border-bottom: 1px solid #262626;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 4px 0px #121212;
-moz-box-shadow: 0px 4px 0px #121212;
-o-box-shadow: 0px 4px 0px #121212;
box-shadow: 0px 4px 0px #121212;
}
.number:before {
content: '';
height: 40px;
width: 400px;
margin: 0px auto;
display: block;
position: absolute;
top: -2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px -2px 0px #080808;
-moz-box-shadow: 0px -2px 0px #080808;
-o-box-shadow: 0px -2px 0px #080808;
box-shadow: 0px -2px 0px #080808;
}
.number hr {
border-width: 3px 0;
border-color: rgba(0,0,0,.9) transparent rgba(87,87,87,.9) transparent;
position: absolute;
width: 100%;
top: 199px;
}
.seconds {
display: block;
position: absolute;
height: 400px;
width: 30px;
background-color: #222;
top: 4px;
left: 435px;
}
</style>
</head>
<body>
<ul>
<li id='hour' class='number'>11<hr/></li>
<li id='minutes' class='number'>30<hr/></li>
<li id='seconds' class='seconds'></li>
</ul>
<script>
var updateClock = function () {
var currentTime = new Date ();
var currentHours = currentTime.getHours ();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
var height = (currentSeconds / 60) * 100;
currentMinutes = ( currentMinutes < 10 ? '0' : '' ) + currentMinutes;
document.getElementById('hour').firstChild.nodeValue = currentHours;
document.getElementById('minutes').firstChild.nodeValue = currentMinutes;
document.getElementById('seconds').style.height = (height + '%');
}
updateClock();
setInterval('updateClock()', 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment