Bezimienne przyciski Google

Niedawno pojawiło się kilka artykułów na temat nowych bezobrazowych przycisków 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

Bardzo podoba mi się sposób działania tych nowych przycisków w Gmailu. Jak mogę używać tych lub podobnych przycisków w mojej witrynie? Czy są jakieś projekty open source o podobnym wyglądzie i działaniu?

Jakich elementów mógłbym użyć, gdybym chciał zwinąć swój własny pakiet przycisków w ten sposób, używając JQuery / XHTML / CSS? Moje pierwsze myśli to:

1. Standard <input type="button">z css, aby poprawić wygląd (artykuł o projekcie mówił głównie o css / imges).

2. Jquery javascript do wywołania niestandardowego okna dialogowego zakorzenionego w przycisku zdarzenia „onclick”, które zawierałoby <a>tagi i pasek wyszukiwania do filtrowania? Czy układ tabeli dla tego wyskakującego okienka byłby rozsądny?

Nie radzę sobie z inżynierią wsteczną w Internecie, jakich narzędzi mógłbym użyć, aby pomóc w inżynierii wstecznej tych przycisków? Korzystając z paska narzędzi programisty przeglądarki Firefox, tak naprawdę nie widzę css lub javascript (nawet jeśli jest zminimalizowany), który jest używany w wyskakujących okienkach przycisków. Jakiego narzędzia przeglądarki lub innej metody mogę użyć, aby je zerknąć i znaleźć kilka pomysłów?

Nie chcę ukraść żadnego adresu IP Google, po prostu wyobraź sobie, jak mogę stworzyć podobną funkcjonalność przycisku.

- EDYTUJ - nie widziałem linku w oryginalnym poście. Przepraszam! Spróbuje ponownie napisać, aby odzwierciedlić rzeczywiste pytanie

StopDesign posiada doskonałą post na to tutaj . [edytuj 20091107] Zostały one wydane jako część biblioteki zamknięć : zobacz demo przycisku .

Zasadniczo niestandardowe przyciski, które pokazuje, są tworzone za pomocą prostego fragmentu CSS.

Pierwotnie użył 9 tabel, aby uzyskać efekt:

Ale później użył prostego lewego i prawego marginesu 1 piksela na górnej i dolnej krawędzi, aby osiągnąć ten sam efekt.

Gradient jest sfałszowany za pomocą trzech warstw:

Cały kod można znaleźć na stronie Custom Buttons 3.1 . (chociaż gradient bez obrazu działa tylko w Firefoksie i Safari)

Instrukcje krok po kroku

1 - Wstaw następujący kod CSS:

/* 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 - Użyj jednego z poniższych sposobów, aby to wywołać (więcej można znaleźć w linkach powyżej)

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

lub

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

Według Firebuga to jest ich przycisk „Archiwum”.

<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 to coś więcej niż chciałbym zorganizować / wkleić w tym celu. Być może to tylko ja, ale kiedy znaczniki / css stają się tak ciężkie, myślę, że wolałbym raczej UŻYĆ OBRAZU (lub kilku obrazów jako tła. Jeszcze lepiej, Sprites). Poza tym obraz dla tego przycisku byłby mniejszy niż pojedynczy K.

Choć kocham Google, wydaje mi się to trochę przesada.

Aktualizacja: Google to wyjątkowy przypadek. Jeśli prowadzisz ogromną witrynę i chcesz umiędzynarodowić swoje treści, ta technika bez obrazów jest naprawdę fajna. Pozwala na zastosowanie dowolnego języka pisanego w interfejsie użytkownika, bez konieczności generowania nowych obrazów lub obawy o złamanie przycisków.

Zobacz pytanie: Jakie są zalety używania przycisku bez obrazu?

Jednak zdecydujesz się to zrobić, upewnij się, że najpierw wyrenderujesz stronę z ustawieniem domyślnym:

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

... a następnie użyj jQuery, aby zamienić element wejściowy na swój niestandardowy przycisk, który ma zdarzenie onClick. Zapewni to, że osoby bez włączonej obsługi JavaScript będą nadal mogły korzystać z Twojej witryny.

Użyteczność powinna być najważniejsza!

Możesz użyć tej wtyczki jquery, którą opracowałem. Przyciski działają praktycznie wszędzie, a ponieważ jest to wtyczka, są łatwe w konfiguracji i konfiguracji.

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

Aktualizuję ten post na rok 2011:

Google wprowadził nowy wygląd swoich usług w lipcu 2011. Nowe przyciski Google zostały odtworzone tutaj: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Nowe przyciski wyglądają tak:

Możesz spróbować użyć wtyczki Firebug do przeglądarki Firefox, aby wyświetlić CSS na przycisku.

Największym problemem, jaki będziesz mieć, będzie to, że będzie działać w różnych przeglądarkach.

Myślę, że powinieneś mocno się zastanowić, czy naprawdę tego potrzebujesz ... Google robi dużo pieniędzy, robiąc coś takiego, ze względu na ogromną liczbę przycisków i języków, których potrzebują; Podejrzewam, że większość witryn i aplikacji mogłaby równie dobrze korzystać z obrazu.

Jednak komponent open source jest dobrym pomysłem: szeroko rozpowszechniaj bogactwo i wysiłek.

Większość pracy tutaj prawdopodobnie nie będzie projektem - te posty są już doskonałym poradnikiem dotyczącym efektów gradientu.

Problem polega na tym, że działa to we wszystkich przeglądarkach, a dokładniej w dziwacznych stosach śmieci, które są IE6 i IE7.

Myślę, że jesteś na dobrej drodze ze standardowym przyciskiem, który zostanie ponownie napisany za pomocą jQuery - w ten sposób będziesz nadal dostępny dla czytników ekranu i możesz ładnie upaść w naprawdę starych przeglądarkach.

Jeśli chodzi o HTML, myślę, że najlepiej jest odwiedzić Gmaila w każdej przeglądarce i zobaczyć, jaki HTML jest tworzony - spodziewałbym się, że będzie on zupełnie inny dla IE6, IE7 (również w zależności od tego, czy potrzebują trybu dziwactw) i wszystkiego innego .

Zostały one wydane jako część biblioteki zamknięć : zobacz demo przycisku

Web Developer Toolbar ma wyświetlać informacje w menu w stylu CSS, który powie, co css jest stosowane do elementu. W tym menu znajduje się również funkcja Edytuj CSS, która pozwala na zmianę CSS w locie, aby zobaczyć, jak wpływa na stronę.

Post z linkiem do biblioteki zamknięcia nie ma zastosowania. To, co zostało wydane jako część biblioteki zamknięć, używa przycisków z gradientami .

Inne wymienione rozwiązania są bezużyteczne. Nie możesz przejść stamtąd i sprawić, aby te przyciski działały w każdej przeglądarce, w której Gmail działa. To, co Bowman pokazuje na swojej stronie, nie jest działającym kodem.