Bedah CSS: Tombol Barunya Gmail

29Feb12

Sejak Google merilis tampilan barunya pada 2011, antarmuka pengguna (user interface) dari Gmail yang termasuk salah satu layanannya pun ikut berubah dan rasanya menjadi lebih nyaman. Salah satu komponen yang saya perhatikan cukup menarik adalah tombol-tombolnya yang warnanya oren dan biru itu yang entah mengapa meski terlihat sederhana tapi tampak hidup. Apa rahasianya?

Untuk melihat CSS dari sebuah elemen kita bisa menggunakan tool WebKit Inspector yang biasanya terinstall di browser seperti Google Chrome & Safari, atau kalau menggunakan browser Mozilla Firefox bisa menginstall add-on yang namanya Firebug. Silakan pilih yang mana saja, hanya kebetulan disini saya menggunakan Google Chrome.

Oke, mari kita teliti!

Buka halaman Gmail, kemudian kita lakukan klik kanan pada tombol yang ingin dilihat sourcenya > pilih “Inspect element”

Lihat bahwa tombol tersebut sebenarnya bukan elemen <button> tapi elemen <a> yang distyle sedemikian rupa. Disini kita bisa melihat class CSSnya adalah g-button dan g-button-red, apa saja rule CSS dari kedua class tersebut bisa dilihat di kolom sebelah kanan.

Cukup menarik, Google menggunakan banyak property CSS3 seperti text-shadow yang memberikan kedalaman pada teks, text-transform yang secara otomatis mengubah case teks (disini menjadi huruf kapital), gradient yang memberikan efek gradasi warna pada tombol dengan pemilihan warna yang nilai hexanya berdekatan tampak sangat menyatu, border-radius yang memberi efek lekukan dinamis pada sudut-sudut tombol, transition yang memberikan efek animasi pada perubahan state default ke state hover, dst.

Bagaimana CSS dari tombol tersebut pada saat hover? oke kita centang :hover pada inspector untuk melihatnya

Apa yang berubah? ternyata Google hanya mengubah warna dari gradient dan menambahkan property box-shadow dengan transparansi 0,2 namun dengan adanya property transition di kedua arah perubahan dari bayangannya sangat haluus

Nah kode CSSnya sudah kita dapatkan, sekarang kita bisa buat replikanya untuk melihat demonya buat sebuah file HTML (bisa pake notepad atau text editor apapun) dengan isi sebagai berikut:

<!doctype html>
<html>
  <head>
    <style>
      html {
        font: 81.25% arial, helvetica, sans-serif;
      }
      a {
        text-decoration: none;
      }
      .tombol {
        display: inline-block;
        min-width: 46px;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        height: 27px;
        padding: 0 8px;
        line-height: 27px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid transparent;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        text-transform: uppercase;
        background-color: #D14836;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#D14836));
        background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
        background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
        background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
        background-image: -o-linear-gradient(top,#DD4B39,#D14836);
        background-image: linear-gradient(top,#DD4B39,#D14836);
      }
      .tombol:hover {
        text-decoration: none;
        -webkit-transition: all 0.0s;
        -moz-transition: all 0.0s;
        -ms-transition: all 0.0s;
        -o-transition: all 0.0s;
        transition: all 0.0s;
        border: 1px solid #B0281A;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        background-color: #C53727;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#C53727));
        background-image: -webkit-linear-gradient(top,#DD4B39,#C53727);
        background-image: -moz-linear-gradient(top,#DD4B39,#C53727);
        background-image: -ms-linear-gradient(top,#DD4B39,#C53727);
        background-image: -o-linear-gradient(top,#DD4B39,#C53727);
        background-image: linear-gradient(top,#DD4B39,#C53727);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
      }
    </style>
  </head>
  <body>
    <a href="#" class="tombol">F4154LMAN</a>
  </body>
</html>

Coba jalankan di browser, dan…

Wow, sik asik! ;)

About these ads


2 Responses to “Bedah CSS: Tombol Barunya Gmail”

  1. Sik Asik Sika Asik , Thank You

  2. Oh ya ! kenapa website mas faisalman dari wordpress.com bisa jadi .com


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 186 pengikut lainnya.

%d bloggers like this: