Skip to content

Instantly share code, notes, and snippets.

@kurtextrem
Created January 8, 2012 17:05
Show Gist options
  • Save kurtextrem/1579009 to your computer and use it in GitHub Desktop.
Save kurtextrem/1579009 to your computer and use it in GitHub Desktop.
The left part of the background:
.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:#252525;
height:200px;
width:200px;
position:relative;
overflow:hidden;
float:left;
}
.clock .rotate{
/* There are two .rotate divs - one for each half of the background */
position:absolute;
width:200px;
height:200px;
top:0;
left:0;
}
.rotate.right{
display:none;
z-index:11;
}
.clock .bg, .clock .front{
width:100px;
height:200px;
background-color:#252525;
position:absolute;
top:0;
}
.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:200px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:60px;
text-align:center;
top:65px;
left:0;
/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}
/* The left part of the background: */
.clock .bg.left{ left:0; }
/* Individual styles for each color: */
.orange .bg.left{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_blue.png) no-repeat left top; }
/* The right part of the background: */
.clock .bg.right{ left:100px; }
.orange .bg.right{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_blue.png) no-repeat right top; }
.clock .front.left{
left:0;
z-index:10;
}
<!-- The first class (green in this case) is assigned dynamically -->
<div class="orange clock">
<!-- This div holds the value of the unit monitored - seconds, minutes or hours -->
<div class="display">5</div>
<!-- A black area that hides the underlying background -->
<div class="front left"></div>
<!-- The left part of the background: -->
<div class="rotate left">
<div class="bg left"></div>
</div>
<!-- The right part of the background: -->
<div class="rotate right">
<div class="bg right"></div>
</div>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment