Footer Dengan Efek Kilat Ala css-trick.com

Siapa yang tidak kenal dengan situs css-trick.com , situs milik Chris Coyier ini selalu menghadirkan berbagai macam tutorial web design yang cukup inovatif dan menjadi salah satu situs referensi buat blog ini . Sebelum tampilan webnya berubah seperti sekarang ini ketika sobat menyambanginya tentu tidak asing dengan efek kilat pada bagian footernya yang ketika disentuh mouse garis pada linknya seperti keluar kilat . Nah sekarang saya akan mengenang kembali efek itu . 


Tapi sebelumnya saya akan memperingatkan kalian untuk tidak memasangnya kalau blog kalian mempertahankan validasi pada CSS3 , karena beberapa kode mungkin tidak akan valid pada CSS3 . 

Kustomisasi 

CSS

footer{
position:relative;
width:90%;
margin:0 auto;
font-size:1rem;
}
footer, div a{
display:block;
}
div{
width:50%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
}
div.lft{
float:left;
text-align:left;
}
div.rgt{
float:right;
text-align:right;
}
div a{
color:#666;
text-decoration:none;
position:relative;
padding:25px 0;
}
div a:hover{
color:white;
}
/*GROUPING CLASSES*/
div.lft a:after, div.rgt a:after{
position:absolute;
content:"";
right:0;
bottom:0;
width:0%;
height:1px;
background:#fff;
}
div.lft a:after{
left:0;
}
/*LEFT SIDE EFFECTS*/
div.lft a:before{
position:absolute;
content:"";
left:0;
bottom:0;
width:100%;
height:1px;
background:rgb(125,126,125);
/* Old browsers */
background:-webkit-gradient
(linear,left top,right top,color-stop
(rgba(125,126,125,1),0),color-stop(rgba(14,14,14,1),1));
background:-webkit-linear-gradient(left,  
rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background:   -moz-linear-gradient(left,  
rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background:     -o-linear-gradient(left,  
rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background:        linear-gradient(left,  
rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
/* FF3.6+ */
background:-webkit-gradient
(linear, left top, right top, color-stop
(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
/* Chrome,Safari4+ */
background:-webkit-linear-gradient(left,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background:   -moz-linear-gradient(left,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background:     -o-linear-gradient(left,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background:        linear-gradient(left,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background:-webkit-gradient
(linear,left top,left bottom,color-stop
(rgba(125,126,125,1),0),color-stop(rgba(14,14,14,1),1));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(to right,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background:   -moz-linear-gradient(to right,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background:     -o-linear-gradient(to right,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background:        linear-gradient(to right,  
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient
( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 );
/* IE6-9 */
:;
}
div.lft a:hover:after{
-webkit-animation:lftani 0.3s linear alternate;
   -moz-animation:lftani 0.3s linear alternate;
    -ms-animation:lftani 0.3s linear alternate;
     -o-animation:lftani 0.3s linear alternate;
        animation:lftani 0.3s linear alternate;
}
@-webkit-keyframes lftani{
0% {width:1%;left:0;height:1px;}
  25% {width:20%;left:10%;height:1px;}
  50% {width:20%;left:50%;height:1px;}
  75% {width:20%;left:75%;height:2px;}
  95% {width:20%;left:100%;height:3px;}
  100% {width:0%;left:100%;height:4px;}
}
/*RIGHT SIDE EFFECTS*/
div.rgt a:after{
right:0;
}
div.rgt a:before{
position:absolute;
content:"";
left:0;
bottom:0;
width:100%;
height:1px;
background:rgb(14,14,14);
/* Old browsers */
background:-webkit-gradient
(linear,left top,right top,color-stop
(rgba(14,14,14,1),0),color-stop(rgba(125,126,125,1),1));
background:-webkit-linear-gradient(left,  
rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background:   -moz-linear-gradient(left,  
rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background:     -o-linear-gradient(left,  
rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background:        linear-gradient(left,  
rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
/* FF3.6+ */
background:-webkit-gradient
(linear, left top, right top, color-stop
(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
/* Chrome,Safari4+ */
background:-webkit-linear-gradient(left, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background:   -moz-linear-gradient(left, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background:     -o-linear-gradient(left, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background:        linear-gradient(left, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background:-webkit-gradient
(linear,left top,left bottom,color-stop(rgba(14,14,14,1),0),
color-stop(rgba(125,126,125,1),1));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(to right, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background:   -moz-linear-gradient(to right, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background:     -o-linear-gradient(to right, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background:        linear-gradient(to right, 
 rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient
( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=1 );
/* IE6-9 */
:;
}
div.rgt a:hover:after{
-webkit-animation:rgtani 0.3s linear alternate;
   -moz-animation:rgtani 0.3s linear alternate;
    -ms-animation:rgtani 0.3s linear alternate;
     -o-animation:rgtani 0.3s linear alternate;
        animation:rgtani 0.3s linear alternate;
}
@-webkit-keyframes rgtani{
0% {width:1%;right:0;height:1px;}
  25% {width:20%;right:10%;height:1px;}
  50% {width:20%;right:50%;height:1px;}
  75% {width:20%;right:75%;height:2px;}
  95% {width:20%;right:100%;height:3px;}
  100% {width:0%;right:100%;height:4px;}
}
/*AVATAR*/
#avatar{
position:absolute;
margin:auto;
width:200px;
height:200px;
background:url
(https://lh6.googleusercontent.com/-BxLjrbTloiA/AAAAAAAAAAI/AAAAAAAAE3Q/PDg_MyjgVMM/s120-c/photo.jpg);
background-repeat:no-repeat;
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:cover;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:cover;
overflow:hidden;
background-color:#000;
top:240px;
right:0;
bottom:0;
left:0;
z-index:1;
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
border:5px solid #cd6a51;
-webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
     -o-transition:all 0.5s ease;
        transition:all 0.5s ease;
  opacity:0.5;
}

HTML

<footer>
  <div class="lft">
  <a href="#">BlogCopy</a>
  <a href="#">Brewek</a>
  <a href="#">Mewek</a>
  </div>
  <div id="avatar"></div>
  <div class="rgt">
  <a href="#">@facebook</a>
  <a href="#">@twitter</a>
  <a href="#">@linkedin</a>
  </div>
</footer>

Selamat kalain berhasil memasangnya hehe .....
 
Resource : DHANUSH BADGE

Artikel Menarik Lainnya :