Javascript Girl
  1. Javascript Girl
  3. Google's Imageless Buttons
Intereting Posts
Comment empêcher le formulaire de soumettre plusieurs fois du côté client? ClientID dans le fichier ASCX HTML5 Canvas Mouse Chutzpah et Jasmine 2.0 et requêtes CK Editor valide la deuxième fois Capture des erreurs de chargement et traitement du module Utilisez jquery pour relayer le formulaire avec les données JSON Qu'est-ce que cette syntaxe JavaScript / jQuery signifie? Quelles sont les chaînes intégrées de JavaScript? Jquery: Obtenez tous les éléments d'une classe qui ne sont pas décendents d'un élément avec le même nom de classe? Si Javascript a des fonctions de première classe, pourquoi ne fonctionne-t-il pas? Binning data dans une grille hexagonale dans Google Maps Ecriture de plugins jQuery à l'aide de classes et de prototypes Phantomjs: commande introuvable Attributs non standard sur les balises HTML. Bonne chose? Mauvaise chose? Tes pensées?

Google's Imageless Buttons

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 la façon dont ces nouveaux boutons fonctionnent dans Gmail. Comment puis-je utiliser ces boutons ou des boutons similaires sur mon site? Existe-t-il des projets open source avec un look & feel similaire?

Si je voulais rouler mon propre package de bouton comme ceci en utilisant JQuery / XHTML / CSS, quels éléments puis-je utiliser? Mes pensées initiales sont les suivantes:

  1. Standard <input type="button"> avec css pour améliorer le look (l'article de conception a principalement abordé le sujet css / imges).

  2. Jquery javascript pour afficher une boîte de dialogue personnalisée enracinée sur le bouton sur l'événement "onclick" qui aurait des étiquettes <a> et une barre de recherche pour le filtrage? Une disposition de table pour ce popup serait-elle saine?

Je suis terrible pour les travaux d'ingénierie inverse sur le Web, quels sont les outils que je pourrais utiliser pour aider à faire de l'ingénierie inverse ces boutons? En utilisant la barre d'outils du développeur 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 navigateur ou autre méthode puis-je utiliser pour les regarder et obtenir des idées?

Je ne cherche pas à renvoyer l'IP de Google, j'ai juste une idée de la façon dont je pourrais créer une fonctionnalité de bouton similaire.

– EDIT – Je n'ai pas vu le lien dans la publication originale. Pardon! Essayerons de réécrire pour refléter la question réelle

StopDesign a une excellente publication ici . [Edit 20091107] Ceux-ci ont été libérés dans le cadre de la bibliothèque de fermeture : voir la démo du bouton .

Fondamentalement, les boutons personnalisés qu'il montre sont créés en utilisant un simple bit de CSS.

Il a utilisé à l'origine 9 tables pour obtenir l'effet: 9 tables

Mais plus tard, il utilisait une simple marge gauche et droite de 1px sur les bordures supérieure et inférieure pour obtenir le même effet.

Le dégradé est faussé en utilisant trois couches: Gradient bouton

Tout le code peut être trouvé à la page Custom Buttons 3.1 . (Bien que le dégradé sans image ne fonctionne que dans Firefox et Safari)

Instructions étape par étape

1 – Insérez le CSS suivant: 

 /* 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 – Utilisez l'une des façons suivantes de l'appeler (on peut trouver plus dans les liens ci-dessus) 

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

ou 

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

C'est leur bouton "Archive", selon 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>

Le CSS est plus que je m'occupe d'organiser / coller pour cela. Peut-être que c'est juste moi, mais lorsque le markup / css devient lourd, je pense que je préfèrerais utiliser une image (ou quelques images comme arrière-plan. Mieux encore, Sprites). En outre, une image pour ce bouton serait inférieure à un seul K.

Autant que j'aime Google, cela semble un peu exagéré.

Mise à jour: Google est un cas unique. Si vous êtes un site énorme et que vous souhaitez internationaliser votre contenu, cette technique sans image est vraiment très cool. Il vous permet d'appliquer à peu près n'importe quelle langue écrite à votre interface utilisateur, sans avoir besoin de générer de nouvelles images ou de craindre de briser vos boutons.

Voir la question: Quels sont les avantages d'utiliser un bouton sans image?

Cependant, vous décidez de le faire, assurez-vous de rendre la page par défaut: 

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

… Et puis utilisez jQuery pour échanger l'élément de saisie avec votre bouton personnalisé qui a un événement onClick. Cela garantira que les personnes sans JavaScript activées pourront encore utiliser votre site.

L'utilisabilité devrait venir en premier!

Vous pouvez utiliser ce plugin jquery que j'ai développé. Les boutons fonctionnent pratiquement n'importe où et, comme c'est un plugin, ils sont faciles à configurer et à configurer.

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

Mise à jour de cette publication pour 2011:

Google a lancé un nouveau design dans 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: Entrez la description de l'image ici

Vous pouvez essayer d'utiliser le plugin Firebug pour Firefox pour afficher le CSS sur le bouton.

Le plus grand problème que vous allez afficher sera fonctionnel dans tous les navigateurs.

Je pense que vous devriez fortement considérer si vous en avez vraiment besoin … Google obtient beaucoup de bang pour le buck en faisant quelque chose comme ceci 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 faciles à utiliser en utilisant une image.

Un élément open-source est cependant une bonne idée: répartir largement la richesse et l'effort.

La majorité du travail ici ne sera probablement pas le design – ces messages sont déjà un excellent mode d'emploi sur les effets de dégradé.

Le problème est de fonctionner dans tous les navigateurs, ou plus précisément les tas de déchets qui 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 peut vous dégrader dans de très vieux navigateurs.

Pour le HTML, je pense que votre meilleur pari est de visiter Gmail avec chaque navigateur et de voir ce que le code HTML est produit – je m'attends à ce qu'il soit complètement différent pour IE6, IE7 (aussi selon qu'ils ont besoin d'un mode de quirks) et tout le reste .