Modifikasi Tampilan About Me

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.

Dan untuk kali ini saya akan mencoba membuat tampilan halaman seperti ini menjadi sedikit berbeda menggunakan efek transisi CSS3 seperti artikel sebelumnya Simple Menu Dropdown Hover Animasi

DEMO

Untuk konsep dasarnya adalah sebagai berikut :

CSS

 #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

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

Agar tampilan lebih maksimal anda bisa berkreasi sendiri mulai dari bentuk dan ukuran sesuai selera anda...!!!

Simple Menu Dropdown Hover Animasi

Simple Menu Dropdown Hover Animasi  - Berbagai efek menu yang ditampilkan tentunya akan menambah nilai lebih dari blog itu sendiri. Sebagai contoh kali ini saya kan membuat menu simple dengan efek hover animasi menggunakan efek transisi delay CSS3. Terkait dengan Flat UI Menu Animasi Dropdown CSS3 dan Dropdown Menu Metro UI Awesome. Dengan metode sederhana ini kita sudah bisa menerapkan efek drop down animasi yang lebih simple. Untuk demonya klik dibawah ini :

• DEMO

CSS

.container {
  text-align: center;
  position: relative;
  margin: 3em auto 0 auto;
  width: 9em;
  color: white;
  cursor: pointer;
}

.menu {
  position: relative;width:18em;font-size:1.2em;
  padding: 1em 0;
  background: #111;
  z-index: 100;
}

.opsi{
  position: absolute;
  width: 18em;
  padding: 1em 0;
  font-size: 1.2em;
  top: 0;
  transition: top 0.2s ease-in-out;
}

.siji {
  transition-delay:0;
  background: #222;
  z-index: 50;
}
.loro {
  transition-delay:.05s;
  background: #333;
  z-index: 49;
}
.telu{
  transition-delay:.1s;
  background: #444;
  z-index: 48;
}
.papat {
  transition-delay:.15s;
  background: #555;
  z-index: 47;
}
.limo {
  transition-delay:.2s;
  background: #666;
  z-index: 46;
}

.container:hover > .siji{
  top: 4.7em;
}

.container:hover > .loro {
  top: 8.1em;
}

.container:hover > .telu {
  top: 11.5em;
}

.container:hover > .papat {
  top: 14.9em;
}

.container:hover > .limo {
  top: 18.3em;
}

HTML

<div class='container'>
<div class='menu'><i class="fa fa-bars"></i></div>
<div class='opsi siji'>Setunggal</div>
<div class='opsi loro'>Kaleh</div>
<div class='opsi telu'>Tigo</div>
<div class='opsi papat'>Sekawan</div>
<div class='opsi limo'>Gangsal</div>
</div>

Ini sekedar contoh jadi anda bisa kreasikan sendiri sesuai kebutuhan...Semoga bermanfaat