Googles bildlose Schaltflächen

In letzter Zeit gab es einige Artikel über die neuen bildlosen Schaltflächen von 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

Mir gefällt sehr gut, wie diese neuen Schaltflächen in Google Mail funktionieren. Wie kann ich diese oder ähnliche Schaltflächen auf meiner Website verwenden? Gibt es Open Source-Projekte mit einem ähnlichen Look & Feel?

Welche Elemente könnte ich verwenden, wenn ich mein eigenes Schaltflächenpaket wie dieses mit JQuery / XHTML / CSS rollen wollte? Meine ersten Gedanken sind:

1. Standard <input type="button">mit CSS, um das Aussehen zu verbessern (der Designartikel sprach hauptsächlich über die CSS / Imges.)

2. Jquery Javascript, um ein benutzerdefiniertes Dialogfeld aufzurufen, das auf der Schaltfläche des Ereignisses "onclick" basiert <a>und Tags und eine Suchleiste zum Filtern enthält. Wäre ein Tabellenlayout für dieses Popup sinnvoll?

Ich bin schrecklich im Reverse Engineering von Dingen im Web. Welche Tools könnte ich verwenden, um das Reverse Engineering dieser Schaltflächen zu unterstützen? Mit der Webentwickler-Symbolleiste von Firefox kann ich das CSS oder Javascript (auch wenn es minimiert ist), das in den Popup-Dialogfeldern der Schaltflächen verwendet wird, nicht wirklich sehen. Welches Browser-Tool oder eine andere Methode könnte ich verwenden, um sie anzusehen und einige Ideen zu erhalten?

Ich möchte keine IP-Adresse von Google stehlen, sondern nur eine Vorstellung davon bekommen, wie ich ähnliche Schaltflächenfunktionen erstellen kann.

- BEARBEITEN - Ich habe den Link im ursprünglichen Beitrag nicht gesehen. Es tut uns leid! Ich werde versuchen, neu zu schreiben, um die tatsächliche Frage widerzuspiegeln

StopDesign hat einen ausgezeichneten Beitrag zu diesem Thema hier . [edit 20091107] Diese wurden als Teil der Abschlussbibliothek veröffentlicht : siehe Button-Demo .

Grundsätzlich sind die-Buttons ie zeigt erstellt ein einfaches Stück mit CSS.

Er verwendete ursprünglich 9 Tabellen, um den Effekt zu erzielen:

Später verwendete er einen einfachen linken und rechten Rand von 1 Pixel am oberen und unteren Rand, um den gleichen Effekt zu erzielen.

Der Farbverlauf wird mit drei Schichten gefälscht:

Der gesamte Code befindet sich auf der Seite Benutzerdefinierte Schaltflächen 3.1 . (obwohl der Farbverlauf ohne Bild nur in Firefox und Safari funktioniert)

Schritt für Schritt Anweisungen

1 - Fügen Sie das folgende CSS ein:

/* 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 - Verwenden Sie eine der folgenden Möglichkeiten, um es aufzurufen (mehr finden Sie unter den obigen Links)

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

oder

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

Dies ist laut Firebug ihr "Archiv" -Button.

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

Das CSS ist mehr, als ich dafür organisieren / einfügen möchte. Vielleicht ist es nur mich, aber wenn das Markup / CSS diese schwer geworden, ich glaube , ich würde viel lieber ein Image (oder ein paar Bilder als Hintergründe. Noch besser wäre es, Sprites). Außerdem wäre ein Bild für diese Schaltfläche weniger als ein einzelnes K.

So sehr ich Google liebe, scheint dies ein bisschen übertrieben.

Update: Google ist ein einzigartiger Fall. Wenn Sie eine riesige Website sind und Ihre Inhalte internationalisieren möchten, ist diese bildlose Technik wirklich cool. Sie können nahezu jede geschriebene Sprache auf Ihre Benutzeroberfläche anwenden, ohne neue Bilder generieren zu müssen oder befürchten zu müssen, dass Ihre Schaltflächen beschädigt werden.

Siehe Frage: Was sind die Vorteile einer bildlosen Taste?

Stellen Sie jedoch sicher, dass Sie die Seite zuerst mit der Standardeinstellung rendern:

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

... und verwenden Sie dann jQuery, um das Eingabeelement gegen Ihre benutzerdefinierte Schaltfläche mit einem onClick-Ereignis auszutauschen. Dadurch wird sichergestellt, dass Personen ohne aktiviertes JavaScript Ihre Website weiterhin verwenden können.

Benutzerfreundlichkeit sollte an erster Stelle stehen!

Sie können dieses von mir entwickelte JQuery-Plugin verwenden. Die Schaltflächen funktionieren praktisch überall und da es sich um ein Plugin handelt, sind sie einfach einzurichten und zu konfigurieren.

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

Aktualisierung dieses Beitrags für 2011:

Google hat im Juli 2011 ein neues Design für seine Dienste eingeführt. Die neuen Google-Schaltflächen wurden hier neu erstellt: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Die neuen Schaltflächen sehen folgendermaßen aus:

Sie können versuchen, das Firebug- Plugin für Firefox zu verwenden, um das CSS auf der Schaltfläche anzuzeigen.

Das größte Problem, das Sie haben werden, wird sein, dass es über alle Browser hinweg funktioniert.

Ich denke, Sie sollten sich genau überlegen, ob Sie es wirklich brauchen ... Google bekommt eine Menge Geld, wenn es so etwas macht, wegen der großen Anzahl von Schaltflächen und Sprachen, die es braucht. Ich vermute, dass die meisten Websites und Anwendungen mit einem Image genauso gut dastehen würden.

Eine Open-Source-Komponente ist jedoch eine gute Idee: Verbreiten Sie den Reichtum und die Anstrengungen weit.

Der Großteil der Arbeit hier wird wahrscheinlich nicht das Design sein - diese Beiträge sind bereits eine hervorragende Anleitung für die Verlaufseffekte.

Das Problem ist, dass dies in allen Browsern funktioniert, genauer gesagt in den schrulligen Müllhaufen IE6 und IE7.

Ich denke, Sie sind auf dem richtigen Weg mit einer Standardschaltfläche, die mit jQuery neu geschrieben wird. Auf diese Weise sind Sie weiterhin für Bildschirmleser zugänglich und können sich in wirklich alten Browsern gut verschlechtern.

Für HTML ist es meiner Meinung nach am besten, Google Mail mit jedem Browser zu besuchen und zu sehen, welches HTML produziert wird. Ich würde erwarten, dass es für IE6, IE7 (auch abhängig davon, ob sie den Quirks-Modus benötigen) und alles andere völlig anders ist .

Diese wurden als Teil der Schließungsbibliothek veröffentlicht : siehe Button-Demo

Die Webentwickler-Symbolleiste enthält Informationen zum Ansichtsstil im CSS-Menü, die angeben, welche CSS auf ein Element angewendet wird. In diesem Menü befindet sich auch die Funktion "CSS bearbeiten", mit der Sie das CSS im laufenden Betrieb ändern können, um zu sehen, wie es sich auf die Seite auswirkt.

Der Beitrag mit einem Link zur Abschlussbibliothek gilt nicht. Was als Teil der Schließungsbibliothek veröffentlicht wurde, verwendet Schaltflächen mit Verläufen .

Die anderen aufgeführten Lösungen sind nutzlos. Sie können nicht von dort aus diese Schaltflächen in jedem Browser zum Laufen bringen. In Google Mail funktionieren sie. Was Bowman auf seiner Website zeigt, ist kein funktionierender Code.