Tombol Bayangan Google

Ada beberapa artikel baru-baru ini tentang tombol tanpa gambar baru dari Google:

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

Saya sangat menyukai cara kerja tombol-tombol baru ini di Gmail. Bagaimana cara menggunakan tombol ini atau yang serupa di situs saya? Apakah ada proyek open source dengan tampilan & nuansa serupa?

Jika saya ingin menggulung paket tombol saya sendiri seperti ini menggunakan JQuery / XHTML / CSS, elemen apa yang dapat saya gunakan? Pikiran awal saya adalah:

1. Standar <input type="button">dengan css untuk meningkatkan tampilan (artikel desain sebagian besar membahas tentang css / imges.)

2. Javascript untuk memunculkan dialog ubahsuaian yang di-root ke tombol pada acara "onclick" yang akan memiliki <a>tag di dalamnya dan bilah penelusuran untuk pemfilteran? Akankah tata letak tabel untuk popup itu waras?

Saya buruk dalam hal rekayasa balik di web, alat apa yang dapat saya gunakan untuk membantu merekayasa balik tombol-tombol ini? Menggunakan bilah alat pengembang web Firefox, saya tidak dapat benar-benar melihat css atau javascript (meskipun dikecilkan) yang digunakan pada dialog sembulan tombol. Alat browser atau metode lain apa yang dapat saya gunakan untuk mengintip dan mendapatkan ide?

Saya tidak ingin mencuri IP Google apa pun, cukup dapatkan ide tentang bagaimana saya dapat membuat fungsi tombol yang serupa.

- EDIT - Saya tidak melihat tautan di postingan asli. Maaf! Akan mencoba dan menulis ulang untuk mencerminkan pertanyaan yang sebenarnya

StopDesign memiliki posting yang bagus tentang ini di sini . [Sunting 20091107] Ini dirilis sebagai bagian dari perpustakaan penutupan : lihat demo tombol .

Pada dasarnya tombol kustom yang dia tampilkan dibuat dengan menggunakan sedikit CSS.

Dia awalnya menggunakan 9 tabel untuk mendapatkan efek:

Tetapi kemudian dia menggunakan margin kiri dan kanan 1px sederhana di tepi atas dan bawah untuk mencapai efek yang sama.

Gradien dipalsukan dengan menggunakan tiga lapisan:

Semua kode dapat ditemukan di halaman Tombol Kustom 3.1 . (meskipun gradien tanpa gambar hanya berfungsi di Firefox dan Safari)

Petunjuk Langkah demi Langkah

1 - Masukkan CSS berikut:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - Gunakan salah satu cara berikut untuk memanggilnya (selengkapnya dapat ditemukan di tautan di atas)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

atau

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

Ini adalah Tombol "Arsip" mereka, menurut Firebug.

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

CSS lebih dari yang saya ingin atur / tempel untuk ini. Mungkin hanya saya, tetapi ketika markup / css menjadi seberat ini, saya pikir saya lebih suka MENGGUNAKAN GAMBAR (atau beberapa gambar sebagai latar belakang. Lebih baik lagi, Sprite). Selain itu, gambar untuk tombol ini akan berukuran kurang dari satu K.

Meskipun saya sangat menyukai Google, ini sepertinya terlalu berlebihan.

Pembaruan: Google adalah kasus unik. Jika Anda adalah situs besar dan ingin menginternasionalkan konten Anda, maka teknik tanpa gambar ini sebenarnya sangat keren. Ini memungkinkan Anda untuk menerapkan hampir semua bahasa tertulis ke UI Anda, tanpa perlu membuat gambar baru, atau takut merusak tombol Anda.

Lihat Pertanyaan: Apa keuntungan menggunakan tombol tanpa gambar?

Bagaimanapun Anda memutuskan untuk melakukannya, pastikan Anda merender halaman terlebih dahulu dengan default:

<input type="submit" value="submit" />

... Dan kemudian gunakan jQuery untuk menukar elemen input dengan tombol kustom Anda yang memiliki event onClick. Ini akan memastikan bahwa orang-orang yang tidak mengaktifkan JavaScript akan tetap dapat menggunakan situs Anda.

Kegunaan harus diutamakan!

Anda bisa menggunakan plugin jquery yang saya kembangkan ini. Tombol-tombol tersebut bekerja secara praktis di mana saja dan karena ini adalah plugin, mereka mudah diatur dan dikonfigurasi.

http://swizec.com/code/styledButton/

Memperbarui pos ini untuk tahun 2011:

Google meluncurkan desain baru di seluruh layanannya pada Juli 2011. Tombol Google baru telah dibuat ulang di sini: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Tombol baru terlihat seperti ini:

Anda dapat mencoba menggunakan plugin Firebug untuk Firefox untuk melihat CSS pada tombol tersebut.

Masalah terbesar yang akan Anda hadapi adalah membuatnya berfungsi di semua browser.

Saya pikir Anda harus benar-benar mempertimbangkan apakah Anda benar-benar membutuhkannya ... Google mendapatkan banyak keuntungan dengan membuat sesuatu seperti ini karena banyaknya tombol dan bahasa yang mereka butuhkan; Saya menduga bahwa sebagian besar situs dan aplikasi sama-sama kaya menggunakan gambar.

Komponen open-source adalah ide yang bagus: sebarkan kekayaan dan usaha secara luas.

Mayoritas pekerjaan di sini mungkin bukan desainnya - posting tersebut sudah menjadi How-To yang sangat bagus tentang efek gradien.

Masalahnya adalah membuat ini berfungsi di semua browser, atau lebih khusus lagi tumpukan sampah yang unik yaitu IE6 dan IE7.

Saya pikir Anda berada di jalur yang benar dengan tombol standar yang ditulis ulang dengan jQuery - dengan begitu Anda masih dapat diakses oleh pembaca layar dan dapat menurun dengan baik di browser yang sangat lama.

Untuk HTML, saya pikir taruhan terbaik Anda adalah mengunjungi Gmail dengan setiap browser dan melihat HTML apa yang diproduksi - saya berharap itu akan sangat berbeda untuk IE6, IE7, (juga tergantung pada apakah mereka memerlukan quirks-mode) dan yang lainnya .

Ini dirilis sebagai bagian dari pustaka penutupan : lihat demo tombol

The Web Developer Toolbar memiliki informasi tampilan gaya di bawah menu css yang akan memberitahu Anda apa css diterapkan ke item. Ada juga fitur Edit CSS di menu itu yang akan memungkinkan Anda mengubah CSS dengan cepat untuk melihat bagaimana pengaruhnya terhadap halaman.

Postingan dengan link ke perpustakaan closure tidak berlaku. Apa yang dirilis sebagai bagian dari pustaka penutupan menggunakan tombol dengan gradien .

Solusi lain yang tercantum tidak berguna. Anda tidak dapat pergi dari sana dan mengaktifkan tombol-tombol ini di setiap browser yang berfungsi Gmail. Apa yang ditunjukkan Bowman di situsnya bukanlah kode yang berfungsi.