Google'ın İmgesiz Düğmeleri

Son zamanlarda Google'ın yeni imajsız düğmeleriyle ilgili birkaç makale yayınlandı:

• 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

Bu yeni düğmelerin Gmail'de nasıl çalıştığını gerçekten çok seviyorum. Sitemde bu veya benzer düğmeleri nasıl kullanabilirim? Benzer bir görünüme ve hisse sahip herhangi bir açık kaynak projesi var mı?

JQuery / XHTML / CSS kullanarak kendi düğme paketimi böyle döndürmek isteseydim, hangi öğeleri kullanabilirim? İlk düşüncelerim:

1. <input type="button">Görünümü iyileştirmek için css ile standart (tasarım makalesi çoğunlukla css / imges içerir.)

2. "Onclick" etkinliğindeki düğmenin köklü özel bir iletişim kutusu açmak için Jquery javascript, içinde <a>etiketler ve filtreleme için bir arama çubuğu olacak mı? Bu açılır pencere için bir tablo düzeni mantıklı olur mu?

Web'de tersine mühendislik yapmakta çok kötüyüm, bu düğmelerin tersine mühendislik yapmasına yardımcı olmak için kullanabileceğim bazı araçlar nelerdir? Firefox'un web geliştirici araç çubuğunu kullanarak, düğmeler açılır pencerelerinde kullanılan css veya javascript'i (küçültülmüş olsa bile) gerçekten göremiyorum. Onlara göz atmak ve fikir edinmek için hangi tarayıcı aracını veya başka bir yöntemi kullanabilirim?

Google'ın herhangi bir IP'sini çalmak istemiyorum, sadece benzer düğme işlevlerini nasıl oluşturabileceğim konusunda bir fikir edin.

- DÜZENLE - Orijinal gönderide bağlantıyı görmedim. Afedersiniz! Gerçek soruyu yansıtmak için yeniden yazmaya çalışacak

StopDesign'ın bu konuda harika bir yazısı var . [edit 20091107] Bunlar, kapanış kitaplığının bir parçası olarak yayınlandı : düğme demosuna bakın .

Temelde özel düğmeler o gösterileri CSS basit bit kullanılarak oluşturulur.

Etkiyi elde etmek için başlangıçta 9 tablo kullandı:

Ancak daha sonra aynı etkiyi elde etmek için üst ve alt sınırlarda basit bir 1px sol ve sağ kenar boşluğu kullandı.

Degrade, üç katman kullanılarak sahtedir:

Kodun tamamı Özel Düğmeler 3.1 sayfasında bulunabilir. (resimsiz gradyan yalnızca Firefox ve Safari'de çalışıyor olsa da)

Adım adım talimatlar

1 - Aşağıdaki CSS'yi ekleyin:

/* 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 - Onu aramak için aşağıdaki yollardan birini kullanın (yukarıdaki bağlantılarda daha fazlası bulunabilir)

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

veya

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

Firebug'a göre bu onların "Arşiv" Düğmesidir.

<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 bunun için düzenlemeyi / yapıştırmayı umursadığımdan daha fazla. Belki sadece ben, ama işaretleme / css bu kadar ağır hale geldiğinde, sanırım BİR GÖRÜNTÜ (veya arka plan olarak birkaç görüntü. Daha da iyisi, Sprites) KULLANMAYI tercih ederim . Ayrıca, bu düğme için bir görüntü tek bir K'den daha az olacaktır.

Google'ı sevdiğim kadarıyla, bu biraz abartılı görünüyor.

Güncelleme: Google benzersiz bir durumdur. Büyük bir siteyseniz ve içeriğinizi uluslararası hale getirmek istiyorsanız, bu resimsiz teknik gerçekten harika. Yeni görüntüler oluşturmanıza gerek kalmadan veya düğmelerinizi kırma korkusu olmadan kullanıcı arayüzünüze hemen hemen her yazı dilini uygulamanıza olanak tanır.

Soruya Bak: Hayali olmayan bir düğme kullanmanın avantajları nelerdir?

Ancak bunu yapmaya karar verirseniz, önce sayfayı varsayılan olarak oluşturduğunuzdan emin olun:

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

... Ve sonra jQuery'yi kullanarak giriş öğesini onClick olayına sahip özel düğmenizle değiştirin. Bu, JavaScript'i etkinleştirmeyen kişilerin sitenizi yine de kullanabilmesini sağlayacaktır.

Kullanılabilirlik önce gelmeli!

Geliştirdiğim bu jquery eklentisini kullanabilirsiniz. Düğmeler pratik olarak her yerde çalışır ve bir eklenti olduğu için kurulumu ve yapılandırması kolaydır.

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

2011 için bu gönderiyi güncelleme:

Google, Temmuz 2011'de hizmetlerinde yeni bir tasarım başlattı. Yeni Google düğmeleri burada yeniden oluşturuldu: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Yeni düğmeler şuna benzer:

Düğme üzerindeki CSS'yi görüntülemek için Firefox için Firebug eklentisini kullanmayı deneyebilirsiniz .

Yaşayacağınız en büyük sorun, tarayıcılarda çalışmasını sağlamak olacaktır.

Bence buna gerçekten ihtiyacınız olup olmadığını kesinlikle düşünmelisiniz ... Google, ihtiyaç duydukları çok sayıda düğme ve dil nedeniyle böyle bir şey yaparak paranın karşılığını fazlasıyla alıyor; Çoğu sitenin ve uygulamanın bir resim kullanmasının iyi olacağını düşünüyorum.

Açık kaynaklı bir bileşen iyi bir fikirdir: zenginliği ve çabayı geniş bir alana yaymak.

Buradaki çalışmanın çoğu muhtemelen tasarım olmayacak - bu yazılar zaten gradyan efektlerinde mükemmel bir Nasıl Yapılır.

Sorun, bunun tüm tarayıcılarda veya daha spesifik olarak IE6 ve IE7 olan ilginç çöp yığınlarında çalışmasını sağlamaktır.

JQuery ile yeniden yazılan standart bir düğme ile doğru yolda olduğunuzu düşünüyorum - bu şekilde ekran okuyucular için hala erişilebilir olacaksınız ve gerçekten eski tarayıcılarda hoş bir şekilde bozulabilirsiniz.

HTML için en iyi seçeneğiniz her tarayıcıyla Gmail'i ziyaret etmek ve hangi HTML'nin üretildiğini görmek - IE6, IE7 için (ayrıca tuhaf modlara ihtiyaç duyup duymadıklarına bağlı olarak) tamamen farklı olmasını beklerdim. .

Bunlar, kapatma kitaplığının bir parçası olarak yayınlandı : düğme demosuna bakın

Web Developer Toolbar css bir öğeye uygulanan ne söyleyecektir css menü altında bir görünüm stili bilgileri yer alır. Bu menüde, sayfayı nasıl etkilediğini görmek için CSS'yi anında değiştirmenize izin verecek CSS Düzenle özelliği de vardır.

Kapanış kitaplığına bağlantı içeren gönderi geçerli değildir. Kapanış kitaplığının bir parçası olarak serbest bırakılanlar degradeli düğmeler kullanır .

Listelenen diğer çözümler işe yaramaz. Oradan gidip bu düğmeleri Gmail'in çalıştırdığı her tarayıcıda çalıştıramazsınız. Bowman'ın sitesinde gösterdiği çalışma kodu değil.