sdaityari/css3clock.md Secret

## css3clock.md

      
    Raw
  

              css3clock.md
            
          
    #Create a CSS 3 Clock using no JavaScript
CSS3 has shown a true test of mettle in the field of power and speed. One can produce a pixel perfect webpage with CSS3 that will load faster, has a small overall file size and fewer HTTP requests.
CSS3 animation module provides an elegant solution to basic animation needs of webpages without  requiring to trespass the realm of scripting and has the potential to be a major part of web designing practices. Using CSS3 keyframe animations, one can create smooth, maintainable animations that perform relatively well.
An example of creating an analogue clock using purely CSS would be a nice way to illustrate the power of CSS3. No Javascript is used for this purpose. This article will walk you through with various parts of the clock, mainly focussing on the new features introduced in CSS3, like the transforms, gradients and animations.
A demo is available on CodePen and embedded here (It is inspired by this demo).
See the Pen Clock using CSS by Tathagata Sengupta (@tathagata) on CodePen.
<script async src="//codepen.io/assets/embed/ei.js"></script>
Getting started with the HTML

<body>
	<div id="clock">
		<div class="clockFace"></div>
		<ul class="marks">
			<!--The markings on the clock-->
			<li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li>
		<li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li>
		</ul>
		<ul class="digits">
			<!--The digits present-->
			<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
			<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
		</ul>
		<div class="hourHand"></div>
		<div class="minuteHand"></div>
		<div class="secondHand"></div>
	</div>
</body>

We include a CSS file which will contain the complete layout of the clock, as well as all the necessary animations involved. We may also include the entire code within the head itself. However, it is not recommended since the code might turn messy and it might prove to be an uphill task to debug.
We start with the body of the clock within the div clock. Its background will be designed within the div clockFace.
Next, within the marks unordered list, we have a set of 48 items which will handle the minute mark within the clock's face. Similarly, the digits list will be showing the hour mark. Next, we have a div each for the three hands of the clock.
CSS Code Explained

So, here comes the real part — the style.css will handle all the stylings and animations of the clock. Note that no images are used; the shapes are built purely using CSS.
Here's a quick glance at the code :
1. Clock Background

We start with designing the clock’s background; what it’s shape would be, it’s colour, how the numbers are positioned etc. This part introduces gradients as background as well as the transform property. Again, no images are used, just pure CSS.
#clock .clockFace {
… … 
}
#clock .clockFace:before {
/* The outer rim of the clock face */
… … 
}
#clock .clockFace:after {
/* The inner body of the clock face */
… … 
}

This code snippet takes care of the complete clock background including inner as well as the outer face. The outer rim of the clock includes a gradient fill.
-webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),

This is a linear fill with origin at the top leftmost corner of the bounding box. The 135deg determines the angle of the gradient. rgba(r,g,b,a) x% determines  the colour and its opacity at x% way from the origin.
-webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%)

This is a radial fill with origin as the center. The meaning rgba(r,g,b,a) x% values remains the same.
We design the common appearance of the minute mark within the #clock .marks li {...} block. However, for changing the appearance of any particular mark, one has to write it within the li:nth-child block. For example-
#clock .marks li:nth-child(2) {-webkit-transform:rotate(12deg) translateY(-12.7em);}

This code takes care of the positioning and orientation of the different minute mark on the clock. li:nth-child(x) refers to the xth list item from the group of 48. It is rotated at an angle using the transform feature. The rotation value is different for different markings, namely 6(x + [x/5]) where [.] means the greatest integer function.
The same technique is used in positioning the various digits of the clock. This positioning is done by the translateX and translateY feature within transform.
#clock .digits li:nth-child(1) { -webkit-transform:translate(3.9em, -6.9em); }

The values however require a hit & trial approach.
In this code, the central pivot is included within the digits css. Again, this includes a radial gradient filling.
#clock .digits:before {
	/* The central portion of the clock face */
	… … 
	}
#clock .digits:after {
	… …
	}

2. Hands

Next, we start with the different hands of the clock. The example consists of three hands; for hours, minutes and seconds. Each of them have their own design and animation.
The keyframes tag includes the basic animation function of the div.
@-webkit-keyframes name{ to {transform:rotate(final deg)} } defines an animation function name that will define the final form of the div; in this case, rotated by finale from original orientation.
-webkit-animation:name <duration>  <steps> <initial delay> infinite; calls the animation function name.

duration determines the time it would take to complete the animation
steps determines the step at which the transformation will take place.

        	-webkit-animation:seconds 60s steps(60, end) 0s infinite;
        	-webkit-animation:seconds 60s linear 0s infinite;


linear steps implies that the rotation would be smooth as against steps(x, end) where         	rotation is discrete; at (duration/x) time interval.
initial delay determines how much of delay to be added at the beginning of the animation.

We also design the hands differently for convenience. For this, either some available images are imported. However, we might even utilize the power of CSS to customize our divs in various shapes to get the desired result.
Cross Browser Support

The main problem faced by today's developers to embrace CSS3 is that many old browsers, namely IE8 or lesser, don't support it. Even the recent browsers require additional prefixes in order to enable CSS3 functions. Some of the prefixes are:

-moz for Mozilla
-webkit for Chrome & Safari
-o for Opera
-ms for IE9

Each browser ignores the prefix not meant for it. Default property is added to cater to all the browsers with or without CSS3 support. Generally that is added after the browser specific ones as the former will be rendered otherwise in all cases.
One possible remedy to this solution is use of JavaScript to enable CSS3 in older browsers. CSS3 PIE enables you to render features like box-shadow, border-radius and linear gradients in IE 6-8. Additional code includes uploading of the CSS3 PIE JavaScript file. Selectivzr allows you to use the advanced CSS3 selectors like “nth child” in older browsers.
With this, we come to the end of the tutorial. Did you like it? Do you have another way of creating a clock using CSS3? Let us know in the comments below.