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

Blog Cantik Dan Cepat

Blog Cantik Dan Cepat - Akibat koneksi internet yang lambat akhir - akhir ini aktivitas blogging jadi terkendala. Jangankan mau update postingan, buka browser aja udah kluwer2 lama banget ga muncul homepagenya.
Haduuuh

Ini yang kemudian muncul dibenak saya tentang betapa pentingnya kecepatan loading blog, agar mudah diakses walaupun dengan koneksi yang lelet sekalipun. Kadang kita terlena dan sibuk dengan mendesign blog yang keren tanpa mempertimbangkan kecepatan blog. Kalau kita lihat pada pengembangan web design saat ini banyak yang hanya mementingan tampilan saja, tanpa memperdulikan dari sisi kecepatan. Sebagai contoh design yang sedang ngetren saat ini adalah One Page HTML yang menggunakan plugin dari pihak luar baik CSS, maupun javascript dari framework bootstrap, flat ui, semantic ui dan sebagainya. Dengan plugin seperti ini para designer web akan dimudahkan dalam mengatur tata letak dan tampilan blog sesuai keinginan. Namun sebelumnya harus menginstall framework bootstrap terlebih dulu dalam template blog kita. Untuk kalian yang ingin mencobanya bisa mengunjungi http://www.layoutit.com

Lalu pertanyaanya apakah semua blog yang cantik bisa cepat ???

Jawabannya bervariasi

Untuk yang menggunakan High speed internet connection mungkin ini ga ada masalah, karena sebenarnya banyak faktor yang mempengaruhi kecepatan loading blog. Namun yang terutama sekali adalah faktor bentuk dan design dari blog itu sendiri. Biasanya blog yang cantik dan keren banyak menggunakan efek - efek dari pihak luar ( eksternal ) baik CSS , Javascript dan Jquery Plugin ( Jquery UI ) dan lain lain. Semakin banyak kita menggunakannya tentu akan menambah beban loading pada blog kita.

Tips membuat design blog cantik dan cepat :

1. Warna

Menggunakan kontras warna yang tidak menyolok, kita bisa memilih kontras warna Flat UI. Flat UI Color atau lebih lengkap lagi Flat UI Color Picker.

2. Metode Inline CSS

Dalam hal ini biasanya CSS baik font awesome maupun CSS efek lainya, jika memang diperlukan anda bisa mengubah dari CSS Eksternal ke inline CSS. Pilih efek yang kita perlukan saja kemudian masukkan ke dalam CSS template sebelum kode ]]></b:skin> . Dengan begini kita sudah mengurangi beban loading, jadi tidak perlu lagi memanggil ke hosting CSS eksternal tadi. Tips mempercepat blog seofriendly

3. Metode Inline Javascript

Tidak menutup kemungkinan efek tampilan yang keren dan menakjubkan menggunakan bantuan javascript dari luar ( eksternal ) anda bisa mengubahnya menjadi inline javascript ke template blog.

4. Menambahkan Asynchronous pada Jquery

Untuk format jquery dalam template biasanya seperti ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Ubah menjadi

<script async="async" src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Ini berguna untuk mengatasi render blocking javascript yang mempengaruhi kecepatan loading blog di Google Speed Insight

5. Meminimalkan Gambar

Usahakan dalam menggunakan gambar tidak berlebihan, gunakan font awesome sebagai ganti icon gambar. Update font awesome versi 4.1.0 saat ini udah sampai versi 4.2.0

6. Kompress CSS HTML Javascript

Anda bisa menggunakan layanan kompress online

7. Jangan Menggunakan Inline CSS Attribution

 < div style='clear: both;' / >

Ganti kode di atas dengan kode

 <div class='clear'/>

Kemudian tambahkan kode css .clear{clear:both} ini sebelum kode ]] >< /b:skin >

8. Optimalkan CSS Delivery Ke Blog

 Ganti kode

<head> menjadi &lt;head&gt;

 Ganti kode

</head> menjadi &lt;!--<head/>--&gt;

Setelah itu check seberapa cepat blog anda di GT Metrix dan Speed Tool lainnya

Demikian sedikit tips blogger semoga bermanfaat

