Headline
Loading...

Membuat Menu Flat UI dengan Efek Flip

    OOrang Selalu tertarik akan sebua blog dengan tampilan menu dropdown atau vertikal dengan sangat menarik di pandang mata, semuanya itu dilakukan hanya karena kreativitas seorang blogger untuk menyajikan kepada para blogger sebuah tampilan inovativ hasil karya sendiri ataupun contekan dari blog tetanggaa, yang terpenting jangan cloning, maka saya tampilkan menu yang agak berbeda dengan blog lain dengan sentuhan CSS untuk itu kita lihat cara membuatnya

    • Silahkan pilih " Tata Letak " pada dasbor blog anda.
    • klik "Add gadget " ( Tambahkan gadget )
    • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
    • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
    • Edit html , save dan lihat hasilnya, semoga bermanfaat...
      
       <style>
      @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
      @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
      
      nav ul {
        min-width: 600px;
        position: relative;
        display: table;
        margin: 50px auto;
        clear: both;
      }
      
      nav ul li {
        list-style: none;
        float: left;
      }
      
      nav ul li a {
          width: 100px;
          height: 100px;
          float: left;
          margin: 0 10px;
        -webkit-perspective: 600px;
           -moz-perspective: 600px;
            -ms-perspective: 600px;
                perspective: 600px;
      }
      
      nav ul li .front {
        text-align: center;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
           -moz-transform: rotateX(0deg) rotateY(0deg);
            -ms-transform: rotateX(0deg) rotateY(0deg);
             -o-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
             -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
             -o-backface-visibility: hidden;
                backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
      }
      
      nav ul li:hover .front {
        -webkit-transform: rotateX(0deg) rotateY(180deg);
           -moz-transform: rotateX(0deg) rotateY(180deg);
            -ms-transform: rotateX(0deg) rotateY(180deg);
             -o-transform: rotateX(0deg) rotateY(180deg);
      }
      
      nav ul li .back {
        position: absolute;
        top: 0;
        width: inherit;
        height: inherit;
        text-align: center;
        z-index: -1;
        -webkit-transform: rotateX(0deg) rotateY(-180deg);
           -moz-transform: rotateX(0deg) rotateY(-180deg);
            -ms-transform: rotateX(0deg) rotateY(-180deg);
             -o-transform: rotateX(0deg) rotateY(-180deg);
        -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
             -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
             -o-backface-visibility: hidden;
                backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
      }
      
      nav ul li:hover .back {
        z-index: 1;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
           -moz-transform: rotateX(0deg) rotateY(0deg);
            -ms-transform: rotateX(0deg) rotateY(0deg);
             -o-transform: rotateX(0deg) rotateY(0deg);
      }
      
      nav ul li i {
        line-height: 100px !important;
        color: white;
        vertical-align: middle !important;
      }
      
      nav ul li span {
        font-family: 'Roboto';
        font-size: 20px;
        font-weight: 300;
        line-height: 100px;
        color: white;
        text-transform: lowercase;
        vertical-align: middle;
      }
      
      nav ul li.color-1 .front,
      nav ul li.color-1 .back {
        background-color: #3498db;
      }
      
      nav ul li.color-2 .front,
      nav ul li.color-2 .back {
        background-color: #2ecc71;
      }
      
      nav ul li.color-3 .front,
      nav ul li.color-3 .back {
        background-color: #1abc9c;
      }
      
      nav ul li.color-4 .front,
      nav ul li.color-4 .back {
        background-color: #f39c12;
      }
      
      nav ul li.color-5 .front,
      nav ul li.color-5 .back {
        background-color: #34495e;
      }
      </style>
      <nav>
          <ul class="panel">
              <li class="color-1"> <a href="#">
                      <div class="front">
                          <i class="fa fa-windows fa-4x"></i>
                      </div>
                      <div class="back">
                          <span>HOME</span>
                      </div>
                  </a>
      
              </li>
              <li class="color-2"> <a href="#">
                      <div class="front">
                          <i class="fa fa-bars fa-4x"></i>
                      </div>
                      <div class="back">
                          <span>MENU</span>
                      </div>
                  </a>
      
              </li>
              <li class="color-3"> <a href="#">
                      <div class="front">
                          <i class="fa fa-cogs fa-4x"></i>
                      </div>
                      <div class="back">
                          <span>PORTFOLIO</span>
                      </div>
                  </a>
      
              </li>
              <li class="color-4"> <a href="#">
                      <div class="front">
                          <i class="fa fa-user fa-4x"></i>
                      </div>
                      <div class="back">
                          <span>ABOUT ME</span>
                      </div>
                  </a>
      
              </li>
              <li class="color-5"> <a href="#">
                      <div class="front">
                          <i class="fa fa-envelope-o fa-4x"></i>
                      </div>
                      <div class="back">
                          <span>CONTACT</span>
                      </div>
                  </a>
      
              </li>
          </ul>
      </nav>
      </div>
      Simpan dan Lihat Hasilnya
      di 14.03

      1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
      2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
      3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

      Konversi KodeEmotionForum

      Back to Top