Modifikasi Tampilan About me

​

Ketika kita menambahkan widget about me pada blogger tentunya yang akan tampil hanyalah sebuah box yang berisi gambar profile google + yang disertai follower dari lingkaran kita. Tampilan seperti ini udah mutlak untuk default blogger yang mungkin menurut kalian akan terasa biasa saja. Kemudian banyak dari kita yang berusaha modifikasi tampilan agar senantiasa terlihat lebih cantik dan keren, baik itu menggunakan halaman statis maupun dari pihak luar.

Kali ini saya akan mencoba membuat tampilan halaman seperti ini menjadi sedikit berbeda menggunakan efek transisi CSS3.

DEMO

Konsep dasar :

CSS

Code:

#vn-me {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:180%;
    background:#444;
    color:#e67e22;
    z-index:1;
}
header {
    position:relative;font-size:3.2em;
    top:50%;
    left:50%;
    width:15em;
    height:17.5em;
    text-align:center;
    margin-top:-8.75em;
    margin-left:-7.5em;
}

.content {
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:180%;
    background:#1abc9c;
    overflow:hidden;
    z-index:2;
    -webkit-transition: all .8s cubic-bezier(0.880, 0.040, 0.045, 0.990);
    -moz-transition: all .8s cubic-bezier(0.880, 0.040, 0.045, 0.990);
    -o-transition: all .8s cubic-bezier(0.880, 0.040, 0.045, 0.990);
    -ms-transition:all .8s cubic-bezier(0.880, 0.040, 0.045, 0.990);
    transition: all .8s cubic-bezier(0.880, 0.040, 0.045, 0.990);
}
#satu:target{
    left:0;
    overflow:visible;
}
article {
    position:relative;
    max-width:42em;
    background:#1abc9c;
    padding:1em;
    margin:0 auto;
}

HTML Markup

Code:

<div id="vn-me">
    <header>
<i class="fa fa-user fa-4x"></i>
<br />
<br />
      <a href="#satu">ABOUT ME</a>
    </header>
</div>
<div id="satu" class="content">
  <article>
    <h2>ABOUT ME</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </article>
</div>

Sebagai pengembangan silakan anda kreasikan sendiri sesuai selera

 

Itu contoh pengembanganya mas jadi bisa di sesuaikan lagi

 

Mumet liatnya...gak mudeng mas

 

sip, keren banget