Skip to content

Instantly share code, notes, and snippets.

@mnafricano

mnafricano/index.html

Created October 18, 2012 14:33
Show Gist options
  • Save mnafricano/3912259 to your computer and use it in GitHub Desktop.
Save mnafricano/3912259 to your computer and use it in GitHub Desktop.
Download ZIP
The digits are all done in pure CSS (linear-gradient + multiply backgrounds) Hope you like it. Using JS only to make it show the correct time.
Raw
index.html
<span class="digit"></span>
<span class="digit"></span>
<span class="colon"></span>
<span class="digit"></span>
<span class="digit"></span>
<span class="colon"></span>
<span class="digit"></span>
<span class="digit"></span>
Raw
script.js
var clock = {
digits : ["zero", "one", "two", "three", "foure", "five", "six", "seven", "eight", "nine"],
init : function(){
var $digit = $('.digit');
// Ugly....
this.hour = [$($digit[0]), $($digit[1])];
this.min = [$($digit[2]), $($digit[3])];
this.sec = [$($digit[4]), $($digit[5])];
this.drawInterval(this.drawSecond, function(time){
return 1000 - time[3];
})
this.drawInterval(this.drawMinute, function(time){
return 60000 - time[2] * 1000 - time[3];
})
this.drawInterval(this.drawHour, function(time){
console.log((60 - time[1]) * 60000 - time[2] * 1000 - time[3])
return (60 - time[1]) * 60000 - time[2] * 1000 - time[3];
})
},
getTimeArray : function(){
var dat = new Date();
return [dat.getHours(), dat.getMinutes(), dat.getSeconds(), dat.getMilliseconds()];
},
drawInterval : function(func, timeCallback){
var time = this.getTimeArray();
func.call(this, time);
var that = this;
setTimeout(function(){
that.drawInterval(func, timeCallback);
}, timeCallback(time));
},
drawHour : function(time){
this.drawDigits(this.hour, time[0]);
},
drawMinute : function(time){
this.drawDigits(this.min, time[1]);
},
drawSecond : function(time){
this.drawDigits(this.sec, time[2]);
},
drawDigits : function(digits, digit){
var ten = Math.floor(digit / 10);
var one = Math.floor(digit % 10);
digits[0].attr('class', 'digit '+this.digits[ten]);
digits[1].attr('class', 'digit '+this.digits[one]);
}
};
clock.init();
Raw
style.css
body{
background-color:#222;
margin:100px auto;
text-align:center;
}
.digit, .colon{
position:relative;
display:inline-block;
width:10px;
height:110px;
margin:5px;
}
.colon{
background: linear-gradient(-90deg, #333 10px, transparent 10px),
linear-gradient(-90deg, #333 10px, transparent 10px);
background-position: 0 40px, 0 65px;
background-repeat:no-repeat;
background-size:10px 10px, 10px 10px;
}
.digit{
width:60px;
background-image: linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #333 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #333 50px); /* Bottomleft */
background-position: 0 0, 0 50px, 0 100px, 0 10px, 0 60px;
background-repeat:no-repeat;
background-size:60px 10px, 60px 10px, 60px 10px, 60px 40px, 60px 40px;
}
.zero{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.one{
background-image: linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.two{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #333 50px); /* Bottomleft */
}
.three{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.foure{
background-image: linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.five{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #333 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.six{
background-image: linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #333 50px), /* Topleft */
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.seven{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.eight{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
.nine{
background-image: linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Top */
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Middle*/
linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px), /* Bottom*/
linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px), /* Topleft */
linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px); /* Bottomleft */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment