Il y a eu récemment quelques articles sur les nouveaux boutons sans image de 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
J'aime beaucoup le fonctionnement de ces nouveaux boutons dans Gmail. Comment puis-je utiliser ces boutons ou des boutons similaires sur mon site? Existe-t-il des projets open source avec une apparence et une convivialité similaires?
Si je voulais rouler mon propre package de boutons comme celui-ci en utilisant JQuery / XHTML / CSS, quels éléments pourrais-je utiliser? Mes premières pensées sont:
Standard
<input type="button">
avec css pour améliorer l'apparence (l'article sur la conception parlait principalement des implications css / imges.)Jquery javascript pour faire apparaître une boîte de dialogue personnalisée enracinée sur le bouton de l'événement "onclick" qui contiendrait des
<a>
balises et une barre de recherche pour le filtrage? Une disposition de table pour ce popup serait-elle saine?
Je suis très doué pour le reverse engineering de choses sur le Web, quels sont certains des outils que je pourrais utiliser pour aider à reverse engineering de ces boutons? En utilisant la barre d'outils de développement Web de Firefox, je ne peux pas vraiment voir le css ou le javascript (même s'il est minifié) qui est utilisé dans les boîtes de dialogue contextuelles des boutons. Quel outil de navigation ou autre méthode pourrais-je utiliser pour les examiner et avoir des idées?
Je ne cherche pas à voler l'adresse IP de Google, j'ai juste une idée de la façon dont je pourrais créer une fonctionnalité de bouton similaire.
<button type="submit">
plutôt un , car il peut avoir des éléments enfants et être stylé comme vous le souhaitez.Vous pouvez utiliser ce plugin jquery que j'ai développé. Les boutons fonctionnent pratiquement n'importe où et comme il s'agit d'un plugin, ils sont faciles à installer et à configurer.
http://swizec.com/code/styledButton/
la source
Mise à jour de cet article pour 2011:
Google a lancé un nouveau design pour ses services en juillet 2011. Les nouveaux boutons Google ont été recréés ici: http://pixify.com/blog/use-google-plus-to-improve-your-ui /
Les nouveaux boutons ressemblent à ceci:
la source
Vous pouvez essayer d'utiliser le plugin Firebug pour Firefox pour afficher le CSS sur le bouton.
la source
Le plus gros problème que vous allez avoir sera de le faire fonctionner sur tous les navigateurs.
Je pense que vous devriez sérieusement vous demander si vous en avez vraiment besoin ... Google en a pour son argent en faisant quelque chose comme ça en raison du grand nombre de boutons et de langues dont ils ont besoin; Je soupçonne que la plupart des sites et des applications seraient tout aussi aisés en utilisant une image.
Un composant open source est cependant une bonne idée: répartissez largement la richesse et l'effort.
la source
La majorité du travail ici ne sera probablement pas la conception - ces articles sont déjà un excellent guide sur les effets de dégradé.
Le problème est de faire fonctionner cela dans tous les navigateurs, ou plus précisément dans les tas de déchets originaux que sont IE6 et IE7.
Je pense que vous êtes sur la bonne voie avec un bouton standard qui est réécrit avec jQuery - de cette façon, vous serez toujours accessible pour les lecteurs d'écran et pourrez bien se dégrader dans les navigateurs vraiment anciens.
Pour le HTML, je pense que votre meilleur pari est de visiter Gmail avec chaque navigateur et de voir quel HTML est produit - je m'attendrais à ce que ce soit complètement différent pour IE6, IE7, (également selon qu'ils ont besoin du mode bizarreries) et tout le reste .
la source
Ceux-ci ont été publiés dans le cadre de la bibliothèque de fermeture : voir la démo du bouton
la source
La barre d'outils Web Developer contient des informations de style d'affichage sous le menu css qui vous indiqueront quel css est appliqué à un élément. Il y a aussi la fonction Modifier CSS dans ce menu qui vous permettra de changer le CSS à la volée pour voir comment cela affecte la page.
la source
Le message avec un lien vers la bibliothèque de fermeture ne s'applique pas. Ce qui a été publié dans le cadre de la bibliothèque de fermeture utilise des boutons avec des dégradés .
Les autres solutions listées sont inutiles. Vous ne pouvez pas partir de là et faire fonctionner ces boutons sur tous les navigateurs Gmail les fait fonctionner. Ce que Bowman montre sur son site ne fonctionne pas avec du code.
la source