CODEWITHSUNDEEP
css
Shahin
Shahin

Reputation: 12851

Style Input time CSS

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

enter image description here

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

Upvotes: 1

Views: 3211

Answers (3)

NGLN
NGLN

Reputation: 43669

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.

Upvotes: 1

vanErp
vanErp

Reputation: 491

use this img as background for your divs:

enter image description here

then place black text on it in a condensed font. add a border to the divs, like in the images and give the wrapper a matching background color.

Upvotes: 1

mgraphic
mgraphic

Reputation: 48

I would create the numbers as an image sprite with the inner shadows that could be split left and right:

00
11
22
33
44
55
66
77
88
99

Then I would build a png overlay with transparent cutouts to mask the number images.

Upvotes: 0

Related Questions