Membuat Navigasi Menu Kipas Dengan CSS3 Sunday, November 24, 2013 Membuat Navigasi Menu Kipas Dengan CSS3 - Kali ini Fajri akan berbagi tentang CSS3 lagi yaitu membuat menu navigasi berbentuk kipas jika sobat belum tau bentuknya seperti apa?? oke saya akan tunjukkan demonya. Jika sobat berminat jangan close kan layar browser anda heheh XD.d Tutorial ini sebelumnya saya dapatkan dari Agan G-Bloog.com. Oke langsung aja ya kita ke TKP. Demo Menu Home Services Printing Editing Storage Contacts Support Sales Buying Photographers Stockist General Stores South Region North Region Central Region Contact Us Email Post Telephone Sales DSLR Cameras Lenses Flash Guns Tripods Filters Jika sobat sudah melihat demonya seperti diatas yuk sekarang waktunya untuk memasang XD CSS /* =============================================================== copyright � zifana.com This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .menuHolder {width:100px; height:100px; margin:50px 0 250px 10px; position:relative; z-index:100;} .menuHolder ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;} .menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;} .menuHolder ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; box-shadow:-5px 5px 5px rgba(0,0,0,0.4); -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; } .menuHolder ul.p1 li {position:absolute; left:0; top:0;} .menuHolder ul.p2 {z-index:-1;} .menuHolder ul.p3 {z-index:-1;} .menuHolder li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;} .menuHolder li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;} .menuHolder ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;} .menuHolder ul ul { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; -webkit-transform:rotate(90deg); -moz-transform:rotateZ(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -webkit-transition:1s; -moz-transition:1s; -ms-transition:1s; -o-transition:1s; transition:1s; } .menuHolder li.s2:nth-of-type(6) > a {background:#888; -webkit-transform:rotate(75deg); -moz-transform:rotateZ(75deg); -ms-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .menuHolder li.s2:nth-of-type(5) > a {background:#999; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHolder li.s2:nth-of-type(4) > a {background:#aaa; -webkit-transform:rotate(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .menuHolder li.s2:nth-of-type(3) > a {background:#bbb; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHolder li.s2:nth-of-type(2) > a {background:#ccc; -webkit-transform:rotate(15deg); -moz-transform:rotateZ(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .menuHolder .a6 li:nth-of-type(6) > a {background:#444; -webkit-transform:rotate(75deg); -moz-transform:rotateZ(75deg); -ms-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .menuHolder .a6 li:nth-of-type(5) > a {background:#555; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHolder .a6 li:nth-of-type(4) > a {background:#666; -webkit-transform:rotate(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .menuHolder .a6 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHolder .a6 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(15deg); -moz-transform:rotateZ(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .menuHolder .a5 li:nth-of-type(5) > a {background:#555; -webkit-transform:rotate(72deg); -moz-transform:rotateZ(72deg); -ms-transform:rotate(72deg); -o-transform:rotate(72deg); transform:rotate(72deg); } .menuHolder .a5 li:nth-of-type(4) > a {background:#666; -webkit-transform:rotate(54deg); -moz-transform:rotateZ(54deg); -ms-transform:rotate(54deg); -o-transform:rotate(54deg); transform:rotate(54deg); } .menuHolder .a5 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(36deg); -moz-transform:rotateZ(36deg); -ms-transform:rotate(36deg); -o-transform:rotate(36deg); transform:rotate(36deg); } .menuHolder .a5 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(18deg); -moz-transform:rotateZ(18deg); -ms-transform:rotate(18deg); -o-transform:rotate(18deg); transform:rotate(18deg); } .menuHolder .a3 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHolder .a3 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHolder li.s1:hover ul.p2 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHolder li.s2:hover ul.p3 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHolder ul li:hover > a {background:#f00; color:#fff;} .menuHolder li.s2:hover > a {background:#d00; color:#fff;} .menuHolder .a6 li:hover > a {background:#b00; color:#fff;} .menuHolder .a5 li:hover > a {background:#b00; color:#fff;} .menuHolder .a3 li:hover > a {background:#b00; color:#fff;} .menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100; -webkit-transition:0s 1s; -moz-transition:0s 1s; -ms-transition:0s 1s; -o-transition:0s 1s; transition:0s 1s; } .menuHolder:hover .menuWindow {width:310px; height:310px; -webkit-transition:0s 0s; -moz-transition:0s 0s; -ms-transition:0s 0s; -o-transition:0s 0s; transition:0s 0s; } .menuHolder span {display:block; -webkit-transform:rotate(5deg); -moz-transform:rotateZ(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } .menuHolder ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;} .menuHolder:hover ~ img.close {width:100%; height:100%;} HTML <div class="menuHolder"><div class="menuWindow"> <ul class="p1"> <li class="s1"><a href="#url">Menu</a> <ul class="p2"> <li class="s2"><a href="http://zifana.com"><span>Home</span></a></li> <li class="s2"><a href="#url"><span>Services</span></a> <ul class="p3 a3"> <li><a href="http://zifana.com">Printing</a></li> <li><a href="http://zifana.com">Editing</a></li> <li><a href="http://zifana.com">Storage</a></li> </ul> </li> <li class="s2"><a href="#url"><span>Contacts</span></a> <ul class="p3 a6"> <li><a href="http://zifana.com">Support</a></li> <li><a href="http://zifana.com">Sales</a></li> <li><a href="http://zifana.com">Buying</a></li> <li><a href="http://zifana.com">Photographers</a></li> <li><a href="http://zifana.com">Stockist</a></li> <li><a href="http://zifana.com">General</a></li> </ul> </li> <li class="s2"><a href="#url"><span>Stores</span></a> <ul class="p3 a3"> <li><a href="http://zifana.com">South Region</a></li> <li><a href="http://zifana.com">North Region</a></li> <li><a href="http://zifana.com">Central Region</a></li> </ul> </li> <li class="s2"><a href="#url"><span>Contact Us</span></a> <ul class="p3 a3"> <li><a href="http://zifana.com">Email</a></li> <li><a href="http://zifana.com">Post</a></li> <li><a href="http://zifana.com">Telephone</a></li> </ul> </li> <li class="s2 b6"><a href="#url"><span>Sales</span></a> <ul class="p3 a5"> <li><a href="http://zifana.com">DSLR Cameras</a></li> <li><a href="http://zifana.com">Lenses</a></li> <li><a href="http://zifana.com">Flash Guns</a></li> <li><a href="http://zifana.com">Tripods</a></li> <li><a href="http://zifana.com">Filters</a></li> </ul> </li> </ul> </li> </ul> </div></div> Keterangan Sobat bisa mengganti tulisan yang saya beri warna merah muda dengan link yang sobat inginkan. Nah sekian pembahasan artikel yang saya bagikan hari ini tentang CSS3 semoga artikel yang saya bagikan bermanfaat bagi sobat semua. Jika ada pertanyaan silahkan berkomentar di bawah artikel ini, Selamat melanjutkan liburan sobat ^_^ Sumber Script:http://zifana.com/2013/07/kipas-navigasi-menu-keren-dengan-css3/ Membuat Navigasi Menu Kipas Dengan CSS3 - Kali ini Fajri akan berbagi tentang CSS3 lagi yaitu membuat menu navigasi berbentuk kipas jika... Read More
Cara Membuat Menu Navigasi Keren Versi Go! Blog Wednesday, November 13, 2013 Halo sobat, saya kembali lagi untuk memposting artikel nih, hehehe. Kali ini tentang tutorial blogger yaitu membuat Navigasi versi dari g-bloog.com . Singkat waktu bagi sobat yang ingin mencobanya yuk langsung saja liat caranya!! Demo Jika sobat tertarik melihat demonya, langsung saja yuk ikuti caranya!! Login Blogger Sebelum mencoba tutorial ini direkomendasikan untuk backup templatenya dahulu Masuk ke Dashboard > Template > Edit Html Cari kode ]]></b:skin> agar lebih mudah pencarian klik Ctrl + F Jika sudah ketemu masukkan kode dibawah ini tepat dibawah ]]></b:skin> #navix{margin:0;background:#000; background:-webkit-linear-gradient(top,#000,#333333); } ul#menu{ margin:0; padding:10px; } ul#menu li{ margin:0; display:inline-block; position:relative; } ul#menu li a:link, ul#menu li a:visited{ color:rgb(255,255,255); display:block; padding: 10px 15px 10px 15px; text-decoration:none; } ul#menu li a:hover{ background:#00aaff; border-radius:8px; } ul#menu li ul.submenu li:first-child a:after{ border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #666666; content:"; position:absolute; top:-15px; left:10px; z-index:9; } ul#menu li ul.submenu{ background:-webkit-linear-gradient(top,#666666,#333333); border-radius:10px; box-shadow:0 5px 10px 1px rgba(0,0,0,0,5); margin:10px; padding:5px; position:absolute; visibility:hidden; top:40px; opacity:0; -webkit-transition:all 0.3s ease-in-out; } ul#menu li ul.submenu li{ margin:0; display:block; } ul#menu li:hover ul.submenu{ margin:0; opacity:1; visibility:visible; } #nav, #nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav ul { background-color: #222222; border-color: #222222; border-radius: 0 5px 5px 5px; border-style: solid; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: 0; max-height: 0; overflow: hidden; position: absolute; top: 52px; transform-origin: 0 0 0; transition: all 100ms ease 0s; -webkit-transition: all 100ms ease 0s; -moz-transition: all 100ms ease 0s; -o-transition: all 100ms ease 0s; width: 180px; z-index: 60; } Kemudian sobat cari </head> Jika sudah ketemu sobat letakkan kode dibawah ini tepat dibawah </head> <div id="navix"> <ul id="menu"> <li><a href="http://www.klikzfajri.com/">Home</a></li> <li><a href="#">Anime</a></li> <li><a href="#">Cartoon</a></li> <li><a href="#">Game</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Lainnya</a></li> <li><a href="https://www.facebook.com/fjrklikerz">Like My Fans Page</a></li> <li><a href="#">About</a> <ul class="submenu"> <li><a href="#">Profil</a></li> <li><a href="#">Portofolio</a></li> </ul> </ul> </div> Tadaaa... Sudah selesai, Sekarang sobat lihat hasilnya, jika sobat ragu-ragu sobat klik pratinjau dulu jika sudah pas sobat simpan :) Sekian artikel hari ini yang dapat saya sampaikan semoga artikel ini bermanfaat bagi sobat XD. Halo sobat, saya kembali lagi untuk memposting artikel nih, hehehe. Kali ini tentang tutorial blogger yaitu membuat Navigasi versi dari g... Read More
Membuat Menu Tab View Di Blog Dengan CSS3 Sunday, November 10, 2013 Hallo sobat, saya kembali posting artikel di hari minggu ini postingan ini juga berkaitan dengan CSS3 hmmm.... pasti sobat heran kenapa hari ini saya posting CSS3 terus?? karena ide saya untuk memposting hari ini tentang CSS3 semua dan saya masih banyak menyimpan ide tentang artikel CSS3 nah jadi jika sobat ingin tau apa saja CSS3 yang akan saya bagikan sobat tetap kunjungi blog ini hehehe... Singkat waktu langsung saja yuk simak terus artikel ini :) Login Ke Blogger Masuk ke dashboard Tata Letak > Add Gadget > HTML/ JavaScript Masukkan kode berikut. <style> .tabs{ position:relative; margin:0 0 0 0; width:750px; } .tabs input{ position:absolute; z-index:1000; width:120px; height:40px; left:0px; top:0px; opacity:0; cursor:pointer; } .tabs input#tab-2{ left:120px; } .tabs label{ background:#00aaff; background:-webkit-linear-gradient(top, #00aaff, #018984); font-size:12px; line-height:40px; position:relative; padding:0 20px; float:left; display:block; width:90px; color:#385c5b; text-transform:uppercase; font-weight:bold; text-align:center; text-shadow:1px 1px 1px rgba(255,255,255,0.3); border-radius:3px 3px 0 0; box-shadow:2px 0px 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs label:after{ content:"; background:#fff; position:absolute; bottom:-2px; left:0; width:100%; height:2px; display:block; } .tabs input:hover + label{ background:#000; background:-webkit-linear-gradient(top, #000, #018984); color:#00aaff; } .tabs label:first-of-type{ z-index:4; box-shadow:2px 0 2px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.4); } .tab-label-2{ z-index:3; } .tabs input:checked + label{ background:#fff; z-index:6; } .clear-shadow{ clear:both; } .content{ background:#fff; position:relative; width:320px; height:150px; z-index:5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.4); border-radius:0 3px 3px 3px; } .content div{ position:absolute; top:0; left:0; padding:0; z-index:1; opacity:0; -webkit-transition:opacity linear 0.1s; } .tabs input.tab-selector-1:checked~.content .content-1, .tabs input.tab-selector-2:checked~.content .content-2{ z-index:100; opacity:1; -webkit-transition:opacity ease-out 0.2x 0.1s; } </style> <div class="box"> <section class="tabs"> <input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" /> <label class="tab-label-1" for="tab-1">Judul Tab 1</label> <input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" /> <label class="tab-label-2" for="tab-2">Judul Tab 2</label> <div class="clear-shadow"> </div> <div class="content"> <div class="content-1"> <ul> Masukkan Teks Tab 1 Disini </ul> </div> <div class="content-2"> <ul> Masukkan Teks Tab 2 Disini </ul> </div> </div> </section></div> Terakhir Simpan, lihat apa yang terjadi. Demo Judul Tab 1Judul Tab 2 Masukkan Teks Tab 1 Disini Masukkan Teks Tab 2 Disini Sekian artikel hari ini yang dapat saya sampaikan. Semoga artikel ini bermanfaat bagi sobat. Thanks buat G-bloog.com yang sudah buat Tutor ini. Hallo sobat, saya kembali posting artikel di hari minggu ini postingan ini juga berkaitan dengan CSS3 hmmm.... pasti sobat heran kenapa... Read More
Mengenal CSS3 Gradient Hallo semua, hari ini saya akan berbagi ilmu lagi nih tentang CSS3 jika sobat belum tau apa itu CSS3 setelah ini saya akan post apa itu CSS3 manfaatnya dan apa kegunaannya. Singkat waktu, saya akan mengenalkan sobat CSS3 Gradient. Sebelum ada teknologi CSS3, untuk membuat efek gradasi warna para desainer web menambahkan gambar pada website tersebut untuk mendapatkan efek tersebut. Karena harus menambahkan file berupa gambar maka performa website saat dimuat browser menjadi lebih berat. Akan tetapi seiring berjalannya waktu sekarang dengan adanya teknik CSS3 terbaru, sobat bisa membuat efek warna gradasi hanya dengan sedikit menambahkan kode pada CSS yang cukup satu baris saja. Berikut syntax CSSnya. background:-webkit-linear-gradient(arah, warna awal, warna akhir); Warna gradient ini berupa blok warna maka dari itu teknik ini diterapkan pada property background. Karena teknik gradient pada CSS versi yang ketiga ini masih termasuk baru dan bersifat eksperimental maka untuk memakai teknik ini pada browser chrome versi 22 yang penulis pakai harus menggunakan prefix atau awalan -webkit- pada nilai linear gradient. Prefix webkit juga diaplikasikan pada browser. Untuk melihat teknik Gradient ini dapat dlihat juga dari browser dengan berbagai prefix berikut keterangan prefix untuk setiap browser. Untuk browser Mozila Firefox tambahkan awalan -moz- Browser Opera menggunakan prefix -o- Sedangkan untuk Internet Explorer versi 10 menggunakan prefix -ms- Sedikit penjelasan, untuk arah adalah arah dari gradient tersebut, apakah dari atas ke bawah atau top, dari samping kiri ke kanan atau left, dan juga dapat diisi dengan angka sudut dari 0 derajat sampai dengan 360 derajat. Warna awal yaitu warna permulaan gradient dibuat dan warna akhir adalah warna ujung untuk gradient. Berikut Contoh CSS3 Gradient Contoh Gradient 1 Contoh Gradient 2 Contoh Gradient 3 Contoh Gradient 4 Contoh Gradient 5 Sobat bisa lihat contoh diatas jika beberapa efek gradient tidak terlihat berarti versi chrome sobat masih versi lama. Agar efek CSS3 ini dapat dilihat sobat perlu Chrome versi terbaru untuk mendapatkan chrome versi terbaru sobat bisa masuk https://www.google.com/intl/en/chrome/ Berikut Penerapan CSS3 Gradient CSS Gradient 1 .gradient1{ background:-webkit-linear-gradient(top, black, white); background:-moz-linear-gradient(top, black, white); background:-o-linear-gradient(top, black, white); background:-ms-linear-gradient(top, black, white);} Gradient 2 .gradient2{ background:-webkit-linear-gradient(bottom, black, white); background:-moz-linear-gradient(bottom, black, white); background:-o-linear-gradient(bottom, black, white); background:-ms-linear-gradient(bottom, black, white);} Gradient 3 .gradient3{ background:-webkit-linear-gradient(left, black, white); background:-moz-linear-gradient(left, black, white); background:-o-linear-gradient(left, black, white); background:-ms-linear-gradient(left, black, white);} Gradient 4 .gradient4{ background:-webkit-linear-gradient(right, black, white); background:-moz-linear-gradient(right, black, white); background:-o-linear-gradient(right, black, white); background:-ms-linear-gradient(right, black, white);} Gradient 5 .gradient5{ background:-webkit-linear-gradient(60deg, black, white); background:-moz-linear-gradient(60deg, black, white); background:-o-linear-gradient(60deg, black, white); background:-ms-linear-gradient(60deg, black, white);} HTML Gradient 1 <div class="gradient1"> Contoh Gradient 1</div> Gradient 2 <div class="gradient2"> Contoh Gradient 2</div> Gradient 3 <div class="gradient3"> Contoh Gradient 3</div> Gradient 4 <div class="gradient4"> Contoh Gradient 4</div> Gradient 5 <div class="gradient5"> Contoh Gradient 5</div> Untuk mencobanya saya sarankan menggunakan Notepad++ untuk download sobat bisa menuju http://notepad-plus-plus.org/ Sekian artikel yang dapat saya sampaikan hari ini semoga bermanfaat bagi sobat ^_^ selamat berkarya dan mencoba, Semoga Sukses. Ori text by G-bloog.com. Hallo semua, hari ini saya akan berbagi ilmu lagi nih tentang CSS3 jika sobat belum tau apa itu CSS3 setelah ini saya akan post apa itu C... Read More
Cara Membuat DVD-CD Style dengan CSS3 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 !! Sebelumnya saya sangat berterima kasih kepada G-bloog.com yang udah buat tutor 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/AVvXsEiWQcnKzfSo4_WNMHUZDTPYdysOHL_ST9W16gzBTWnmT9J2S4yrwVjW0Ge30LHHyAnMkVQUQ8xOeHpnXVVrenvTJ_cSwKJDw6CViFUsDNHNgPs94ZMaFTh623qqs7n4boBm-5hAp3SXBWA/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/AVvXsEgpcL6sFbyFd1HR3nwozVNuCNTdMbeo9etkWDnLMrq0IjJeQhS_yC0Gq5Ap5KrZTxNNXtPOV-2EQtlwlIeGub-uohtaEfxaH269sINjRPU1N63bD4fbcAtLvcuUELnUSc_t80TFcvfG-q0/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/AVvXsEiMpIDEddzchhGy9f6ce9aryIfP81YlDsLMn6Iln22Z5PCoeSixxZck9qsL2WEsp7sYrNej5EPD9YfHhprSsXxUiI7qc6EaOmoK_LtNEAL90ge_f671Ah62dcBwiWMUJIqC-YCo6JSskzQ/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/AVvXsEgNxdoQRGTi7-zYFEo1rJUjtqoP-lCKR9cbAgU3Fgft50Gs2seupFjiB0qasF21fX8BTyvmryUPotxR8qx1E6b4UwY7sPzcGxTIa6Fy4ny1qV9ZlQ_TMXmTJC6usZVHeTCmsmMMIhuxBWw/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 DVD Style CD Style CD Style Hallo sobat, dihari minggu ini saya akan berbagi ilmu CSS3 untuk sobat yang akan membuat blog sobat menjadi lebih menarik, apalagi blog s... Read More