Membuat Navigasi Menu Kipas Dengan CSS3

<div style="text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8AEIk3VVYW_0b-gmv-lqpvXvuKgpXmzW4AGA2e4sCtyvzmWB1-nRo7VUwjHQILnfKm9QK0rGoxnISc_Tj5a8JCwhRCNlIhbK1NT9O8IJZ3rDwVGWlKLkbcKhrM64C-bPHgX9_Dcikt8/s1600/cool-navigation-menu.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8AEIk3VVYW_0b-gmv-lqpvXvuKgpXmzW4AGA2e4sCtyvzmWB1-nRo7VUwjHQILnfKm9QK0rGoxnISc_Tj5a8JCwhRCNlIhbK1NT9O8IJZ3rDwVGWlKLkbcKhrM64C-bPHgX9_Dcikt8/s200/cool-navigation-menu.png" width="197" /></a><b><a href="http://www.klikzfajri.net/2013/11/membuat-navigasi-menu-kipas-dengan-css3.html" rel="nofollow">Membuat Navigasi Menu Kipas Dengan CSS3</a></b> - Kali ini Fajri akan berbagi tentang <b>CSS3</b> lagi yaitu membuat <b>menu navigasi berbentuk kipas</b> jika sobat belum tau bentuknya seperti apa?? oke saya akan tunjukkan demonya. Jika sobat berminat jangan close kan layar browser anda heheh XD.d</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Tutorial ini sebelumnya saya dapatkan dari Agan <a href="http://g-bloog.com/">G-Bloog.com</a>.</div> <div style="text-align: justify;"> Oke langsung aja ya kita ke TKP.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;">  </div> <br /> <h4> Demo</h4> <br /> <style>/* =============================================================== 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%;} </style> <br /> <div class="menuHolder"> <div class="menuWindow"> <ul class="p1"> <li class="s1"><a href="http://www.blogger.com/blogger.g?blogID=2035073200559060780#url">Menu</a> <ul class="p2"> <li class="s2"><a href="http://www.klikzfajri.com/">Home</a></li> <li class="s2"><a href="http://www.klikzfajri.com/">Services</a> <ul class="p3 a3"> <li><a href="http://zifana.com/">Printing</a></li> <li><a href="http://www.klikzfajri.com/">Editing</a></li> <li><a href="http://www.klikzfajri.com/">Storage</a></li> </ul> </li> <li class="s2"><a href="http://www.blogger.com/blogger.g?blogID=2035073200559060780#url">Contacts</a> <ul class="p3 a6"> <li><a href="http://www.klikzfajri.com/">Support</a></li> <li><a href="http://www.klikzfajri.com/">Sales</a></li> <li><a href="http://www.klikzfajri.com/">Buying</a></li> <li><a href="http://www.klikzfajri.com/">Photographers</a></li> <li><a href="http://www.klikzfajri.com/">Stockist</a></li> <li><a href="http://www.klikzfajri.com/">General</a></li> </ul> </li> <li class="s2"><a href="http://www.klikzfajri.com/">Stores</a> <ul class="p3 a3"> <li><a href="http://www.klikzfajri.com/">South Region</a></li> <li><a href="http://www.klikzfajri.com/">North Region</a></li> <li><a href="http://www.klikzfajri.com/">Central Region</a></li> </ul> </li> <li class="s2"><a href="http://www.klikzfajri.com/">Contact Us</a> <ul class="p3 a3"> <li><a href="http://www.klikzfajri.com/">Email</a></li> <li><a href="http://www.klikzfajri.com/">Post</a></li> <li><a href="http://www.klikzfajri.com/">Telephone</a></li> </ul> </li> <li class="s2 b6"><a href="http://www.klikzfajri.com/">Sales</a> <ul class="p3 a5"> <li><a href="http://www.klikzfajri.com/">DSLR Cameras</a></li> <li><a href="http://www.klikzfajri.com/">Lenses</a></li> <li><a href="http://www.klikzfajri.com/">Flash Guns</a></li> <li><a href="http://www.klikzfajri.com/">Tripods</a></li> <li><a href="http://www.klikzfajri.com/">Filters</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <br /> <br /> Jika sobat sudah melihat demonya seperti diatas yuk sekarang waktunya untuk memasang XD<br /> <br /> <h4> CSS</h4> <blockquote class="tr_bq"> /* ===============================================================<br /> copyright � zifana.com<br /> This stylesheet and the associated (x)html may be modified in any<br /> way to fit your requirements.<br /> =================================================================== */<br /> .menuHolder {width:100px; height:100px; margin:50px 0 250px 10px; position:relative; z-index:100;}<br /> .menuHolder ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;}<br /> .menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}<br /> .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);<br /> -webkit-transform-origin:0 0;<br /> -moz-transform-origin:0 0;<br /> -ms-transform-origin:0 0;<br /> -o-transform-origin:0 0;<br /> transform-origin:0 0;<br /> }<br /> .menuHolder ul.p1 li {position:absolute; left:0; top:0;}<br /> .menuHolder ul.p2 {z-index:-1;}<br /> .menuHolder ul.p3 {z-index:-1;}<br /> .menuHolder li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;}<br /> .menuHolder li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;}<br /> .menuHolder ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;}<br /> .menuHolder ul ul {<br /> -webkit-transform-origin:0 0;<br /> -moz-transform-origin:0 0;<br /> -ms-transform-origin:0 0;<br /> -o-transform-origin:0 0;<br /> transform-origin:0 0;<br /> -webkit-transform:rotate(90deg);<br /> -moz-transform:rotateZ(90deg);<br /> -ms-transform:rotate(90deg);<br /> -o-transform:rotate(90deg);<br /> transform:rotate(90deg);<br /> -webkit-transition:1s;<br /> -moz-transition:1s;<br /> -ms-transition:1s;<br /> -o-transition:1s;<br /> transition:1s;<br /> }<br /> .menuHolder li.s2:nth-of-type(6) > a {background:#888;<br /> -webkit-transform:rotate(75deg);<br /> -moz-transform:rotateZ(75deg);<br /> -ms-transform:rotate(75deg);<br /> -o-transform:rotate(75deg);<br /> transform:rotate(75deg);<br /> }<br /> .menuHolder li.s2:nth-of-type(5) > a {background:#999;<br /> -webkit-transform:rotate(60deg);<br /> -moz-transform:rotateZ(60deg);<br /> -ms-transform:rotate(60deg);<br /> -o-transform:rotate(60deg);<br /> transform:rotate(60deg);<br /> }<br /> .menuHolder li.s2:nth-of-type(4) > a {background:#aaa;<br /> -webkit-transform:rotate(45deg);<br /> -moz-transform:rotateZ(45deg);<br /> -ms-transform:rotate(45deg);<br /> -o-transform:rotate(45deg);<br /> transform:rotate(45deg);<br /> }<br /> .menuHolder li.s2:nth-of-type(3) > a {background:#bbb;<br /> -webkit-transform:rotate(30deg);<br /> -moz-transform:rotateZ(30deg);<br /> -ms-transform:rotate(30deg);<br /> -o-transform:rotate(30deg);<br /> transform:rotate(30deg);<br /> }<br /> .menuHolder li.s2:nth-of-type(2) > a {background:#ccc;<br /> -webkit-transform:rotate(15deg);<br /> -moz-transform:rotateZ(15deg);<br /> -ms-transform:rotate(15deg);<br /> -o-transform:rotate(15deg);<br /> transform:rotate(15deg);<br /> }<br /> <br /> .menuHolder .a6 li:nth-of-type(6) > a {background:#444;<br /> -webkit-transform:rotate(75deg);<br /> -moz-transform:rotateZ(75deg);<br /> -ms-transform:rotate(75deg);<br /> -o-transform:rotate(75deg);<br /> transform:rotate(75deg);<br /> }<br /> .menuHolder .a6 li:nth-of-type(5) > a {background:#555;<br /> -webkit-transform:rotate(60deg);<br /> -moz-transform:rotateZ(60deg);<br /> -ms-transform:rotate(60deg);<br /> -o-transform:rotate(60deg);<br /> transform:rotate(60deg);<br /> }<br /> .menuHolder .a6 li:nth-of-type(4) > a {background:#666;<br /> -webkit-transform:rotate(45deg);<br /> -moz-transform:rotateZ(45deg);<br /> -ms-transform:rotate(45deg);<br /> -o-transform:rotate(45deg);<br /> transform:rotate(45deg);<br /> }<br /> .menuHolder .a6 li:nth-of-type(3) > a {background:#777;<br /> -webkit-transform:rotate(30deg);<br /> -moz-transform:rotateZ(30deg);<br /> -ms-transform:rotate(30deg);<br /> -o-transform:rotate(30deg);<br /> transform:rotate(30deg);<br /> }<br /> .menuHolder .a6 li:nth-of-type(2) > a {background:#888;<br /> -webkit-transform:rotate(15deg);<br /> -moz-transform:rotateZ(15deg);<br /> -ms-transform:rotate(15deg);<br /> -o-transform:rotate(15deg);<br /> transform:rotate(15deg);<br /> }<br /> <br /> .menuHolder .a5 li:nth-of-type(5) > a {background:#555;<br /> -webkit-transform:rotate(72deg);<br /> -moz-transform:rotateZ(72deg);<br /> -ms-transform:rotate(72deg);<br /> -o-transform:rotate(72deg);<br /> transform:rotate(72deg);<br /> }<br /> .menuHolder .a5 li:nth-of-type(4) > a {background:#666;<br /> -webkit-transform:rotate(54deg);<br /> -moz-transform:rotateZ(54deg);<br /> -ms-transform:rotate(54deg);<br /> -o-transform:rotate(54deg);<br /> transform:rotate(54deg);<br /> }<br /> .menuHolder .a5 li:nth-of-type(3) > a {background:#777;<br /> -webkit-transform:rotate(36deg);<br /> -moz-transform:rotateZ(36deg);<br /> -ms-transform:rotate(36deg);<br /> -o-transform:rotate(36deg);<br /> transform:rotate(36deg);<br /> }<br /> .menuHolder .a5 li:nth-of-type(2) > a {background:#888;<br /> -webkit-transform:rotate(18deg);<br /> -moz-transform:rotateZ(18deg);<br /> -ms-transform:rotate(18deg);<br /> -o-transform:rotate(18deg);<br /> transform:rotate(18deg);<br /> }<br /> <br /> .menuHolder .a3 li:nth-of-type(3) > a {background:#777;<br /> -webkit-transform:rotate(60deg);<br /> -moz-transform:rotateZ(60deg);<br /> -ms-transform:rotate(60deg);<br /> -o-transform:rotate(60deg);<br /> transform:rotate(60deg);<br /> }<br /> .menuHolder .a3 li:nth-of-type(2) > a {background:#888;<br /> -webkit-transform:rotate(30deg);<br /> -moz-transform:rotateZ(30deg);<br /> -ms-transform:rotate(30deg);<br /> -o-transform:rotate(30deg);<br /> transform:rotate(30deg);<br /> }<br /> <br /> .menuHolder li.s1:hover ul.p2 {<br /> -webkit-transform:rotate(0deg);<br /> -moz-transform:rotateZ(0deg);<br /> -ms-transform:rotate(0deg);<br /> -o-transform:rotate(0deg);<br /> transform:rotate(0deg);<br /> }<br /> .menuHolder li.s2:hover ul.p3 {<br /> -webkit-transform:rotate(0deg);<br /> -moz-transform:rotateZ(0deg);<br /> -ms-transform:rotate(0deg);<br /> -o-transform:rotate(0deg);<br /> transform:rotate(0deg);<br /> }<br /> .menuHolder ul li:hover > a {background:#f00; color:#fff;}<br /> .menuHolder li.s2:hover > a {background:#d00; color:#fff;}<br /> .menuHolder .a6 li:hover > a {background:#b00; color:#fff;}<br /> .menuHolder .a5 li:hover > a {background:#b00; color:#fff;}<br /> .menuHolder .a3 li:hover > a {background:#b00; color:#fff;}<br /> <br /> .menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100;<br /> -webkit-transition:0s 1s;<br /> -moz-transition:0s 1s;<br /> -ms-transition:0s 1s;<br /> -o-transition:0s 1s;<br /> transition:0s 1s;<br /> }<br /> .menuHolder:hover .menuWindow {width:310px; height:310px;<br /> -webkit-transition:0s 0s;<br /> -moz-transition:0s 0s;<br /> -ms-transition:0s 0s;<br /> -o-transition:0s 0s;<br /> transition:0s 0s;<br /> }<br /> .menuHolder span {display:block;<br /> -webkit-transform:rotate(5deg);<br /> -moz-transform:rotateZ(5deg);<br /> -ms-transform:rotate(5deg);<br /> -o-transform:rotate(5deg);<br /> transform:rotate(5deg);<br /> }<br /> .menuHolder ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;}<br /> .menuHolder:hover ~ img.close {width:100%; height:100%;}</blockquote> <br /> <h4> HTML</h4> <blockquote class="tr_bq"> <div class="menuHolder"><div class="menuWindow"><br /> <ul class="p1"><br />     <li class="s1"><a href="<span style="background-color: #ea9999;">#url</span>">Menu</a><br />         <ul class="p2"><br />             <li class="s2"><a href="<span style="background-color: #ea9999;">http://zifana.com</span>"><span>Home</span></a></li><br />             <li class="s2"><a href="<span style="background-color: #ea9999;">#url</span>"><span>Services</span></a><br />                 <ul class="p3 a3"><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Printing</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Editing</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Storage</a></li><br />                 </ul><br />             </li><br />             <li class="s2"><a href="<span style="background-color: #ea9999;">#url</span>"><span>Contacts</span></a><br />                 <ul class="p3 a6"><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Support</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Sales</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Buying</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Photographers</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Stockist</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">General</a></li><br />                 </ul><br />             </li><br />             <li class="s2"><a href="<span style="background-color: #ea9999;">#url</span>"><span>Stores</span></a><br />                 <ul class="p3 a3"><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">South Region</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">North Region</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Central Region</a></li><br />                 </ul><br />             </li><br />             <li class="s2"><a href="<span style="background-color: #ea9999;">#url</span>"><span>Contact Us</span></a><br />                 <ul class="p3 a3"><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Email</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Post</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Telephone</a></li><br />                 </ul><br />             </li><br />             <li class="s2 b6"><a href="<span style="background-color: #ea9999;">#url</span>"><span>Sales</span></a><br />                 <ul class="p3 a5"><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">DSLR Cameras</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Lenses</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Flash Guns</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Tripods</a></li><br />                     <li><a href="<span style="background-color: #ea9999;">http://zifana.com</span>">Filters</a></li><br />                 </ul><br />             </li><br />         </ul><br />     </li><br /> </ul><br /> </div></div></blockquote> <h4> Keterangan</h4> <div style="text-align: justify;"> Sobat bisa mengganti tulisan yang saya beri warna merah muda dengan link yang sobat inginkan.</div> <br /> <div style="text-align: justify;"> Nah sekian pembahasan artikel yang saya bagikan hari ini tentang <b>CSS3</b> semoga artikel yang saya bagikan bermanfaat bagi sobat semua. Jika ada pertanyaan silahkan berkomentar di bawah artikel ini, Selamat melanjutkan liburan sobat ^_^</div> <br /> <style>.sumber{background:#fff6bf;color:#514721;font:bold 15px Trebuchet MS;font-size:11px;border-color:#ffd324;margin:5px 0;border:2px solid #ddd;padding:6px;text-align:left} </style> <br /> <div class="sumber"> Sumber Script:http://zifana.com/2013/07/kipas-navigasi-menu-keren-dengan-css3/</div>

