Flat Menu UI Efek Flip CSS3

Discussion in 'HTML & Website Design' started by Virlyz82, May 3, 2014.

Page 1 of 2
  1. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    [​IMG]

    Dengan semakin maraknya para pengguna design UI ( User Interface ) baik Flat UI, Semantic UI, maupun Fitur Bootstrap framework ke dalam template blogger. Kali ini saya persembahkan lagi contoh Flat Menu Ui dengan efek flip menggunakan transform CSS3, dan tentunya masih dikombinasikan dengan font icon awesome seperti artikel sebelumnya Kombinasi Menu Metro Ui dengan Font Awesome dan Drop Down Menu Metro UI Awesome.

    Silakan lihat demonya dibawah ini :

    DEMO

    View Code

    Sebagai komponen dasarnya adalah sebagai berikut :

    CSS
    Code:
    @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);
    Code:
    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;
}
    HTML
    Code:
    <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>

seterusnya.......

        </li>
    </ul>
</nav>
    SOURCE
     
    Virlyz82, May 3, 2014
    #1
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    661
    Likes Received:
    27
    Trophy Points:
    28
    menu yang lumayan bagus, tapi gak cocok dengan blog saya :(
     
    cayun, May 3, 2014
    #2
  3. zouero

    zouero Member

    Joined:
    Jan 25, 2014
    Messages:
    363
    Likes Received:
    9
    Trophy Points:
    18
    Google+:
    Di bookmark dulu masbro.. Lumayan buat template layout website :)
     
    zouero, May 3, 2014
    #3
  4. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    tutorialnya keren-keren *cinta*, mas ada gak tutorial bikin menu yang responsive ?
     
    Achmad Muharya, May 3, 2014
    #4
  5. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,239
    Likes Received:
    319
    Trophy Points:
    83
    Google+:
    Itu tombolnya bukan dari gambar ya, seperti yg berekstensi .jpg .png .gif ?
     
    Ardilas, May 4, 2014
    #5
  6. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    kayanya sih itu 95% CSS semuanya :confused:

    *CMIIW
     
    Achmad Muharya, May 4, 2014
    #6
  7. iskandar22

    iskandar22 Member

    Joined:
    Sep 26, 2013
    Messages:
    802
    Likes Received:
    40
    Trophy Points:
    28
    nice info gan,,
    <= blogger sibuk :D
     
    iskandar22, May 4, 2014
    #7
  8. foxydiba

    foxydiba Member

    Joined:
    May 7, 2013
    Messages:
    272
    Likes Received:
    19
    Trophy Points:
    18
    Walaupun bukan selera saya yang lebih suka menu old school bawaan theme/template, saya akui tampilannya bagus mirip Windows 8.
     
    foxydiba, May 4, 2014
    #8
  9. Arul

    Arul Member

    Joined:
    Jul 10, 2013
    Messages:
    305
    Likes Received:
    19
    Trophy Points:
    18
    Google+:
    Wew keren sih menutnya, tapi saya suka yang simple *senang*
     
    Arul, May 4, 2014
    #9
  10. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,239
    Likes Received:
    319
    Trophy Points:
    83
    Google+:
    Keren banget klo gitu.. biar load lebi cepet kan ;)
     
    Ardilas, May 4, 2014
    #10
  11. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,093
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    wah kalau di pasang di blog saya sepertinya kebesaran, kurang pas aja menurut saya.... :)
     
    pram, May 4, 2014
    #11
  12. shofighter

    shofighter Member

    Joined:
    Mar 6, 2013
    Messages:
    236
    Likes Received:
    9
    Trophy Points:
    18
    Google+:
    Gak bisa pasang nih.. gak cocok ama template
     
    shofighter, May 4, 2014
    #12
  13. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,239
    Likes Received:
    319
    Trophy Points:
    83
    Google+:
    Kalau untuk membentuk gambar misalnya seperti gambar windows gitu caranya bagaimana ya?
     
    Ardilas, May 4, 2014
    #13
  14. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    Achmad Muharya, May 5, 2014
    #14
  15. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,239
    Likes Received:
    319
    Trophy Points:
    83
    Google+:
    Ardilas, May 5, 2014
    #15
  16. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Dicocokin aja mas
     
    Virlyz82, May 5, 2014
    #16
  17. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Bener mas gambar diganti Font Icon awesome biar lebih cepet loadingnya..meminimalisir request HTTP bgus untuk SEO dan
    untuk formatnya bisa masukkan dalam css code seperti ini :

    @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

    Atau bisa juga dengan eksternal CSS seperti ini

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

    Kemudian untuk penulisannya seperti ini :

    <i class="fa fa-home"></i> kode selengkapnya bisa dilihat disini

    Kostumisasi font bisa baca disini
     
    Virlyz82, May 5, 2014
    #17
  18. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Untuk trial bisa pake ADD Gadget >> HTML/javascript dan masukkan kodenya seperti ini :

    <style scoped="scoped" type="text/css">
    @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 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);
    }
    </style>

    <nav>
    <ul class="panel">
    <li class="color-1">
    <a href="#">
    <div class="front">
    <i class="fa fa-home fa-4x"></i>
    </div>
    <div class="back">
    <span>home</span>
    </div>
    </a>
    </li>
    </ul>
    </nav>
     
    Virlyz82, May 5, 2014
    #18
  19. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Ga pa2 mbak..buat pengetahuan aja
     
    Virlyz82, May 5, 2014
    #19
  20. Arul

    Arul Member

    Joined:
    Jul 10, 2013
    Messages:
    305
    Likes Received:
    19
    Trophy Points:
    18
    Google+:
    Saya laki-laki lo *benci*
     
    Arul, May 6, 2014
    #20
Page 1 of 2
Loading...
Similar Threads - Flat Menu Efek
  1. Virlyz82

    Flat UI Menu Animasi Drop Down CSS3

    Virlyz82, Aug 24, 2014, in forum: HTML & Website Design
    Replies:
    3
    Views:
    1,521
    asli3rut
    Sep 18, 2014
  2. fanjiwildanu

    Membuat Menu Navigasi Full Color yang Flat UI dan Responsive

    fanjiwildanu, Aug 11, 2014, in forum: HTML & Website Design
    Replies:
    16
    Views:
    5,133
    KangAndre
    Apr 27, 2015
  3. Virlyz82

    Simple Flat UI Menu Modal Dialog

    Virlyz82, Jun 22, 2014, in forum: HTML & Website Design
    Replies:
    2
    Views:
    1,466
    indra.w.m
    Jun 24, 2014
  4. Virlyz82

    Flat UI Button Awesome Modal Dialog

    Virlyz82, Jun 28, 2014, in forum: HTML & Website Design
    Replies:
    0
    Views:
    1,465
    Virlyz82
    Jun 28, 2014
  5. Virlyz82

    Simple Flat UI Subscribe Email

    Virlyz82, Jun 12, 2014, in forum: HTML & Website Design
    Replies:
    2
    Views:
    1,501
    Abid Rakhmansyah
    Jun 13, 2014

Share This Page