Ajax Loader
×
HTML
<div id="advent-calendar">
1
<div id="advent-calendar">
2
  <ul class="days">
3
    <li class="day"><a href="#"><span>1</span></a></li>
4
    <li class="day"><a href="#"><span>2</span></a></li>
5
    <li class="day"><a href="#"><span>3</span></a></li>
6
    <li class="day"><a href="#"><span>4</span></a></li>
7
    <li class="day"><a href="#"><span>5</span></a></li>
8
    <li class="day"><a href="#"><span>6</span></a></li>
9
    <li class="day"><a href="#"><span>7</span></a></li>
10
    <li class="day"><a href="#"><span>8</span></a></li>
11
    <li class="day"><a href="#"><span>9</span></a></li>
12
    <li class="day"><a href="#"><span>10</span></a></li>
13
    <li class="day"><a href="#"><span>11</span></a></li>
14
    <li class="day"><a href="#"><span>12</span></a></li>
15
    <li class="day"><a href="#"><span>13</span></a></li>
16
    <li class="day"><a href="#"><span>14</span></a></li>
17
    <li class="day"><a href="#"><span>15</span></a></li>
18
    <li class="day"><a href="#"><span>16</span></a></li>
19
    <li class="day"><a href="#"><span>17</span></a></li>
20
    <li class="day"><a href="#"><span>18</span></a></li>
21
    <li class="day"><a href="#"><span>19</span></a></li>
22
    <li class="day"><a href="#"><span>20</span></a></li>
23
    <li class="day"><a href="#"><span>21</span></a></li>
24
    <li class="day"><a href="#"><span>22</span></a></li>
25
    <li class="day"><a href="#"><span>23</span></a></li>
26
    <li class="day"><a href="#"><span>24</span></a></li>
27
  </ul>
28
</div>
29
 
30
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
body {
1
body {
2
  background-image: url(http://i.imgur.com/aq7UK.png);
3
  background-repeat: no-repeat;
4
  background-position: fixed;
5
  background-size: cover; 
6
}
7
 
8
#advent-calendar {
9
  margin: 50px auto;
10
  width: 160*6px;
11
 
12
  ul.days {
13
    list-style: none;
14
    margin: 0;
15
    padding: 0;
16
    
17
    .day {
18
      display: block;
19
      float: left;
20
      
21
      a {
22
        @include box-sizing(border-box);
23
        @include box-shadow(0px 1px 3px #666);
24
        background-size: cover;
25
        border: 2px #fff solid;
26
        display: block;
27
        position: relative;
28
        width: 150px;
29
        height: 130px;
30
        margin: 5px;
31
        
32
        span {
33
          @include transition-property("background-color");
34
          @include transition-duration("1s, 1s");
35
          background-color: rgba(#000, 0.5);
36
          color: #fff;
37
          font-weight: bold;
38
          font-size: 40px;
39
          text-shadow: 1px 1px 1px #000;
40
          -webkit-font-smoothing: antialiased;
41
          position: absolute;
42
          width: 100%;
43
          height: 100%;
44
          display: block;
45
          line-height: 130px;
46
          text-align: center;
47
        }
48
      }
49
    }
50
  }
51
}
 
JavaScript
calendar = $ '#advent-calendar'
1
calendar = $ '#advent-calendar'
2
days = $ '.days li', calendar
3
 
4
days.bind 'mouseover', (e) ->
5
  ($ 'span', this).css('background-color', 'transparent');
6
  
7
days.bind 'mouseleave', (e) ->
8
  ($ 'span', this).css('background-color', 'rgba(0,0,0,.5)');
9
  
 

Untitled

CSSDeck G+