CSS Simple Tab Sederhana

CSS Simple Tab Sederhana - Setelah hampir sebulan lebih ga ada aktivitas blogging, kali ini saya akan berbagi membuat Simple Tab sederhana dengan CSS yang nantinya bisa kita gunakan untuk kostumisasi widget blogger. Sebenarnya kalau dilihat fungsi dari tab view sederhana ini sama dengan accordion yang memerlukan bantuan jquery untuk memaksimalkan efek tampilan seperti Simple Flat UI CSS Accordion, Simple Tab Menggunakan Jquery UI, maupun dengan bantuan plugin tabion seperti artikel sebelumnya Tab Accordion Menu UI Awesome.

• DEMO

Konsep dasarnya adalah sebagai berikut :

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
main {
  background: #FFF;
  width: 500px;
  margin: 50px auto;
  padding: 10px 30px 80px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
  font-size: 13px;
}
input, section {
  clear: both;
  padding-top: 10px;
  display: none;
}
label {
  font-weight: bold;
  font-size: 14px;
  display: block;
  float: left;
  padding: 10px 30px;
  border-top: 2px solid transparent;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  border-bottom: 1px solid #DDD;
}
label:hover {
  cursor: pointer;
  text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
  display: block;
}
input:checked + label {
  border-top-color: #FFB03D;
  border-right-color: #DDD;
  border-left-color: #DDD;
  border-bottom-color: transparent;
  text-decoration: none;
}

HTML

<main>
  <h2>CSS Tabs</h2>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Home</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Away</label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Samples</label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">About</label>
  <section id="content1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis adipiscing risus, porttitor viverra urna condimentum et. Donec vestibulum lacus vel dolor dictum pellentesque. Aliquam sodales sem quis urna condimentum, sit amet elementum magna semper.</p>
  </section>
  <section id="content2">
    <p>Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante. Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
  </section>
  <section id="content3">
    <p>Fusce pulvinar porttitor dui, eget ultrices nulla tincidunt vel. Suspendisse faucibus lacinia tellus, et viverra ligula. Suspendisse eget ipsum auctor, congue metus vel, dictum erat. Aenean tristique euismod molestie. Nulla rutrum accumsan nisl, ac semper sapien tincidunt et. Praesent tortor risus, commodo et sagittis nec, aliquam quis augue. Aenean non elit elementum, tempor metus at, aliquam felis.</p>
  </section>
  <section id="content4">
    <p>Vivamus convallis lectus lobortis dapibus ultricies. Sed fringilla vitae velit id rutrum. Maecenas metus felis, congue ut ante vitae, porta cursus risus. Nulla facilisi. Praesent vel ligula et erat euismod luctus. Etiam scelerisque placerat dapibus. Vivamus a mauris gravida urna mattis accumsan. Duis sagittis massa vel elit tincidunt, sed molestie lacus dictum. Mauris elementum, neque eu dapibus gravida, eros arcu euismod metus, vitae porttitor nibh elit at orci. Vestibulum laoreet id nulla sit amet mattis.</p>
  </section>
</main>

Untuk isi content1,2,3,4 bisa disesuaikan dengan kebutuhan

Tab Accordion Menu UI Awesome

Tab Accordion Menu UI Awesome - Dengan memanipulasi efek tampilan accordion pada tab menu akan membuat tampilan lebih hidup dengan css animasi tabion, yang mengusung gaya metro ui ke dalam blog design UI. Baik menggunakan jquery ui maupun css3 efek, seperti artikel sebelumnya Simple Flat UI Css Accordion  yang kemudian dikombinasikan dengan font awesome untuk menghasilkan efek gambar minimalis sebagai perwakilan menu yang kita masukkan. Kombinasi menu metro ui dengan font awesome dan Menu metro ui efek modal dialog. 

• DEMO CODE

Untuk dapat menggunakan fungsi tabion menu ini silakan masukkan kode dibawah ini sebelum kode </head>

<link href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/animate-custom.css" type="text/css">
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/tabion-css.css" type="text/css">
<link rel="stylesheet" href="css/tabion-css-ie8.css" type="text/css" />

