Notification texts go here. Contact Us

10 Efek Gila dengan CSS3 Border Transitions

Dibaca
Hallo Sobat Mafia Hacker. Kali ini  saya akan membahas tentang "10 Efek Gila dengan CSS3 Border Transitions" . Bagaimana Sih Cara buatnya ??

• Oke Pertama" Login ke Blogger
• Lalu Masuk ke Template - EDIT HTML
• Cari Kode ]]></b:skin>
• Lalu Masukan kode dibawah ini diatas kode tersebut

body {
padding: 10px 0 0 10px;
}

a {
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:100px;
    height:100px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyk_kTdWKpRZKuQcqcPvL4bGIXllBtbLCeErOIvBh9rvsfnfwg7OoSFMokOSj8BlMbeIFmJ4eOKohQXj3fdtX_6n5KYg_AIETSr7YwYKAyXSCYQp7BbTE7Gn9zH8IHk9PwLyIOVJk5zw/s1600/unduhan.gif);
    background-repeat:no-repeat;
    background-origin:border-box;
    background-position:50% 50%;
    
    border-width:50px;
    border-color:rgba(0,0,0,0);
    
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -ms-transition:0.5s ease;
    -o-transition:0.5s ease;
    transition:0.5s ease;
}

a:hover {
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}

a.one {border-style:solid;}
a.two {border-style:dashed;}
a.san {border-style:dotted;}


a.yon       {border:50px solid  rgba(0,0,0,0.7);}
a.goo       {border:50px dashed rgba(0,0,0,0.7);}
a.rok       {border:50px dotted rgba(0,0,0,0.7);}
a.ryk       {border:50px double rgba(0,0,0,0.7);}
a.yon:hover {border: 1px solid  rgba(0,0,0,0.7);}
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}


a.x7,
a.x8,
a.x9 {
    -webkit-border-radius:0;
-moz-border-radius:0;
    border-radius:0;
}
a.x7       {border:50px solid  rgba(0,0,0,0.7);}
a.x8       {border:50px dashed rgba(0,0,0,0.7);}
a.x9       {border:50px dotted rgba(0,0,0,0.7);}
a.x7:hover {border: 1px solid  rgba(0,0,0,0.7);}
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}
• Lalu Masukan kode ini dibawah kode <body>

<a class="one" href="#"></a>
<a class="two" href="#"></a>
<a class="san" href="#"></a>
<br>
<a class="yon" href="#"></a>
<a class="goo" href="#"></a>
<a class="rok" href="#"></a>
<a class="ryk" href="#"></a>
<br>
<a class="x7" href="#"></a>
<a class="x8" href="#"></a>
<a class="x9" href="#"></a>
Semoga Artikel Ini Bermanfaat :)
Arigatou Gozaimasu ^__^

Sumber
Hi, I'm Yandi Mulyadi. IT Analyst who enjoys learning cool tech stuff and sharing it on Website and Youtube.