Sunday, 10 November 2013
DVD Style
CSS
#movie-style {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
float: left;
margin: 0 90px 40px 0;
position: relative;
}
#movie-style a {
display: block;
height: 250px;
line-height: 0 !important;
z-index: 100;
}
#movie-style h1 {
background-color: rgba(0, 0, 0, 0.7);
bottom: 25px;
color: #FFF;
font-family: Arial;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 10px 0;
position: absolute;
text-align: center;
width: 180px;
z-index: 60;
text-shadow: 1px 1px 0 #000;
}
#movie-style:hover h1 {
color: #66bcff;
}
.mask-dvd {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRHK3jDYCzaREeB2WXJrrPSQFnBJ6mff7H5FiqQ1XAIx8yqPub6atiuZKmif9R8tUQCcgtnZIyM-aFyPnWsdTjJrh4-62cSi-cQGnAbQQT7HXPbgOnWxNYIZ9y_faAG-6FfBGiama9Kody/s1600/mask-dvd.png") no-repeat scroll 0 0 transparent;
box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
height: 250px;
left: 0;
position: absolute;
top: 5px;
width: 180px;
}
.corte-movie {
border-bottom: 5px solid #222;
border-radius: 3px 3px 3px 3px;
border-right: 5px solid #222;
border-top: 5px solid #222;
float: left;
height: 250px;
overflow: hidden;
position: relative;
width: 180px;
z-index: 50;
}
.corte-movie img {
max-height: 300px;
}
.dvd-rol {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhomJj6G6-4DksAhG90q1-7LzP6MdgER_DCP-0BWgsUps9UyyUX79T3JxVHfREwr0GBooIeSwgt6frEPvdlfmf-Bw2LVmKd6qgxvJOgSGP5dphkeI3n_rhrTC7dw6qZ0wpIhhucOnrG3ZD7/s1600/dvd.png") no-repeat scroll 0 0 transparent;
display: block;
height: 180px;
position: absolute;
right: 0;
top: 50px;
transform: rotate(100deg);
-moz-transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
width: 180px;
z-index: 10;
}
.dvd-rol, #movie-style h1 {
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
#movie-style:hover .dvd-rol {
right: -73px;
transform: rotate(242deg);
-moz-transform: rotate(242deg);
-webkit-transform: rotate(242deg);
-o-transform: rotate(242deg);
}
HTML
<div id="movie-style">
<span class="corte-movie">
<img src="Masukkan Url Gambar" />
</span>
<h1>Judul DVD</h1>
<a href="Masukkan Url yang akan dituju" class="mask-dvd"></a>
<i class="dvd-rol"></i>
</div>
CD Style
CSS
#music-style {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
float: left;
margin: 0 90px 40px 0;
position: relative;
}
#music-style a {
display: block;
line-height: 0 !important;
position: absolute;
z-index: 100;
}
#music-style h1 {
background-color: rgba(0, 0, 0, 0.7);
bottom: 25px;
color: #FFF;
font-family: Arial;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 10px 0;
position: absolute;
right: 3px;
text-align: center;
text-shadow: 1px 1px 0 #000000;
width: 210px;
z-index: 60;
}
#music-style:hover h1 {
color: #66bcff;
}
.mask-cd {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNKbsow77xxVuXvQTLT0hx6PBq0LLUV1exgXm7Kjuq9DqyOUz8F6B11keCy-jURGdhfzybYDoLtVU71aKTjQCHzFJV0PKWyuQD6BP75xxmNtFnL6QVIvh0k3LRM4Agf4sTAQ9LL6VLRON/s1600/mask-cd.png") no-repeat scroll 0 0 transparent;
box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
height: 190px;
left: 0;
top: 3px;
width: 250px;
}
.corte-music {
border-color: #222;
border-style: solid;
border-width: 3px 3px 3px 40px;
float: left;
height: 190px;
overflow: hidden;
position: relative;
width: 210px;
z-index: 50;
}
.corte-music img {
max-height: 300px;
}
.cd-rol {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MpGdHWMk9ptskkIO5p3PHjZAbYkuK-r5jHeTF9joanblawDRa-l3thZ7uDHVs1h7LkZQoPSA3b9kQiFlPP_lWjDcyb2zjbQDoDpb3jiPhYQpFtI8uvfKGGOGEd-ask2Pci5KacAnI8pI/s1600/cd.png") no-repeat scroll 0 0 transparent;
display: block;
height: 180px;
position: absolute;
right: 0;
top: 7px;
transform: rotate(-230deg);
-moz-transform: rotate(-230deg);
-webkit-transform: rotate(-230deg);
-o-transform: rotate(-230deg);
width: 180px;
z-index: 10;
}
.cd-rol, #music-style h1 {
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
#music-style:hover .cd-rol {
right: -73px;
transform: rotate(0);
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
}
HTML
<div id="music-style">
<span class="corte-music">
<img src="Url Gambar" />
</span>
<h1>Judul CD</h1>
<a href="Url yang akan dituju" class="mask-cd"></a>
<i class="cd-rol"></i>
</div>
Keterangan:
Untuk ukuran gambar DVD = 180 x 251 pixel dan untuk ukuran gambar CD = 211 x 191 pixel
Untuk text yang saya kasih warna merah, ganti:
- Url Gambar = Alamat Gambar
- Judul CD = Ganti dengan judul yang diinginkan
- Url yang akan dituju = ganti dengan url yang sobat inginkan jika album tersebut diklik
Berikut Demo DVD dan CD Style
11 comments
wow :O
ini yg sedang saya cari cari ,, thanks om :D
ya sob, silahkan dicoba! ^_^
Wow keren gan (y) izin coba ya
keren
Gan Kalo Buat Bagian Post di Home Page Gimana , kayaknya pass buat post
mksudnya di homepage bentuk postnya CD. DVD kah?
Tinggal Disesuaikan Class nya
kk, klo ngopy sertakan sumber donk..
Ngambi scriptnya dari sini kan.. => http://css.zanime-mf.com/
hadehhh... apakah itu blog anda?? itu blog yang punya orang spanyol. -_- lgian sumber script udh adaa!! makanya lebih teliti lagi !! jangan asal ngomong..
bukan sih... :v
Hah? Apa iya? Sorry2 kalo gitu mang.. (:
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog