Bedah CSS: Tombol Barunya Gmail


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! 😉

CSS3 Accordion Tanpa JavaScript


Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+