Kemudian untuk markup HTMLnya sepertidi bawah ini :

<div id="mainform">
    <!-- START TABION -->
    <ul class="tabion height-500">

        <!-- Start Tab 1 -->
        <li>
       
             <!-- Start Tab Button -->
<label for="tab11" class="tabtile tabtile-small solid-blue-2 hovershadow-blue light-text">
                <i class="fa fa-group fa-3x"></i>
                <span class="light-text">Group</span>
            </label>
            <input type="radio" name="tabion" id="tab11">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-rollIn solid-blue-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-group"></i> GROUP CONTENT</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 1 -->
       
       
        <!-- Start Tab 2 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab12" class="tabtile tabtile-small solid-red-2 hovershadow-red light-text pos-left-100">
                <i class="fa fa-download fa-3x"></i>
                <span class="light-text">Download</span>
            </label>
            <input type="radio" name="tabion" id="tab12" checked="">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-bounceIn solid-red-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-download"></i> Download</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                 
                </p>

            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 2 -->

        <!-- Start Tab 3 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab13" class="tabtile tabtile-small solid-orange-2 hovershadow-orange light-text pos-left-200">
                <i class="fa fa-comments fa-3x"></i>
                <span class="light-text">Comments</span>
            </label>
           
            <input type="radio" name="tabion" id="tab13">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flipInY solid-orange-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-comments"></i> Comments</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 3 -->


        <!-- Start Tab 4 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab14" class="tabtile tabtile-small solid-green-2 hovershadow-green light-text pos-left-300">
                <i class="fa fa-male fa-3x"></i>
                <span class="light-text">About Me</span>
            </label>
           
            <input type="radio" name="tabion" id="tab14">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-lightSpeedIn solid-green-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-male"></i> About Me</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 4 -->
       
       
        <!-- Start Tab 5 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab15" class="tabtile tabtile-small solid-red hovershadow-red light-text pos-left-400">
                <i class="fa fa-youtube-play fa-3x"></i>
                <span class="light-text">Play</span>
            </label>
           
            <input type="radio" name="tabion" id="tab15">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flip solid-red light-text pos-top-100">
                <p class="title"><i class="fa fa-youtube-play"></i> Play Video</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 5 -->

        <!-- Start Tab 6 -->
        <li>
            <!-- Start Tab Button -->
            <label for="tab16" class="tabtile tabtile-small solid-green hovershadow-green light-text pos-left-500">
                <i class="fa fa-bell fa-3x"></i>
                <span class="light-text">Notification</span>
            </label>
           
            <input type="radio" name="tabion" id="tab16">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flipInX solid-green light-text pos-top-100">
                <p class="title"><i class="fa fa-bell"></i> Notification</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 6 -->
       
       
        <!-- Start Tab 7 -->
        <li>
            <!-- Start Tab Button -->
            <label for="tab17" class="tabtile tabtile-small solid-black hovershadow-black light-text pos-left-600">
                <i class="fa fa-envelope-o fa-3x"></i>
                <span class="light-text">Contact</span>
            </label>
           
            <input type="radio" name="tabion" id="tab17">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-bounceInRight solid-black light-text pos-top-100">
                <p class="title"><i class="fa fa-envelope-o"></i> Contact Me</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 7 -->

    <!-- Radio is used to close tabion content -->
    <input type="radio" name="tabion" class="none" id="close_tabion">
   
    </ul>
    <!-- END TABION -->
    <div class="clearspace"></div>
</div>

Anda cukup mengganti tulisan bercetak tebal ( isi content ) pada HTML diatas dengan apa yang ingin ditampilkan.

Simple Flat UI CSS Accordion

Simple Flat UI CSS Accordion - Menerapkan efek animasi unik baik menggunakan jquery ui, css3 maupun javascript tentunya akan menambah keindahan setiap tampilan blog, apalagi seperti trend design dengan gaya Flat UI. Sebagai contoh kali ini adalah simple css accordion yang dibalut dengan palet warna Flat UI color, seperti simple flat ui menu modal dialog, dan simple menu ui efek flip css3.

• DEMO CODE

Untuk konsep pembentuknya adalah sebagai berikut :

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
}

