Ajax Loader
×
HTML 
<section class="shelf">
1
<section class="shelf">
2
  <div>
3
    <!-- Blu ray case preview -->
4
    <article class="bluray case">
5
      <div>
6
        <div class="logo"><img src="http://cases.tb-one.se/img/bluray.png"></div>
7
8
        <div class="img">
9
          <span><img src="http://movies.sulekhalive.com/mstore/14696341/albums/default/original/aarambam-movie-firstlook-posters.jpg"></span>
10
        </div>
11
      </div>
12
    </article>
13
14
    <!-- Playstation 3 case preview -->
15
    <article class="ps3 case">
16
      <div>
17
        <div class="logo">
18
          <img src="http://cases.tb-one.se/img/bluray-ps3.png">
19
          <img src="http://cases.tb-one.se/img/ps3.png">
20
        </div>
21
        <div class="img">
22
          <span><img src ="http://www.diehardvijayfans.com/wp-content/uploads/2013/08/thalaiva11413_m.jpg"</span>
23
        </div>
24
      </div>
25
    </article>
26
27
    <!-- Xbox 360 case preview -->
28
    <article class="xbox case">
29
      <div>
30
        <div class="img">
31
          <span><img src="http://www.fullmovie4u.co/wp-content/uploads/2012/12/Dhoom-3-movie-poster.jpg"</span>
32
        </div>
33
      </div>
34
    </article>
35
36
    <!-- CD case preview -->
37
    <article class="cd case">
38
      <div>
39
        <div class="img">
40
          <span><img src="http://kochipost.com/wp-content/uploads/2013/11/Deepika-Ranveer-Ram-Leela-2.jpg"></span>
41
        </div>
42
      </div>
43
    </article>
44
  </div>
45
</section>
46
<section class="shelf">
47
  <div>
48
    <!-- Blu ray case preview -->
49
    <article class="bluray case">
50
      <div>
51
        <div class="logo"><img src="http://cases.tb-one.se/img/bluray.png"></div>
52
53
        <div class="img">
54
          <span><img src="http://filmphage.files.wordpress.com/2013/07/man-of-steel-cavill.jpg"</span>
55
        </div>
56
      </div>
57
    </article>
58
59
    <!-- Playstation 3 case preview -->
60
    <article class="ps3 case">
61
      <div>
62
        <div class="logo">
63
          <img src="http://cases.tb-one.se/img/bluray-ps3.png">
64
          <img src="http://cases.tb-one.se/img/ps3.png">
65
        </div>
66
        <div class="img">
67
          <span><img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/51/FIFA_13_Global_Cover.jpeg/250px-FIFA_13_Global_Cover.jpeg"></span>
68
        </div>
69
      </div>
70
    </article>
71
72
    <!-- Xbox 360 case preview -->
73
    <article class="xbox case">
74
      <div>
75
        <div class="img">
76
          <span><img src="http://www.gamereactor.se/media/93/nhl13_549331b.jpg"></span>
77
        </div>
78
      </div>
79
    </article>
80
81
    <!-- CD case preview -->
82
    <article class="cd case">
83
      <div>
84
        <div class="img">
85
          <span><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/2pacalypse_now.jpg/220px-2pacalypse_now.jpg"></span>
86
        </div>
87
      </div>
88
    </article>
89
  </div>
90
</section>
 
CSS 
/* Preview styling only
1
/* Preview styling only
2
------------------------ */
3
 
4
body {
5
  background: #f6f5ee repeat;
6
}
7
 
8
article {
9
  margin: 0 10px;
10
}
11
 
12
/* The awesome
13
------------------ */
14
 
15
/* Shelf (Works best in Webkit) */
16
.shelf {
17
  position: relative;
18
  width: 721px;
19
  border-bottom: 13px solid #24252a;
20
  text-align: center;
21
  padding: 0 27px;
22
  margin: 20px auto;
23
  background: transparent;
24
}
25
 
