Bezszwowe przyciski Google
Ostatnio pojawiło się kilka artykułów na temat nowych 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
Naprawdę podoba mi się, jak te nowe przyciski działają w Gmail. Jak Mogę używać tych lub podobnych przycisków na mojej stronie? Czy są jakieś projekty open source o podobnym wyglądzie?
Gdybym chciał zwijać własny pakiet przycisków używając JQuery / XHTML / CSS, jakich elementów mógłbym użyć? Moje początkowe myśli to:
Standard {[0] } z css w celu poprawienia wyglądu (w artykule design mówiło się głównie o css / imges.)
JQuery javascript, aby wywołać niestandardowe okno dialogowe zakorzenione w przycisku "onclick" event, który miałby w sobie tagi
<a>i pasek wyszukiwania do filtrowania? Czy układ tabeli dla tego wyskakującego okienka byłby zdrowy?
Jestem okropny w inżynierii wstecznej rzeczy w Internecie, jakie są niektóre z narzędzi, które mógłbym użyć, aby pomóc w inżynierii wstecznej tych przycisków? Korzystając z paska narzędzi programisty Firefoksa nie widzę css lub javascript (nawet jeśli jest minified), który jest używany na przyciskach okien dialogowych. Jakiego narzędzia przeglądarki lub innej metody mogę użyć, aby zerknąć na nie i jakieś pomysły?
Nie chcę kraść żadnego z IP Google, tylko dowiedzieć się, jak mogę stworzyć podobną funkcjonalność przycisku.
11 answers
-- EDIT -- nie widziałem linku w oryginalnym poście. Przepraszam! Spróbuje ponownie napisać, aby odzwierciedlić rzeczywiste pytanie
StopDesign ma doskonały post na ten tutaj . [edytuj 20091107] zostały one wydane jako część closure library : Zobacz button demo.
W zasadzie niestandardowe przyciski on pokazuje są tworzone przy użyciu prostego kawałka CSS.
Pierwotnie użył 9 tabel, aby uzyskać 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 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 go wywołać (więcej można znaleźć w linkach above)
<a href="#" class="btn"><span><span><b> </b><u>button</u></span></span></a>
Lub
<button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-08 14:10:17
To jest ich przycisk "archiwum", zgodnie z 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 jest bardziej niż zależy mi na zorganizowaniu / wklejeniu do tego. Być może to tylko ja, ale kiedy znaczniki / css stają się tak ciężkie, myślę, że wolałabym użyć obrazu (lub kilku obrazów jako tła. Jeszcze lepiej, Sprites). Poza tym obraz dla tego przycisku byłby mniejszy niż pojedyncze K.
Mimo, że kocham Google, to wydaje się trochę przesada.
Aktualizacja: Google to wyjątkowy przypadek. Jeśli jesteś ogromną witryną i chcesz umiędzynarodowić swoje treści, ta technika bez obrazków jest naprawdę fajna. To pozwala na zastosowanie prawie każdy język pisany do interfejsu użytkownika, bez konieczności generowania nowych obrazów, lub strach przed złamaniem przycisków.
Zobacz pytanie: jakie są zalety korzystania z przycisku bez obrazu?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:00:17
Jakkolwiek zdecydujesz się to zrobić, upewnij się, że najpierw wyrenderujesz stronę z wartością domyślną:
<input type="submit" value="submit" />
... Następnie użyj jQuery, aby zamienić element wejściowy za pomocą niestandardowego przycisku, który ma Zdarzenie onClick. Zapewni to, że osoby bez włączonej obsługi JavaScript nadal będą mogły korzystać z twojej witryny.
Użyteczność powinna być najważniejsza!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-10 20:11:46
Możesz użyć tej wtyczki jquery, którą opracowałem. Przyciski działają praktycznie w dowolnym miejscu, a ponieważ jest to wtyczka, można je łatwo skonfigurować i skonfigurować.
Aktualizacja tego postu na rok 2011:
W lipcu 2011 roku Google wprowadziło nowy wygląd swoich usług. Nowe przyciski Google zostały odtworzone tutaj: http://pixify.com/blog/use-google-plus-to-improve-your-ui/
Nowe przyciski wyglądają tak:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-18 15:27:46
Możesz spróbować użyć wtyczki Firebug dla Firefoksa, aby wyświetlić CSS na przycisku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-06 15:15:59
Największym problemem będzie to, że będzie działać w różnych przeglądarkach.
Myślę, że powinieneś mocno rozważyć, czy naprawdę tego potrzebujesz ... Google dostaje dużo huk for the buck, robiąc coś takiego z powodu ogromnej liczby przycisków i języków, których potrzebują; podejrzewam, że większość witryn i aplikacji byłaby równie dobrze korzystająca z obrazu.
Komponent open-source jest jednak dobrym pomysłem: szeroko rozpowszechniać bogactwo i wysiłek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-11 07:24:08
Większość prac tutaj prawdopodobnie nie będzie projektem - te posty są już doskonałym How-To na temat efektów gradientowych.
Problem polega na tym, że to działa we wszystkich przeglądarkach, a dokładniej na dziwacznych stosach śmieci, które są IE6 i IE7.
Myślę, że jesteś na dobrej drodze ze standardowym przyciskiem, który zostanie napisany ponownie za pomocą jQuery - w ten sposób nadal będziesz Dostępny dla czytników ekranu i możesz ładnie się degradować w naprawdę starych przeglądarkach.
Dla HTML myślę, że najlepiej jest odwiedzić Gmaila z każdej przeglądarki i zobaczyć, co HTML jest produkowany - spodziewam się, że będzie zupełnie inaczej dla IE6, IE7 (również w zależności od tego, czy potrzebują quirks-mode) i wszystko inne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-13 12:53:02
Zostały one wydane jako część closure library : Zobacz button demo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-07 22:32:48
Pasek Narzędzi Web Developer zawiera informacje o stylu widoku w menu css, które informują o tym, jaki css jest zastosowany do elementu. W tym menu znajduje się również funkcja Edytuj CSS, która pozwoli Ci zmieniać CSS w locie, aby zobaczyć, jak wpływa to na stronę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-06 16:23:09
Post z linkiem do biblioteki zamkniętej Nie dotyczy. To, co zostało wydane jako część biblioteki closure, używa przycisków z gradientami .
Inne wymienione rozwiązania są bezużyteczne. Nie można przejść stamtąd i uzyskać te przyciski działa na każdej przeglądarce Gmail ma je działa. To, co Bowman pokazuje na swojej stronie, nie działa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-12-30 07:38:25