CSS3 | Create Bubble Coda Style

Yep, untuk hari ini saya ingin membagi artikel mengenai cara membuat Bubble Coda Style dengan CSS3. Yang dimaksud disini adalah semacam efek untuk memberikan keterangan. Sebagai contoh silahkan lihat gambar di bawah ini.

Bagaimana? keren kan? Hal ini cuma ada di CSS3!
Jikalau tertarik dan saya kira pasti tertarik, silahkan ikuti tutorial dibawah ini, perlu diketahui saya kira tutorial ini akan compatible dengan semua browser termasuk IE yang cukup banyak kekurangan dibanding browser yang lain.

1. Login ke blog anda --> Design --> Edit HTML
2. Letakkan kode CSS (CSS Dasar) berikut

#bubblemenu li {
                display: inline;
                margin-left: 15px;
  cursor:pointer;
               }

3. Dilanjutkan dengan style dari bubble coda style

#bubblemenu li > div {
      width: 150px;
      min-height: 100px;
      position: absolute;
      display: inline;
      margin-left: -120px;
      padding: 5px;
      visibility:hidden;
      opacity: 0;
      margin-top: -125px;
      background: #ffffff;
      font-size:1em;
 
  /* Setting the border-radius property for all Browsers */
                -moz-border-radius: 5px; /* Firefox */
                -webkit-border-radius: 5px; /* Safari and Chrome */
                border-radius: 5px; /* Browsers that Support it like Opera */
 
  /* Setting the box-shadow property for all Browsers */
                -moz-box-shadow: 0 0 8px gray; /* Firefox */
                -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
                box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */
 
  /* Setting the transition property for all Browsers */
  -moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out; /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */  
            }

4. Ditambah dengan efek Hover agar tampilannya lebih menarik

#bubblemenu li:hover > div {
  visibility:visible;
                opacity: 1;
                margin-top: -150px;
 
               /* Setting the transition property for all Browsers */
  -moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out;  /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */
}

5. Nah, kemudian sekarang masuk ke kode HTMLnya

<ul id="bubblemenu">
        <li>
            Penn Jillett
            <div>
               My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them. 
            </div>
        </li>
        <li>
            Thomas Watson
            <div>
                I think there is a world market for maybe five computers.
            </div>
        </li>
        <li>
             Bill Gates
            <div>
               640K ought to be enough for anybody. 
            </div>
        </li>
        <li>
            Sam Ewing 
            <div>
               Computers are like bikinis. They save people a lot of guesswork.
            </div>
        </li>
    </ul>

6. Silahkan edit source HTML di atas. Dan anda juga bisa mengedit kode CSSnya jikalau anda mengerti.
7. Silahkan Save Template dan lihat hasilnya.

Nah, bagaimana? Keren bukan? Buat ngeyakinin silahkan lihat Demonya

Demo - Bubble Coda Style

Silahkan beri komentar, Like, dan sharenya ya!
Sumber: Admixweb.

Tweet

Artikel Terkait: