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;
}
<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
wah .. panjang juga ya css nya :D
BalasHapusHehe ... ya gitu dah
Hapuswaw keren, boleh jg buat dipasang di footer... ok disimpan dl, nanti dipasang di blog yg lain :)
BalasHapusSilahkan sis ... !!!
Hapuswah bagus untuk blog yg belum ada footernya...izin praktek gan :)
BalasHapusBlank tulisan'y hehe
Hapusnais simple tp keren |o|
BalasHapusHehehe ...
Hapuswah cocok nih lagi buat template,, pasang itu ah,, biar makin keren :-d
BalasHapusSalam : #Dunia Blanter
Monggo sob monggo !!! :p
HapusBisa ajah kalo orang hebat tuh akalnya :D
BalasHapusWow hehe
Hapuscara masangna gimana...?
Hapusfooterna ga paham nich... tlg penjelasanna masta @rlly
thx
css diatas kode </style> dan HTML bebas di tempatkan dimana
Hapuskilat kilat, yah muncul ide2 baru lagi,.. saya pahami dulu sir ruly @@,
BalasHapusMonggo sob rio coba di teliti saja dulu hee
Hapusmantep kang rully, dan tampilan tempaltenya keren banget.. pada homepagenya terutama :D
BalasHapusHehe ah biasa saja mas untuk sekelas newbie @@,
HapusUda lama gk mmpir kesini rupanya banyak yg berubah hehe keyen kang :D
BalasHapusKemana saja yeuhh
Hapuskangen dan rindu juga
BalasHapusudah lama ndak nyelonjor di sini..
kumaha damang kang Rul :)
Lagi bener-bener sibuk mas bud ...
Hapusalhamdullillah sehat mas , sebaliknya ???
Baru ini ada kilat yang gak menakutkan :D Nice share sob :)
BalasHapuskeren sob, ikut nyimak tutornya buat tambahan ilmu :)
BalasHapusbenar-benar mengkilat
BalasHapus