Pada kesempatan kali ini tutorial yang dibahas yaitu membuat CD dan DVD Style dengan CSS3. Kira-kira hasil akhir dari tutorial ini akan seperti gambar diatas. Untuk mengetahui begitu powerfull nya CSS3, sebelum memulai ada baiknya Anda melihat tutorial sebelumnya mengenai Pure CSS3 Doraemon.
Oke, kita langsung mulai kedalam pembahasan. Berikut ini Hasil beserta kode yang digunakan untuk membuat CD dan DVD Style menggunakan CSS3:
DVD Style menggunakan CSS3
Script HTML Yang Digunakan:
<div id="movie-style">
<span class="corte-movie">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGbwsGOmLPOYNl1HEJiyy01etLhhUDdJxSDv2FbzPBq73YMF-PUozh6YMnCwe5LWiT2svPfU-B2rDrJHSuhifa8uTB5n1ArqH4oXXJNqr7PaeyUvPO-7Hxrw17vQq-HDxkyZMIpnanLk/s1600/the-raid-movie-poster.jpg" />
</span>
<h6>The Raid</h6>
<a href="#" class="mask-dvd"></a>
<i class="dvd-rol"></i>
</div>
Demo
Script HTML
<div id="movie-style">
<span class="corte-movie">
<img src="URL Gambar Anda" />
</span>
<h6>Judul</h6>
<a href="#" class="mask-dvd"></a>
<i class="dvd-rol"></i>
</div>
Script 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 h6 {
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 h6 {
color: #66bcff;
}
.mask-dvd {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18l65sTD8R9iStVCNRKrYvvf6wS80wVqsNMq3VtNMQNb96DUYzkPcjJCfD_hIQMxYIWIhnCgMx-Ar_T6MOTi_MvFZl46_72HevPqZEXhcjJWxdncQCEci8so-OZuhy_BfTBsihjWMGNo/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/AVvXsEh2DYXkhE3myl0Ra-LXJ4s_SPSzqJCiwnlNa4cVEEhIciGKYwTICgksH4UvrxNHbTNN2oYlvLG0fKjRJtYyyZkMmUxDiOmI-702PbJ1nHr2pt7SZfDYJxh9zun2mk7LmNIhaZZkXJXkV8M/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 h6 {
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);
}
CD Style menggunakan CSS3
Script HTML Yang Digunakan:
<div id="music-style">Demo
<span class="corte-music">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK105rdH-jqTcRQ0q4UuTAXXBJkCM8rZlxc4hGLu5NC1PVuCYAY5B2e_I5NHUSaVKOvd-ha3uC9eDRk-64AWQ7NkW2OvKapQoo5rnrm0Wkwm1i5aEJ6kDdeyDvpeDQ4nFj8gE0XeT7ZKg/s1600/Miracle+in+Cell+No.+7+Movie+Poster+-+CD.jpg" /> </span>
<h6>Miracle in Cell No. 7</h6>
<a class="mask-cd" href="#"></a>
<i class="cd-rol"></i>
</div>
Script HTML
<div id="music-style">
<span class="corte-music">
<img src="URL Gambar Anda" />
</span>
<h6>Judul</h6>
<a class="mask-cd" href="Link Anda"></a>
<i class="cd-rol"></i>
</div>
Script 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 h6 {
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 h6 {
color: #66bcff;
}
.mask-cd {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxvIaHoEtCyDiL6ec7CWtkHK38LksOf3AGINrN6OCBzjr4dCYcdXQ9E6CrMcnE7CpkXCqMVamoYwihriuJu5tJlV_upZ2p9y7N_3MYI-ZoZ3dKDl_Rwd6loTMCaF2T3ourRR06Lf2OVA/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/AVvXsEg7y2WyqkPP3a-8lH6A3lsC5bj8GMBYqc3QrYpCc71ulr0gA9yVSMtGJu4M15gKrTAhibltztcaOOT3y8mGSLEM8DL1oG-NatrY5CRgcpiDvT0XW8Lh0QFRwhFxL3T7uUtFbP4YKSbatt5W/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 h6 {
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);
}
