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:
Standard
<input type="button">
z css, aby poprawić wygląd (artykuł o projekcie mówił głównie o css / imges).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.
<button type="submit">
zamiast tego, ponieważ może mieć elementy potomne i być stylizowany tak, jak chcesz.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/
źródło
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:
źródło
Możesz spróbować użyć wtyczki Firebug do przeglądarki Firefox, aby wyświetlić CSS na przycisku.
źródło
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.
źródło
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 .
źródło
Zostały one wydane jako część biblioteki zamknięć : zobacz demo przycisku
źródło
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ę.
źródło
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.
źródło