Membuat Navigasi Menu Kipas Dengan CSS3 - Kali ini Fajri akan berbagi tentang CSS3 lagi yaitu membu…

Read More

Cara Membuat Menu Navigasi Keren Versi Go! Blog

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoM-IjYbBKzcm3OI1_qbr_o8fz6vzcQlwTCIp-aXSUN8bEhMGp-fIOnU1NFCJLtxMdccv32U3taG7wEOfOM_Rc2-d4i5kRh4uHCiE0TSZD3Xuex1gpPUcXqGYPFWuvYG9UZHGvjoGFBkI/s1600/navigasi.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoM-IjYbBKzcm3OI1_qbr_o8fz6vzcQlwTCIp-aXSUN8bEhMGp-fIOnU1NFCJLtxMdccv32U3taG7wEOfOM_Rc2-d4i5kRh4uHCiE0TSZD3Xuex1gpPUcXqGYPFWuvYG9UZHGvjoGFBkI/s200/navigasi.png" width="200" /></a></div> <div style="text-align: justify;"> Halo sobat, saya kembali lagi untuk memposting artikel nih, hehehe. Kali ini tentang tutorial blogger yaitu membuat Navigasi versi dari <a href="http://g-bloog.com/">g-bloog.com</a> . Singkat waktu bagi sobat yang ingin mencobanya yuk langsung saja liat caranya!!</div> <br /> <b><span style="font-size: large;"><a href="http://gbloog-project.blogspot.com/2013/11/navigasi-by-go-blog.html">Demo</a></span></b><br /> <b><br /></b><b><br /></b><b><br /></b><br /> <br /> <br /> Jika sobat tertarik melihat demonya, langsung saja yuk ikuti caranya!!<br /> <br /> <ul> <li>Login Blogger</li> <li>Sebelum mencoba tutorial ini direkomendasikan untuk backup templatenya dahulu</li> <li>Masuk ke Dashboard > Template > Edit Html</li> <li>Cari kode <code> ]]></b:skin></code> agar lebih mudah pencarian klik Ctrl + F</li> <li>Jika sudah ketemu masukkan kode dibawah ini tepat dibawah <code> ]]></b:skin></code></li> </ul> <br /> <div> <blockquote class="tr_bq"> #navix{margin:0;background:#000;<br /> background:-webkit-linear-gradient(top,#000,#333333);<br /> }<br /> ul#menu{<br /> margin:0;<br /> padding:10px;<br /> }<br /> ul#menu li{<br /> margin:0;<br /> display:inline-block;<br /> position:relative;<br /> }<br /> ul#menu li a:link, ul#menu li a:visited{<br /> color:rgb(255,255,255);<br /> display:block;<br /> padding: 10px 15px 10px 15px;<br /> text-decoration:none;<br /> }<br /> ul#menu li a:hover{<br /> background:#00aaff;<br /> border-radius:8px;<br /> }<br /> ul#menu li ul.submenu li:first-child a:after{<br /> border-left:10px solid transparent;<br /> border-right:10px solid transparent;<br /> border-bottom:10px solid #666666;<br /> content:";<br /> position:absolute;<br /> top:-15px;<br /> left:10px;<br /> z-index:9;<br /> }<br /> ul#menu li ul.submenu{<br /> background:-webkit-linear-gradient(top,#666666,#333333);<br /> border-radius:10px;<br /> box-shadow:0 5px 10px 1px rgba(0,0,0,0,5);<br /> margin:10px;<br /> padding:5px;<br /> position:absolute;<br /> visibility:hidden;<br /> top:40px;<br /> opacity:0;<br /> -webkit-transition:all 0.3s ease-in-out;<br /> }<br /> ul#menu li ul.submenu li{<br /> margin:0;<br /> display:block;<br /> }<br /> ul#menu li:hover ul.submenu{<br /> margin:0;<br /> opacity:1;<br /> visibility:visible;<br /> }<br /> #nav, #nav ul {<br />     list-style: none outside none;<br />     margin: 0;<br />     padding: 0;<br /> }<br /> #nav ul {<br />     background-color: #222222;<br />     border-color: #222222;<br />     border-radius: 0 5px 5px 5px;<br />     border-style: solid;<br />     border-width: 0 1px 1px;<br />     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);<br />     left: 0;<br />     max-height: 0;<br />     overflow: hidden;<br />     position: absolute;<br />     top: 52px;<br />     transform-origin: 0 0 0;<br />     transition: all 100ms ease 0s;<br />  -webkit-transition: all 100ms ease 0s;<br />  -moz-transition: all 100ms ease 0s;<br />  -o-transition: all 100ms ease 0s;<br />     width: 180px;<br />     z-index: 60;<br /> }</blockquote> </div> <div> <br /></div> <div> <ul> <li>Kemudian sobat cari <code></head></code></li> <li>Jika sudah ketemu sobat letakkan kode dibawah ini tepat dibawah <code> </head></code></li> </ul> <div> <div> <blockquote class="tr_bq"> <div id="navix"><br /> <ul id="menu"><br /> <li><a href="http://www.klikzfajri.com/">Home</a></li><br /> <li><a href="#">Anime</a></li><br /> <li><a href="#">Cartoon</a></li><br /> <li><a href="#">Game</a></li><br /> <li><a href="#">Sport</a></li><br /> <li><a href="#">Lainnya</a></li><br /> <li><a href="https://www.facebook.com/fjrklikerz">Like My Fans Page</a></li><br /> <li><a href="#">About</a><br /> <ul class="submenu"><br /> <li><a href="#">Profil</a></li><br /> <li><a href="#">Portofolio</a></li><br /> </ul><br /> </ul><br /> </div></blockquote> </div> </div> </div> <div> <br /></div> <div> <ul style="text-align: justify;"> <li>Tadaaa... Sudah selesai, Sekarang sobat lihat hasilnya, jika sobat ragu-ragu sobat klik pratinjau dulu jika sudah pas sobat simpan :)</li> </ul> <div> Sekian artikel hari ini yang dapat saya sampaikan semoga artikel ini bermanfaat bagi sobat XD. </div> </div>

Halo sobat, saya kembali lagi untuk memposting artikel nih, hehehe. Kali ini tentang tutorial blogg…

Read More

Membuat Menu Tab View Di Blog Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9Q9vFMyhUu5xAP0_vCnOUBuL3b8eJSOszO0VfDflho-KazBm4qsTPWyDiLI8mCJOWO6kWi7Q-nByEsWpVQiZIluZlg5tWe9wf_lFJRGJtVA2_qdj2C6lnkxuU0p3k0gBm2fm1OOML-s/s1600/ilmiah.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9Q9vFMyhUu5xAP0_vCnOUBuL3b8eJSOszO0VfDflho-KazBm4qsTPWyDiLI8mCJOWO6kWi7Q-nByEsWpVQiZIluZlg5tWe9wf_lFJRGJtVA2_qdj2C6lnkxuU0p3k0gBm2fm1OOML-s/s320/ilmiah.png" width="320" /></a></div> <div style="text-align: justify;"> 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 :)</div> <br /> <br /> <ul> <li>Login Ke Blogger</li> <li>Masuk ke dashboard</li> <li>Tata Letak > Add Gadget > HTML/ JavaScript</li> <li>Masukkan kode berikut.</li> </ul> <div> <blockquote class="tr_bq"> <br /> <style><br /> .tabs{<br /> position:relative;<br /> margin:0 0 0 0;<br /> width:750px;<br /> }<br /> .tabs input{<br /> position:absolute;<br /> z-index:1000;<br /> width:120px;<br /> height:40px;<br /> left:0px;<br /> top:0px;<br /> opacity:0;<br /> cursor:pointer;<br /> }<br /> .tabs input#tab-2{<br /> left:120px;<br /> }<br /> .tabs label{<br /> background:#00aaff;<br /> background:-webkit-linear-gradient(top, #00aaff, #018984);<br /> font-size:12px;<br /> line-height:40px;<br /> position:relative;<br /> padding:0 20px;<br /> float:left;<br /> display:block;<br /> width:90px;<br /> color:#385c5b;<br /> text-transform:uppercase;<br /> font-weight:bold;<br /> text-align:center;<br /> text-shadow:1px 1px 1px rgba(255,255,255,0.3);<br /> border-radius:3px 3px 0 0;<br /> box-shadow:2px 0px 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);<br /> }<br /> .tabs label:after{<br /> content:";<br /> background:#fff;<br /> position:absolute;<br /> bottom:-2px;<br /> left:0;<br /> width:100%;<br /> height:2px;<br /> display:block;<br /> }<br /> .tabs input:hover + label{<br /> background:#000;<br /> background:-webkit-linear-gradient(top, #000, #018984);<br /> color:#00aaff;<br /> }<br /> .tabs label:first-of-type{<br /> z-index:4;<br /> box-shadow:2px 0 2px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.4);<br /> }<br /> .tab-label-2{<br /> z-index:3;<br /> }<br /> .tabs input:checked + label{<br /> background:#fff;<br /> z-index:6;<br /> }<br /> .clear-shadow{<br /> clear:both;<br /> }<br /> .content{<br /> background:#fff;<br /> position:relative;<br /> width:320px;<br /> height:150px;<br /> z-index:5;<br /> box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.4);<br /> border-radius:0 3px 3px 3px;<br /> }<br /> .content div{<br /> position:absolute;<br /> top:0;<br /> left:0;<br /> padding:0;<br /> z-index:1;<br /> opacity:0;<br /> -webkit-transition:opacity linear 0.1s;<br /> }<br /> .tabs input.tab-selector-1:checked~.content .content-1,<br /> .tabs input.tab-selector-2:checked~.content .content-2{<br /> z-index:100;<br /> opacity:1;<br /> -webkit-transition:opacity ease-out 0.2x 0.1s;<br /> }<br /> </style><br /> <div class="box"><br /> <section class="tabs"><br /> <input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" /><br /> <label class="tab-label-1" for="tab-1">Judul Tab 1</label><br /> <input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" /><br /> <label class="tab-label-2" for="tab-2">Judul Tab 2</label><br /> <div class="clear-shadow"><br /> </div><br /> <div class="content"><br /> <div class="content-1"><br /> <ul><br /> Masukkan Teks Tab 1 Disini<br /> </ul><br /> </div><br /> <div class="content-2"><br /> <ul><br /> Masukkan Teks Tab 2 Disini<br /> </ul><br /> </div><br /> </div><br /> </section></div></blockquote> </div> <br /> <br /> <ul> <li>Terakhir Simpan, lihat apa yang terjadi.</li> </ul> <div> <br /></div> <h4> Demo</h4> <div> <br /></div> <br /> <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> <br /> <div class="box"> <br /> <br /> <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> <br /> <br /> Sekian artikel hari ini yang dapat saya sampaikan. Semoga artikel ini bermanfaat bagi sobat. Thanks buat <a href="http://g-bloog.com/">G-bloog.com</a> yang sudah buat Tutor ini.

