Langsung ke konten utama

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
Label:

Komentar

  1. AnonimSenin, April 28, 2014

    wah .. panjang juga ya css nya :D

    BalasHapus
  2. AnonimSenin, April 28, 2014

    waw keren, boleh jg buat dipasang di footer... ok disimpan dl, nanti dipasang di blog yg lain :)

    BalasHapus
  3. Putra KefaSenin, April 28, 2014

    wah bagus untuk blog yg belum ada footernya...izin praktek gan :)

    BalasHapus
  4. UnknownSenin, April 28, 2014

    nais simple tp keren |o|

    BalasHapus
  5. Rio Ilham HadiSelasa, April 29, 2014

    wah cocok nih lagi buat template,, pasang itu ah,, biar makin keren :-d
    Salam : #Dunia Blanter

    BalasHapus
  6. AnonimSelasa, April 29, 2014

    Bisa ajah kalo orang hebat tuh akalnya :D

    BalasHapus
    Balasan
    1. Sopala MultapaSabtu, Mei 03, 2014

      Wow hehe

      Hapus
    2. AnonimMinggu, Mei 04, 2014

      cara masangna gimana...?
      footerna ga paham nich... tlg penjelasanna masta @rlly
      thx

      Hapus
    3. Sopala MultapaSelasa, Mei 06, 2014

      css diatas kode </style> dan HTML bebas di tempatkan dimana

      Hapus
  7. UnknownMinggu, Mei 04, 2014

    kilat kilat, yah muncul ide2 baru lagi,.. saya pahami dulu sir ruly @@,

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Mei 06, 2014

      Monggo sob rio coba di teliti saja dulu hee

      Hapus
  8. Rz BotSenin, Mei 05, 2014

    mantep kang rully, dan tampilan tempaltenya keren banget.. pada homepagenya terutama :D

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Mei 06, 2014

      Hehe ah biasa saja mas untuk sekelas newbie @@,

      Hapus
  9. UnknownSenin, Mei 05, 2014

    Uda lama gk mmpir kesini rupanya banyak yg berubah hehe keyen kang :D

    BalasHapus
  10. Staff AdministratorSabtu, Mei 17, 2014

    kangen dan rindu juga
    udah lama ndak nyelonjor di sini..
    kumaha damang kang Rul :)

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Mei 20, 2014

      Lagi bener-bener sibuk mas bud ...
      alhamdullillah sehat mas , sebaliknya ???

      Hapus
  11. Irfan SyahputraRabu, Mei 28, 2014

    Baru ini ada kilat yang gak menakutkan :D Nice share sob :)

    BalasHapus
  12. Dafin defandakyJumat, Mei 30, 2014

    keren sob, ikut nyimak tutornya buat tambahan ilmu :)

    BalasHapus
  13. UnknownKamis, Juni 12, 2014

    benar-benar mengkilat

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya