Tombol Bayangan Google

90

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

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.

javascript  html  css  gmail  reverse-engineering 
— MikeN
sumber

Jawaban:

55

- 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: 9 Tabel

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: Gradien Tombol

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>
— bjtitus
sumber
32

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?

— Sampson
sumber
13

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!

— Ty.
sumber
5
Mengapa? Gunakan a <button type="submit">sebagai gantinya, karena dapat memiliki elemen anak dan diberi gaya sesuka Anda.
— Kelopak mata tidak terlihat
13

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/

12

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: masukkan deskripsi gambar di sini

— terlambat
sumber
+1. Daripada mencoba memalsukan gradien menggunakan gambar atau elemen tambahan seperti postingan ini, jawaban saat ini, gunakan gradien jika memungkinkan dan kembali ke warna yang wajar di browser lama.
— mikemaccana
5

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.

— Zac Thompson
sumber
2

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 .

— Keith
sumber
1
Saya sangat meragukan Google adalah browser yang mengendus IE untuk rendering tombol.
— Kelopak mata tidak terlihat
1

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.

— Mykroft
sumber
Saya menemukan firebug sangat berguna untuk hal semacam ini - melihat CSS apa yang diterapkan dan perubahan langsung.
— Thelema
Saya juga menggunakan firebug tetapi karena memiliki mesinnya sendiri, ini bisa menjadi sedikit berbobot. Bilah alat jauh lebih ringan dan lebih mudah digunakan menurut saya.
— Mykroft
0

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.

— Jose
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.