Hallo sobat, saya kembali posting artikel di hari minggu ini postingan ini juga berkaitan dengan CS…

Read More

Mengenal CSS3 Gradient

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TvWWW1JQTzTEwZ3mLKRwWWyYhj9JzeYzqOC9lLY24QQ5hWhzzX5AIPR-JqfnSQ4ewOKuCiMLYoXtJrmPu3sBf46VjJVnyM5GMbAOQJ2ZbFoOFx3U7Y8ARxRl10vO5HI2Lu7-MmVAyx4/s1600/gradient-h.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TvWWW1JQTzTEwZ3mLKRwWWyYhj9JzeYzqOC9lLY24QQ5hWhzzX5AIPR-JqfnSQ4ewOKuCiMLYoXtJrmPu3sBf46VjJVnyM5GMbAOQJ2ZbFoOFx3U7Y8ARxRl10vO5HI2Lu7-MmVAyx4/s320/gradient-h.png" width="320" /></a></div> <div style="text-align: justify;"> 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.<style type="text/css">.gradient1, .gradient2, .gradient3, .gradient4, .gradient5 { width:500px; height:100px; margin:10px auto 10px auto; padding:5px; font-family:nova square;cursive; text-align:left; font-size:43px;} .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); } .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); } .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); } .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); } .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); } </style></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> 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.</div> <div style="text-align: justify;"> <blockquote class="tr_bq"> background:-webkit-linear-gradient(arah, warna awal, warna akhir);</blockquote> </div> <div style="text-align: justify;"> 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<b> chrome versi 22</b> yang penulis pakai harus menggunakan prefix atau awalan <b>-webkit-</b> 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.</div> <br /> <ul> <li>Untuk browser <b>Mozila Firefox</b> tambahkan awalan <b>-moz-</b></li> <li>Browser <b>Opera</b> menggunakan prefix <b>-o-</b></li> <li>Sedangkan untuk <b>Internet Explorer versi 10</b> menggunakan prefix <b>-ms-</b></li> </ul> <br /> <div style="text-align: justify;"> 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.</div> <div style="text-align: justify;"> Warna awal yaitu warna permulaan gradient dibuat dan warna akhir adalah warna ujung untuk gradient.</div> <br /> <h4> Berikut Contoh CSS3 Gradient</h4> <div> <br /></div> <div class="gradient1"> Contoh Gradient 1</div> <div class="gradient2"> Contoh Gradient 2</div> <div class="gradient3"> Contoh Gradient 3</div> <div class="gradient4"> Contoh Gradient 4</div> <div class="gradient5"> Contoh Gradient 5</div> <br /> <div style="text-align: justify;"> 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 <a href="https://www.google.com/intl/en/chrome/">https://www.google.com/intl/en/chrome/</a></div> <br /> <h4> Berikut Penerapan CSS3 Gradient</h4> <div> <b>CSS</b><br /> <br /> <br /> <ul> <li>Gradient 1</li> </ul> </div> <div> <blockquote class="tr_bq"> .gradient1{<br /> background:-webkit-linear-gradient(top, black, white);<br /> background:-moz-linear-gradient(top, black, white);<br /> background:-o-linear-gradient(top, black, white);<br /> background:-ms-linear-gradient(top, black, white);}</blockquote> <br /> <ul> <li>Gradient 2</li> </ul> <br /> <blockquote class="tr_bq"> .gradient2{<br /> background:-webkit-linear-gradient(bottom, black, white);<br /> background:-moz-linear-gradient(bottom, black, white);<br /> background:-o-linear-gradient(bottom, black, white);<br /> background:-ms-linear-gradient(bottom, black, white);}</blockquote> <br /> <ul> <li>Gradient 3</li> </ul> <br /> <blockquote class="tr_bq"> .gradient3{<br /> background:-webkit-linear-gradient(left, black, white);<br /> background:-moz-linear-gradient(left, black, white);<br /> background:-o-linear-gradient(left, black, white);<br /> background:-ms-linear-gradient(left, black, white);}</blockquote> <br /> <ul> <li>Gradient 4</li> </ul> <br /> <blockquote class="tr_bq"> .gradient4{<br /> background:-webkit-linear-gradient(right, black, white);<br /> background:-moz-linear-gradient(right, black, white);<br /> background:-o-linear-gradient(right, black, white);<br /> background:-ms-linear-gradient(right, black, white);}</blockquote> <br /> <ul> <li>Gradient 5</li> </ul> <br /> <blockquote class="tr_bq"> .gradient5{<br /> background:-webkit-linear-gradient(60deg, black, white);<br /> background:-moz-linear-gradient(60deg, black, white);<br /> background:-o-linear-gradient(60deg, black, white);<br /> background:-ms-linear-gradient(60deg, black, white);}</blockquote> <br /> <b>HTML</b><br /> <br /> <ul> <li>Gradient 1</li> </ul> <br /> <blockquote class="tr_bq"> <div class="gradient1"><br /> Contoh Gradient 1</div></blockquote> <br /> <ul> <li>Gradient 2</li> </ul> <br /> <blockquote class="tr_bq"> <div class="gradient2"><br /> Contoh Gradient 2</div></blockquote> <br /> <ul> <li>Gradient 3</li> </ul> <br /> <blockquote class="tr_bq"> <div class="gradient3"><br /> Contoh Gradient 3</div></blockquote> <br /> <ul> <li>Gradient 4</li> </ul> <br /> <blockquote class="tr_bq"> <div class="gradient4"><br /> Contoh Gradient 4</div></blockquote> <br /> <ul> <li>Gradient 5</li> </ul> <br /> <blockquote class="tr_bq"> <div class="gradient5"><br /> Contoh Gradient 5</div></blockquote> <br /> <div style="text-align: justify;"> Untuk mencobanya saya sarankan menggunakan Notepad++  untuk download sobat bisa menuju <a href="http://notepad-plus-plus.org/">http://notepad-plus-plus.org/</a></div> <br /> <div style="text-align: justify;"> Sekian artikel yang dapat saya sampaikan hari ini semoga bermanfaat bagi sobat ^_^ selamat berkarya dan mencoba, Semoga Sukses.</div> <div style="text-align: justify;"> Ori text by <a href="http://g-bloog.com/">G-bloog.com</a>. </div> </div>

