CSS Ticker Concept

A CSS ticker, no Images have been Used

by genelocklin

HTML

<div>            
    
    <p>
        <span>2</span>
        <span>1</span>
        Hours
    </p>
            
    
    <p>
        <span>0</span>
        <span>4</span>
        Minutes
    </p>
            
    
    <p>
        <span>4</span>
        <span>5</span>
        Seconds
    </p>
    
</div>

SCSS

/* ============= DEFAULT ============= */

html{ background-color:#74695A; font-family: helvetica, sans-serif; }

@mixin border-radius { 
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px; }

@mixin cf { *zoom:1;
  &:before, &:after { content: ""; display: table; }
  &:after { clear: both; } }

div {    
    margin: 100px auto;
    width: 275px;
    & > p {    
        color:#3E3933;
        float:left;
        font-size:12px;
        margin-right:20px;
        width: 76px;
        text-align: center;
        text-shadow: 0 1px 0 #877E71;
            &:last-child { margin-right:0; }
            @include cf;
            position: relative;
    }
    & span {    
            background-color:#4E473F;
            border: 1px solid #483F33;
            color:#A58E78;
            float:left;
            font-size:28px;
            height:60px;
            line-height:60px;
            margin:0 2px 10px 0;
            position: relative;
            text-align: center;
            text-shadow:none;
            width:34px;
            box-shadow: 0px 1px 3px rgba(0,0,0,.4);
            border-radius:4px;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            @include cf;
            &::before,
            &::after {
                content: "";
                height:29px;
                left: 0;
                line-height:60px;
                position: absolute;
                width:34px; }            
            &::before {    
                border-bottom: 1px solid #483F33;
                top: 0;
                border-top-right-radius:4px;
                -moz-border-radius-topright:4px;
                border-top-left-radius:4px;
                -moz-border-radius-topleft:4px;
                box-shadow: 0px 1px 0 #665D53 inset;
                background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.02)), to(rgba(0,0,0,0))); 
                background-image:...