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
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
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.