Hallo semua, hari ini saya akan berbagi ilmu lagi nih tentang CSS3 jika sobat belum tau apa itu CSS…

Read More

Cara Membuat DVD-CD Style dengan CSS3

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu0U4yK-dHmb6yoyzgglaIYV8awNtx1Fifk0NTCwURckIRKarGba0_hBk02iwlJndzjUAgc9FIIF-5XhGg9HRXk8C7hcVkFeGWPjNViJaCT3AkLEUQMLbNBvhUS_2SqOlVUXxi1VOS2F8/s1600/dvd+-+cd+style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu0U4yK-dHmb6yoyzgglaIYV8awNtx1Fifk0NTCwURckIRKarGba0_hBk02iwlJndzjUAgc9FIIF-5XhGg9HRXk8C7hcVkFeGWPjNViJaCT3AkLEUQMLbNBvhUS_2SqOlVUXxi1VOS2F8/s320/dvd+-+cd+style.png" width="320" /></a></div> <div style="text-align: justify;"> 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 <a href="http://g-bloog.com/">G-bloog.com</a> yang udah buat tutor ini.</div> <br /> <h4> DVD Style</h4> <h3> CSS</h3> <br /> <blockquote class="tr_bq"> #movie-style {<br />     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);<br />     float: left;<br />     margin: 0 90px 40px 0;<br />     position: relative;<br /> }<br /> #movie-style a {<br />     display: block;<br />     height: 250px;<br />     line-height: 0 !important;<br />     z-index: 100;<br /> }<br /> #movie-style h1 {<br />     background-color: rgba(0, 0, 0, 0.7);<br />     bottom: 25px;<br />     color: #FFF;<br />     font-family: Arial;<br />     font-size: 12px;<br />     font-weight: bold;<br />     margin: 0;<br />     padding: 10px 0;<br />     position: absolute;<br />     text-align: center;<br />     width: 180px;<br />     z-index: 60;<br />     text-shadow: 1px 1px 0 #000;<br /> }<br /> #movie-style:hover h1 {<br />     color: #66bcff;<br /> }<br /> .mask-dvd {<br />     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQcnKzfSo4_WNMHUZDTPYdysOHL_ST9W16gzBTWnmT9J2S4yrwVjW0Ge30LHHyAnMkVQUQ8xOeHpnXVVrenvTJ_cSwKJDw6CViFUsDNHNgPs94ZMaFTh623qqs7n4boBm-5hAp3SXBWA/s1600/mask-dvd.png") no-repeat scroll 0 0 transparent;<br />     box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;<br />     height: 250px;<br />     left: 0;<br />     position: absolute;<br />     top: 5px;<br />     width: 180px;<br /> }<br /> .corte-movie {<br />     border-bottom: 5px solid #222;<br />     border-radius: 3px 3px 3px 3px;<br />     border-right: 5px solid #222;<br />     border-top: 5px solid #222;<br />     float: left;<br />     height: 250px;<br />     overflow: hidden;<br />     position: relative;<br />     width: 180px;<br />     z-index: 50;<br /> }<br /> .corte-movie img {<br />     max-height: 300px;<br /> }<br /> .dvd-rol {<br />     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpcL6sFbyFd1HR3nwozVNuCNTdMbeo9etkWDnLMrq0IjJeQhS_yC0Gq5Ap5KrZTxNNXtPOV-2EQtlwlIeGub-uohtaEfxaH269sINjRPU1N63bD4fbcAtLvcuUELnUSc_t80TFcvfG-q0/s1600/dvd.png") no-repeat scroll 0 0 transparent;<br />     display: block;<br />     height: 180px;<br />     position: absolute;<br />     right: 0;<br />     top: 50px;<br />     transform: rotate(100deg);<br />     -moz-transform: rotate(100deg);<br />     -webkit-transform: rotate(100deg);<br />     -o-transform: rotate(100deg);<br />     width: 180px;<br />     z-index: 10;<br /> }<br /> .dvd-rol, #movie-style h1 {<br />     transition: all 300ms ease-in-out 0s;<br />     -moz-transition: all 300ms ease-in-out 0s;<br />     -webkit-transition: all 300ms ease-in-out 0s;<br />     -o-transition: all 300ms ease-in-out 0s;<br /> }<br /> #movie-style:hover .dvd-rol {<br />     right: -73px;<br />     transform: rotate(242deg);<br />     -moz-transform: rotate(242deg);<br />     -webkit-transform: rotate(242deg);<br />     -o-transform: rotate(242deg);<br /> }</blockquote> <br /> <h3> HTML</h3> <blockquote class="tr_bq"> <div id="movie-style"><br />     <span class="corte-movie"><br />         <img src="<span style="color: red;">Masukkan Url Gambar</span>" /><br />     </span><br />     <h1><span style="color: red;">Judul DVD</span></h1><br />     <a href="<span style="color: red;">Masukkan Url yang akan dituju</span>" class="mask-dvd"></a><br />     <i class="dvd-rol"></i><br /> </div></blockquote> <br /> <h4> <span style="font-weight: normal;">CD Style</span></h4> <h3> <span style="font-weight: normal;">CSS</span></h3> <div> <blockquote class="tr_bq"> #music-style {<br />     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);<br />     float: left;<br />     margin: 0 90px 40px 0;<br />     position: relative;<br /> }<br /> #music-style a {<br />     display: block;<br />     line-height: 0 !important;<br />     position: absolute;<br />     z-index: 100;<br /> }<br /> #music-style h1 {<br />     background-color: rgba(0, 0, 0, 0.7);<br />     bottom: 25px;<br />     color: #FFF;<br />     font-family: Arial;<br />     font-size: 12px;<br />     font-weight: bold;<br />     margin: 0;<br />     padding: 10px 0;<br />     position: absolute;<br />     right: 3px;<br />     text-align: center;<br />     text-shadow: 1px 1px 0 #000000;<br />     width: 210px;<br />     z-index: 60;<br /> }<br /> #music-style:hover h1 {<br />     color: #66bcff;<br /> }<br /> .mask-cd {<br />     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpIDEddzchhGy9f6ce9aryIfP81YlDsLMn6Iln22Z5PCoeSixxZck9qsL2WEsp7sYrNej5EPD9YfHhprSsXxUiI7qc6EaOmoK_LtNEAL90ge_f671Ah62dcBwiWMUJIqC-YCo6JSskzQ/s1600/mask-cd.png") no-repeat scroll 0 0 transparent;<br />     box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;<br />     height: 190px;<br />     left: 0;<br />     top: 3px;<br />     width: 250px;<br /> }<br /> .corte-music {<br />     border-color: #222;<br />     border-style: solid;<br />     border-width: 3px 3px 3px 40px;<br />     float: left;<br />     height: 190px;<br />     overflow: hidden;<br />     position: relative;<br />     width: 210px;<br />     z-index: 50;<br /> }<br /> .corte-music img {<br />     max-height: 300px;<br /> }<br /> .cd-rol {<br />     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxdoQRGTi7-zYFEo1rJUjtqoP-lCKR9cbAgU3Fgft50Gs2seupFjiB0qasF21fX8BTyvmryUPotxR8qx1E6b4UwY7sPzcGxTIa6Fy4ny1qV9ZlQ_TMXmTJC6usZVHeTCmsmMMIhuxBWw/s1600/cd.png") no-repeat scroll 0 0 transparent;<br />     display: block;<br />     height: 180px;<br />     position: absolute;<br />     right: 0;<br />     top: 7px;<br />     transform: rotate(-230deg);<br />     -moz-transform: rotate(-230deg);<br />     -webkit-transform: rotate(-230deg);<br />     -o-transform: rotate(-230deg);<br />     width: 180px;<br />     z-index: 10;<br /> }<br /> .cd-rol, #music-style h1 {<br />     transition: all 300ms ease-in-out 0s;<br />     -moz-transition: all 300ms ease-in-out 0s;<br />     -webkit-transition: all 300ms ease-in-out 0s;<br />     -o-transition: all 300ms ease-in-out 0s;<br /> }<br /> #music-style:hover .cd-rol {<br />     right: -73px;<br />     transform: rotate(0);<br />     -moz-transform: rotate(0);<br />     -webkit-transform: rotate(0);<br />     -o-transform: rotate(0);<br /> }</blockquote> </div> <div> <br /></div> <h3> HTML</h3> <div> <blockquote class="tr_bq"> <div id="music-style"><br />     <span class="corte-music"><br />         <img src="<span style="color: red;">Url Gambar</span>" /><br />     </span><br />     <h1><span style="color: red;">Judul CD</span></h1><br />     <a href="<span style="color: red;">Url yang akan dituju</span>" class="mask-cd"></a><br />     <i class="cd-rol"></i><br /> </div></blockquote> </div> <div> <div> <br /></div> </div> <div> <br /></div> <div> <b>Keterangan:</b></div> <div> Untuk ukuran gambar <b>DVD = 180 x 251 pixel</b> dan untuk ukuran gambar <b>CD =  211 x 191 pixel</b></div> <div> Untuk text yang saya kasih warna merah, ganti:</div> <div> <ul> <li><span style="color: red;">Url Gambar </span>= Alamat Gambar</li> <li><span style="color: red;">Judul CD</span> = Ganti dengan judul yang diinginkan</li> <li><span style="color: red;">Url yang akan dituju</span> = ganti dengan url yang sobat inginkan jika album tersebut diklik</li> </ul> <div> <br /></div> </div> <div> <b>Berikut Demo DVD dan CD Style</b></div> <div> <br /> <br /> <br /> <br /> <br /> <br /></div> <style type="text/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); } #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); } </style> <br /> <div id="movie-style"> <span class="corte-movie"> <img src="http://i.imgur.com/gvvn05o.jpg" /> </span> <br /> <h1> DVD Style</h1> <a class="mask-dvd" href="http://g-bloog.com/"></a> <i class="dvd-rol"></i></div> <div id="movie-style"> <span class="corte-movie"> <img src="http://i.imgur.com/ynKnNsq.png" /> </span> <br /> <h1> DVD Style</h1> <a class="mask-dvd" href="http://g-bloog.com/"></a> <i class="dvd-rol"></i></div> <div id="music-style"> <span class="corte-music"> <img src="http://i.imgur.com/QBp5YpL.png" /> </span> <br /> <h1> CD Style</h1> <a class="mask-cd" href="http://g-bloog.com/"></a> <i class="cd-rol"></i></div> <div id="music-style"> <span class="corte-music"> <img src="http://i.imgur.com/Mx9yNz8.png" /> </span> <br /> <h1> CD Style</h1> <a class="mask-cd" href="http://g-bloog.com/"></a> <i class="cd-rol"></i></div>

Hallo sobat, dihari minggu ini saya akan berbagi ilmu CSS3 untuk sobat yang akan membuat blog sobat…

Read More