h1 {
  font-size: 2em;
  padding: 2em;
  text-align: center;
}

.accordion dl {
}

.accordion dt > a {
  text-align: center;
  font-weight: 700;
  padding: 2em;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
  background-color: #1abc9c;
  color:#fafafa;
  font-size: 1em;
  line-height: 1.5em;
}
.accordion dd > p {
  padding: 1em 2em 1em 2em;
}

.accordion {
  position: relative;
  background-color: #16a085;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2em 0 2em 0;
}

.accordionTitle {
  background-color: #22313F;
  border-bottom: 1px solid #2c3e50;
}
.accordionTitle:before {
  content: "+";
  font-size: 1.5em;
  line-height: 0.5em;
  float: left;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
  background-color: #2c3e50;
}

.accordionTitleActive {
  background-color:#34495e;
}
.accordionTitleActive:before {
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

.accordionItem {
  height: auto;
  overflow: hidden;
}
@media all {
  .accordionItem {
    max-height: 50em;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
  }
}
@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -moz-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
}

.accordionItemCollapsed {
  max-height: 0;
}

.animateIn {
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: normal;
  -moz-animation-duration: 0.65s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  animation-name: accordionIn;
  animation-duration: 0.65s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

.animateOut {
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: accordionOut;
  -moz-animation-duration: 0.75s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  animation-name: accordionOut;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes accordionIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes accordionOut {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

Javascript

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}
var classie = {
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
  define( classie );
} else {
  window.classie = classie;
}
})( window );
var $ = function(selector){
  return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
  e.stopPropagation();
  e.preventDefault();
  if(e.target && e.target.nodeName == "A") {
    var classes = e.target.className.split(" ");
    if(classes) {
      for(var x = 0; x < classes.length; x++) {
        if(classes[x] == "accordionTitle") {
          var title = e.target;
          var content = e.target.parentNode.nextElementSibling;
          classie.toggle(title, 'accordionTitleActive');
          if(classie.has(content, 'accordionItemCollapsed')) {
            if(classie.has(content, 'animateOut')){
              classie.remove(content, 'animateOut');
            }
            classie.add(content, 'animateIn');
          }else{
             classie.remove(content, 'animateIn');
             classie.add(content, 'animateOut');
          }
          classie.toggle(content, 'accordionItemCollapsed');    
        }
      }
    }
  }
});

HTML

<div class="container">
          <h1>Simple Flat UI CSS Accordion</h1>
          <div class="accordion">
            <dl>
              <dt><a class="accordionTitle" href="#">Test Simple Flat UI CSS Accordion 1</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
              </dd>
              <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 2</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
              </dd>
              <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 3</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
              </dd>
            </dl>
          </div>
</div>

Konsep diatas hanyalah contoh saja untuk pengembangan silakan anda kreasikan sendiri sesuai kebutuhan.

Demikian semoga bermanfaat.

Push Button Social Profile Flat UI Color

Push Button Social Profile Flat UI Color - Betapa pentingnya social profile dari berbagai media sosial untuk kepentingan blog, sebagai sarana komunikasi pemilik blog dan pengunjung. Ada beraneka macam bentuk dan model button mulai desain sederhana sampai button unik  sesuai perkembangan flat ui saat ini yang semuanya bertujuan agar blog tampil beda dan keren. Sebagai contoh Flat ui download button awesome , Flat UI Button Awesome Modal Dialog , Multi button download metro ui

• DEMO

CSS

.roundbtn {
  margin-right: 20px;
}

.roundbtn {
  width: 75px;
  height: 75px;
  border: 5px solid #9a9a9a;
  display: inline-block;
  background-color: #6c6161;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  border-radius: 75px;
  -moz-transition: all 35ms linear;
  -o-transition: all 35ms linear;
  -webkit-transition: all 35ms linear;
  transition: all 35ms linear;
  -ms-transition: all 35ms linear;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.roundbtn.sea {
  border: 5px solid #1abc9c;
  background-color: #16a085;
}
.roundbtn.red {
  border: 5px solid #d73030;
  background-color: #8b1616;
}
.roundbtn.blue {
  border: 5px solid #51a9ff;
  background-color: #0077ea;
}
.roundbtn.dark {
  border: 5px solid #34495e;
  background-color: #2c3e50;
}

.roundbtn .inner {
  position: relative;
  width: 75px;
  height: 75px;
  background-color: #9a9a9a;
  margin-top: -8px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
  -o-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
  -webkit-transition: margin 35ms 35ms, box-shadow 35ms linear;
  -webkit-transition-delay: linear, 0s;
  transition: margin 35ms 35ms linear, box-shadow 35ms linear;
  -ms-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
}
.roundbtn.sea .inner {
  background-color: #1abc9c;
}
.roundbtn.red .inner {
  background-color: #d73030;
}
.roundbtn.blue .inner {
  background-color: #51a9ff;
}
.roundbtn.dark .inner {
  background-color: #34495e;
}

.roundbtn:active .inner {
  margin-top: 0;
  -moz-box-shadow: #6c6161 0 8px 0 inset;
  -webkit-box-shadow: #6c6161 0 8px 0 inset;
  box-shadow: #6c6161 0 8px 0 inset;
  -moz-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
  -o-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
  -webkit-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms;
  -webkit-transition-delay: 0s, linear;
  transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
  -ms-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
}
.roundbtn:active.sea .inner {
  -moz-box-shadow: #16a085 0 8px 0 inset;
  -webkit-box-shadow: #16a085 0 8px 0 inset;
  box-shadow: #16a085 0 8px 0 inset;
}
.roundbtn:active.red .inner {
  -moz-box-shadow: #8b1616 0 8px 0 inset;
  -webkit-box-shadow: #8b1616 0 8px 0 inset;
  box-shadow: #8b1616 0 8px 0 inset;
}
.roundbtn:active.blue .inner {
  -moz-box-shadow: #0077ea 0 8px 0 inset;
  -webkit-box-shadow: #0077ea 0 8px 0 inset;
  box-shadow: #0077ea 0 8px 0 inset;
}
.roundbtn:active.dark .inner {
  -moz-box-shadow: #2c3e50 0 8px 0 inset;
  -webkit-box-shadow: #2c3e50 0 8px 0 inset;
  box-shadow: #2c3e50 0 8px 0 inset;
}

.text {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: Courier New;
  font-size: 13px;
  color: white;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}

HTML

<div class="roundbtn dark">
<div class="inner"><span class="text"><i class="fa fa-facebook fa-2x"></i></span>
</div>
</div>
<div class="roundbtn red">
<div class="inner"><span class="text"><i class="fa fa-google-plus fa-2x"></i></span></div>
</div>
<div class="roundbtn blue">
<div class="inner"><span class="text"><i class="fa fa-twitter fa-2x"></i></span>
</div>
</div>
<div class="roundbtn sea">
<div class="inner"><span class="text"><i class="fa fa-linkedin fa-2x"></i></span>
</div>
</div>

Silakan kreasikan sesuai selera baik warna dan ukurannya.

Flat UI Menu Animasi Drop Down CSS3

Flat UI Menu Animasi Drop Down CSS3 - Setelah hampir sebulan penuh tidak update postingan kali ini saya persembahkan menu kombinasi efek animasi css3 dengan Flat UI color untuk membuat menu gaya flat yang sederhana dan simple tapi masih tetep kelihatan hidup dan menarik. Kombinasi menu lainya seperti artikel sebelumnya kombinasi menu flat ui dengan font awesome .

Untuk tampilannya silakan klik demonya di bawah ini :

• DEMO

Untuk komponen yang di gunakan :

CSS

.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 58px;
}
.menu li {
    background:#22313F;
    min-width: 160px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 0;
}
.menu a {
    color: #fff;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}

.menu li:hover {
    background-color: #16a085;
}
.menu li:hover > a {
    border-radius: 0;
    color: #2c3e50;
}

/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-radius: 0;
    color: #2c3e50;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

HTML

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
        <ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li class="active"><a href="#">Menu 2</a>
        <ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
        <ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>

Dan seterusnya...........dan seterusnya............

</li>
</ul>

Silakan anda kembangkan dan berkreasi sendiri untuk hasil yang lebih maksimal