Question

I am trying to create a box like below picture.
This box will use for time and other two-digit numbers.

I putted my code here
I have some problems and questions:

• Boxes in picture seems have two-color borders. outside is a color (color=”#706f6f”) and inside like shadow . with what technique I can create this inside border? Is this CSS3 effect ?
• I think my code style classification is not good.would you please help me to make it better?
• I don’t know where should I put colons(:) between days hours mins and secs ?
• Last question is where is better to putt texts under boxes ? (DAYS , HOURS , MINS , SECS) Is it better to put them in separate Div container ?

Answer 1

See this demo fiddle.

1. You can add an inset shadow with CSS, but that is all. Like the already given answers and comments say, you might want to consider using a background image.
2. There is nothing wrong with your syntax, but it indeed could need a little refresh 😉
3. You always have to write your markup like there is no style sheet. So the colons are placed between the labels and the corresponding digits.
4. See 3.

The markup now shows like:

<div id="digits">
    <p>Days<span class="colon">: </span><span class="digits">10</span></p>
    <p>Hours<span class="colon">: </span><span class="digits">00</span></p>
    <p>Mins<span class="colon">: </span><span class="digits">00</span></p>
    <p>Secs<span class="colon last">: </span><span class="digits">00</span></p>
</div>

You could narrow it down to this:

<div id="digits">
    <p>Days<span>: </span><span>10</span></p>
    <p>Hours<span>: </span><span>00</span></p>
    <p>Mins<span>: </span><span>00</span></p>
    <p>Secs<span class="last">: </span><span>00</span></p>
</div>

Tweak it a bit further as you like.