Tuesday, May 17, 2011

Pure Css Rating

I was looking for a pure css rating template and couldn't find anything.

Here's my solution:

HTML:

<div class="rateBar">
    <a class="r5" href="/rate/5"></a>
    <a class="r4" href="/rate/4"></a>
    <a class="r3" href="/rate/3"></a>
    <a class="r2" href="/rate/2"></a>
    <a class="r1" href="/rate/1"></a>
</div>

CSS:

.rateBar {
    margin: 30px auto;
    width:260px; height:48px;
    background-image:url("rate_off_bg.png");
}

.rateBar a       { height:48px; position: absolute; }
.rateBar a:hover { background-image:url("rate_on.png"); }

.r1 { width: 48px; }
.r2 { width:101px; }
.r3 { width:154px; }
.r4 { width:207px; }
.r5 { width:260px; }

Images:

based on: Crystal Clear (crystal_clear), license: LGPL-2.1
based on: Crystal Clear (crystal_clear), license: LGPL-2.1

1 comment:

  1. If the payout channel had filled up, the payout turned extra beneficiant; if nearly empty, the payout turned much less so . A theoretical hold worksheet is a doc provided by the producer for each slot machine that signifies the theoretical percentage the machine ought to 바카라사이트 hold primarily based on the quantity paid in. The worksheet additionally signifies the reel strip settings, number of coins that may be|that may be|which could be} performed, the payout schedule, the number of reels and different info descriptive of the particular type of slot machine. A slot machine , fruit machine or poker machine is a gambling machine that creates a recreation of likelihood for its clients.

    ReplyDelete