Digits shown

by Peter Galiba

HTML

<abbr title="2011-12-15T19:00:00z" class="counter-days counter-digits">
    <span class="counter-digit">0</span>
    <span class="counter-digit">2</span>
    <span class="counter-digit-description">days</span>
</abbr>
<abbr title="2011-12-15T19:00:00z" class="counter-hours counter-digits">
    <span class="counter-digit">1</span>
    <span class="counter-digit">8</span>
    <span class="counter-digit-description">hours</span>
</abbr>

CSS

.counter-digits {
  float:left;
  width:104px;
  color:#ffffff;
  text-align:center;
  margin:5px 5px 0;
  border-bottom:0 !important;
}
.counter-digits .counter-digit {
  float:left;
  line-height:55px;
  height:55px;
  width:48px;
  font-size:3em;
  background:#151515;
  -moz-box-shadow:inset 0 1px 3px 0px rgba(255,255,255,0.5);
  -webkit-box-shadow:inset 0 1px 3px 0px rgba(255,255,255,0.5);
  box-shadow:inset 0 1px 3px 0px rgba(255,255,255,0.5);
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  margin-right:4px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  position:relative;
}
.counter-digits .counter-digit:after {
  position:absolute;
  top:50%;
  left:0;
  height:1px;
  width:48px;
  background:#444444;
  border-top:1px solid #000000;
  content:"";
}
.counter-digits .counter-digit:before {
  position:absolute;
  width:48px;
  height:55px;
  -moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.5);
  -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.5);
  box-shadow:0 0 5px 0 rgba(0,0,0,0.5);
  top:0;
  left:0;
  content:"";
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
}
.counter-digits .counter-digit-description {
  display:block;
  font-size:.714em;
  text-transform:uppercase;
}
body {
    margin: 10px;
    background: #35689B;
}