Inspiration
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 : dribbble.com/shots/1145537-Plug-In1
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.
Code
Here is a github gist of the project
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" />
</filter>
/* the path info fallows */
See the Pen clock widget by charlie (@CharlesAMoss) on CodePen.