Hallo sobat, dihari minggu ini saya akan berbagi ilmu CSS3 untuk sobat yang akan membuat blog sobat menjadi lebih menarik, apalagi blog sobat yang isinya tentang video, nah kali ini saya akan memberikan tutorial cara membuat DVD - CD Style dengan CSS3, Bagaimana caranya? Simak terus artikel ini !!

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/AVvXsEiR0y8Fs6EsCXQEwsYFbeSi7YxC9Li98AIzCXhZkOOGVBoR4PQgsWobhffWmzQZCbPJ_LDRfu1XAMQCGiqH35nitNhOD-YozZBDt_cuj4gb5DuxruraKT75m4leXcfSljsgyXy3fcZwsMqY/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/AVvXsEjWtwm_GA5fBCCr9QJmGKORGIGRR-o69TWWN44DDh11Dybiuxio72-TeG4YSrACRjYxClB2kolNtzKGlA7JdhgUbjH1bm4IbYPoCqpDuifIuMo_Sdn_s_oILE-VitmCOdIKfz_ZPC008eNJ/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/AVvXsEjflGO1q7KgqB6KkaS2kAORb0OKSzushzYpqXVGBhRsZuwSbVV5keib09t8dNcOm1PNY9Y8O8KxQbnysnNFGmCUn-MlFSt7He6mJJQXOBr7OnuI2eOkeXrPapviRfvN_a_kCK5fPshxfvRA/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/AVvXsEioR2wEUCxpXAIw0PMa00KL2iqx6k3tdj45f0znIbEUkNmDw9ZT-q2Gwckiq3ANCyisDFwMPlcKMcq7C_xrqy-oxJJwU4BaMSBYQkq0sx_bDxxd0n6FzXMi8UKMXGSfrd6FGa3bmk5d77-X/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

DVD Style

CD Style

Title : Cara Membuat DVD-CD Style dengan CSS3
Description : Hallo sobat, dihari minggu ini saya akan berbagi ilmu CSS3 untuk sobat yang akan membuat blog sobat menjadi lebih menarik, apalagi blog so...

Postingan Populer

Cara Membuat DVD-CD Style dengan CSS3

DVD Style

CSS

HTML

CD Style

CSS

HTML

DVD Style

DVD Style

CD Style

CD Style