26
.shelf:after {
27
  position: absolute;
28
  bottom: -13px;
29
  left: 34px;
30
  height: 10px;
31
  background: transparent;
32
  content: "";
33
  -webkit-transform: perspective( 150 ) rotateX( -25deg );
34
     -moz-transform: perspective( 150 ) rotateX( -25deg );
35
      -ms-transform: perspective( 150 ) rotateX( -25deg );
36
          transform: perspective( 150 ) rotateX( -25deg );
37
  right: 34px;
38
  box-shadow: 0 0 17px 5px rgba(0, 0, 0, 0.7);
39
  z-index: -1;
40
}
41
 
42
  .shelf > div {
43
    border-bottom: 23px solid #303138;
44
    position: relative;
45
    z-index: 1;
46
  }
47
48
  .shelf > div:before {
49
    content: '';
50
    width: 0px;
51
    height: 0px;
52
    border-style: solid;
53
    border-width: 0 0 23px 27px;
54
    border-color: transparent transparent #303138 transparent;
55
    position: absolute;
56
    bottom: -23px;
57
    left: -27px;
58
    z-index: 2;
59
    -webkit-transform:rotate(360deg);
60
    -moz-transform:rotate(360deg);
61
    transform:rotate(360deg);
62
  }
63
64
  .shelf > div:after {
65
    content: '';
66
    width: 0px;
67
    height: 0px;
68
    border-style: solid;
69
    border-width: 23px 0 0 27px;
70
    border-color: transparent transparent transparent #303138;
71
    position: absolute;
72
    bottom: -23px;
73
    right: -27px;
74
    z-index: 2;
75
  }
76
77
    .shelf > div > * {
78
      position: relative;
79
      z-index: 2;
80
      top: 18px;
81
    }
82
 
83
 
84
/* Default case template (Bluray) */
85
 
86
.case {
87
  display: inline-block;
88
  width: 142px;
89
  height: 179px;
90
  border-radius: 5px;
91
  position: relative;
92
  z-index: 1;
93
}
94
 
95
.case:after {
96
  width: 100%;
97
  height: 10px;
98
  border-radius: 20px;
99
  content: "";
100
  background: rgba(0, 0, 0, 0.3);
101
  position: absolute;
102
  bottom: -5px;
103
  -webkit-transform: perspective(600) rotateX(100deg);
104
     -moz-transform: perspective(600) rotateX(100deg);
105
      -ms-transform: perspective(600) rotateX(100deg);
106
       -o-transform: perspective(600) rotateX(100deg);
107
          transform: perspective(600) rotateX(100deg);
108
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
109
  left: 0;
110
}
111
 
112
  .case > div {
113
    width: 100%;
114
    height: 100%;
115
    background: #46b0e9;
116
    background: rgba(70, 176, 233, 0.8);
117
    border-radius: 8px 8px 5px 5px;
118
    -webkit-box-sizing: border-box;
119
       -moz-box-sizing: border-box;
120
            box-sizing: border-box;
121
    padding: 14px 3px 3px 0;
122
    overflow: hidden;
123
    position: relative;
124
  }
125
126
  .case > div:after {
127
    content: "";
128
    position: absolute;
129
    top: 0;
130
    left: 35px;
131
    width: 100%;
132
    height: 200%;
133
    background: rgba(255, 255, 255, 0.2);
134
    z-index: 10;
135
    -webkit-transform: rotate(30deg);
136
       -moz-transform: rotate(30deg);
137
        -ms-transform: rotate(30deg);
138
         -o-transform: rotate(30deg);
139
            transform: rotate(30deg);
140
  }
141
142
    .case > div > .logo {
143
      position: absolute;
144
      top: 5px;
145
      left: 0;
146
      width: 100%;
147
    }
148
149
      .case > div > .logo > img {
150
        max-height: 8px;
151
        width: auto;
152
        margin: auto;
153
        display: block;
154
      }
155
156
    .case > div > .img {
157
      -webkit-box-sizing: border-box;
158
         -moz-box-sizing: border-box;
159
              box-sizing: border-box;
160
      width: 100%;
161
      height: 100%;
162
      padding: 1px 1px 1px 0;
163
      border-radius: 0 4px 4px 0;
164
      background: rgba(0, 0, 0, 0.2);
165
      position: relative;
166
    }
