How this Fancy Countdown list is implemented

Discussion in 'WordPress' started by Densely, Jan 30, 2014.

0
  1. #1
    Densely, Jan 30, 2014 IP
  2. limitlessjz

    limitlessjz Well-Known Member

    Messages:
    252
    Likes Received:
    72
    Best Answers:
    1
    Trophy Points:
    165
    #2
    They're using a sprite for those images. Here's the HTML and CSS they're using as well..

    <div class="listitem-title"><h3><span class="number">4</span> Sony PlayStation 4 </h3></div>

    Sprite Link: httx://business-news.top5.com/images/top5v4.0/top5_sprite_responsive.png

    CSS: style-responsive.css lines 531-543

    .listitem-title span.number {
    background: url("/images/top5v4.0/top5_sprite_responsive.png") 0px -297px;
    color: rgb(255, 255, 255);
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-weight: 700;
    font-size: 15px;
    width: 29px;
    height: 29px;
    display: inline-block;
    text-align: center;
    line-height: 28px;
    margin-right: 3px;

    Hope you can use this info as inspiration to do what you're trying to do. Good luck.
     
    limitlessjz, Feb 4, 2014 IP
    Densely likes this.