Clock Widget


Dribbble is a community of designers and based on the basketball theme of the site, users can rebound (make a version of) another users post. Posts are mostly screen caps of current projects. As a coding challenge I rebounded an image that was a mockup of a widget. The original was a mock up made with photoshop, all I had to work with was a 800 x 600 jpg.

Dribbble rebound of MVben's design :

I decided that if I used SVG instead of PNG the image elements would not only scale if needed but would not have jagged edge and remain crisp at all sizes. I knew that based on the design that at least one part of the design would be round with a drop shadow (clock face). This might be possible with a PNG with a transparent back ground but to fully control it I used the filter options in SVG. To build all of the SVG details, I rebuilt all of the icons and clock in illustrator and exported them as SVG.

The markup itself is a few divs with unordered lists. The CSS layout is mostly achieved with relative positioning, z-index, and a triple drop shadow on the main div to match the subtlety of the original design.

I used a JavaScript (Date Format 1.2.3 by Steven Levithan) to add the current day date and year. The Jquery needed to run the clock was from a post on CSS tricks and takes advantage of the rotation transformation.


Here is a github gist of the project

code highlight: 
SVG filter for drop shadow on round element

/* preceded by SVG XML info */

    <filter id="f1" x="-1" y="-1" width="3" height="3">
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="8" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 .5 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

/* the path info fallows */

See the Pen clock widget by charlie (@CharlesAMoss) on CodePen.