One of the reasons HTC’s phones were initially so popular was their nice interface with their iconic clock and weather widget. With the help of some CSS, we can recreate the whole thing using RGBa transparencies, box-shadows, and gradient backgrounds with multiple color stops.
Here’s what we’ll be making:
The only thing to note here is that the empty <div id="top-gradient"> will be used in the lighter portion of the background.
First, let’s create the semi-transparent black background, which will also serve as our container:
Using RGBa we set the background to black with 50% transparency. Since this is also our container, we set the height and width, set the position: relative so that all of our other elements can be positioned absolutely and do a little extra styling, including rounded corners with border-radius and a box-shadow.
Next, we’ll use our empty div to layer another semi-transparent white gradient towards the top half of the box to give it that glossy look
Lately, I’ve been using the Ultimate CSS Gradient Generator a lot, and I used it here by creating a solid white to solid white RGBa gradient. Once I copied that code, I modified the transparency for each line to start at 10% rgba(255,255,255,0.1) and end at 50% transparency rgba(255,255,255,0.5).
Time to play with time, the clock portion is styled to look like a modern version of an old flip clock where there is a separation in the middle of the card, and you can see several cards lined up behind the current one. This is where most of the work happens for this project.
Be warned, this looks like a lot of intimidating code, but it’s not as bad as it looks. I’ll explain below:
My solution to style the cards is to use one background gradient with several color stops to make lines that simulate multiple cards at the top and bottom and also give the appearance of a break in the middle. Color stops can be hard to get precise, so once again, I used the Ultimate CSS Gradient Generator, they have a feature where you can upload an image of a gradient, and it will output the corresponding CSS for you. I uploaded an image of just the background of the card, including the lines at the top and bottom, and it immediately gave me the perfect CSS I needed.
Lastly, we need to position the rest of the text for the location, weather, icon, and temps and do a little font styling.
Let’s make the clock show the user’s actual time to wrap this up. We can do this with just a tiny bit of javascript that updates the time every second.
16 Useful Web Development Tutorials | Mystrious says:
[…] Recreating the HTC clock widget with CSS3 […]
Clint says:
I have made a working version with weather, forecast, images, etc. However I have yet to get the flip animations to look good, or even work that well really. If anyone would like the source to see what you want to do with it please email me. It’s basically a few lines of php to lookup location, grab ip, and ask yahoo weather api for the forecast.
Web Links « AMPT Blog says:
[…] Recreating the HTC clock widget with CSS3 | Seth Stevenson […]
CSS3: Cómo crear un reloj al estilo HTC en tu sitio web - elWebmaster.com says:
[…] original del artÃculo: Seth Stevenson Blog Traducción realizada por […]
Simon Jackson says:
Looks really neat – its just a shame that the css styling has to be so large (not a criticism of you!). I guess actually in this slightly contrived situation there isn’t really a reason not to just use a background image to provide design and simply overlay the text.
This is going to be one of the major issues with css3 I think i.e. when and where to use css3 to supply the styling and when to just use a background image for simplicity. Ultimately, it will come down to time and money in the commercial sector and the level of uptake for CSS3 compatible browsers in your target market.
Asmodiel says:
Really amazing piece of work. The implementation of the “real” widget would just need a few lines of javascript to show the time and change the weather data and image accordingly.
CSS really is only meant for the design not for the functionality! 🙂
Seth Stevenson says:
Thanks. Yeah the time would be easy, weather would be a little more difficult. I’ve been trying to figure out a good way to do the “flip” animation though.
Paul says:
Seeing as we’re already showing off CSS3, I would try adding an extra layer for the current value (overlaying the new value behind it) and use a 3D transform to flip the current layer down. Then we can use Javascript to show and hide the correct layers.
Alternatively, we could use jQuery to achieve the same effect.
Adrian says:
A bit too much CSS for my taste but a great job Seth. Nice example of of gradients for those who are just jumping on the practice.
Tharindu Abeydeera says:
I too was expecting to see the real widget 🙂 but anyway you’ve done a work of art with CSS , totally remarkable good work and if time permits please create the real widget 🙂
jared says:
So you just recreated a screenshot of the clock in CSS? This is hardly a recreation of the HTC clock widget since it is completely static. Great example of what can be done with CSS gradients I guess…
Seth Stevenson says:
Yes this is just a visual recreation. It was meant to show how CSS is evolving and can be used for more detailed styling. I hope to follow up at some point with the functionality behind this to make the clock and weather work.
This method also has the benefit of being flexible in the sense that you can easily change the colors, sizes and details without generating a new image each time.
Recreating the HTC clock widget with CSS3 says:
[…] Recreating the HTC clock widget with CSS3 […]