167
168
    .case > div > .img:before {
169
      content: "";
170
      position: absolute;
171
      top: -10px;
172
      left: 1px;
173
      width: 2px;
174
      bottom: 0;
175
      background: rgba(255, 255, 255, 0.3);
176
      border-radius: 8px;
177
      z-index: 3;
178
    }
179
180
    .case > div > .img:after {
181
      content: "";
182
      position: absolute;
183
      top: -13px;
184
      left: 1px;
185
      right: -2px;
186
      height: 15px;
187
      border-top: 2px solid rgba(255, 255, 255, 0.3);
188
      border-radius: 8px;
189
    }
190
191
      .case > div > .img > span {
192
        -webkit-box-sizing: border-box;
193
           -moz-box-sizing: border-box;
194
                box-sizing: border-box;
195
        width: 100%;
196
        height: 100%;
197
        padding: 1px 1px 1px 0;
198
        border-radius: 0 4px 4px 0;
199
        background: rgba(255, 255, 255, 0.2);
200
        display: block;
201
        position: relative;
202
      }
203
204
      .case > div > .img > span:before {
205
        position: absolute;
206
        top: 2px;
207
        left: 0;
208
        width: 0;
209
        height: 100%;
210
        content: "";
211
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
212
        z-index: 2;
213
      }
214
215
      .case > div > .img > span:after {
216
        position: absolute;
217
        top: 5px;
218
        left: 0;
219
        width: 0;
220
        height: 100%;
221
        content: "";
222
        box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.3);
223
        z-index: 1;
224
      }
225
226
        .case > div > .img > span > img {
227
          width: 100%;
228
          height: 100%;
229
          display: block;
230
          border-radius: 0 3px 3px 0;
231
        }
232
 
233
234
/* PS3 */
235
.case.ps3 > div {
236
  background: #fff;
237
  background: rgba(239, 239, 239, 0.8);
238
}
239
 
240
  .case.ps3 > div > .logo {
241
    text-align: left;
242
    overflow: hidden;
243
  }
244
245
    .case.ps3 > div > .logo > img {
246
      float: left;
247
      margin-left: 10px;
248
    }
249
250
    .case.ps3 > div > .logo > img + img {
251
      float: right;
252
      margin-right: 7px;
253
      max-height: 3px;
254
      margin-top: 2px;
255
    }
256
257
/* XBOX 360 */
258
.case.xbox {
259
  height: 203px;
260
}
261
 
262
.case.xbox > div {
263
  background: #75bb24;
264
  background: rgba(117, 187, 36, 0.8);
265
  padding: 3px 3px 3px 0;
266
  border-radius: 2px 5px 5px 2px;
267
}
268
 
269
/* CD */
270
.case.cd {
271
  height: 131px;
272
}
273
 
274
.case.cd > div {
275
  background: #fff;
276
  background: rgba(255, 255, 255, 0.15);
277
  border-radius: 0;
278
  padding: 1px 1px 1px 13px;
279
  border: 1px solid rgba(0, 0, 0, 0.6);
280
}
281
 
282
  .case.cd > div > .img {
283
    border-radius: 0;
284
    padding: 0;
285
    border: 1px solid rgba(0, 0, 0, 0.6);
286
  }
287
288
  .case.cd > div > .img:after,
289
  .case.cd > div > .img > span:before,
290
  .case.cd > div > .img > span:after {
291
    display: none;
292
  }
293
294
  .case.cd > div > .img:before {
295
    box-shadow: none;
296
    width: 12px;
297
    background-color: #444;
298
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(0, 0, 0, .2)), color-stop(.5, transparent), to(transparent));
299
    background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
300
    background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
301
    background-image: -ms-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
302
    background-image: -o-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
303
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
304
    border-radius: 0;
305
    background-size: 2px 100%;
306
    top: -1px;
307
    bottom: -1px;
308
    left: -14px;
309
  }
310
311
    .case.cd > div > .img > span {
312
      background: transparent;
313
    }
314
315
      .case.cd > div > .img > span > img {
316
        border-radius: 0;
317
      }
 

3d Cd show case

CSSDeck G+