web-dev-qa-db-fra.com

Boutons Imageless de Google

Il y a eu récemment quelques articles sur les nouveaux boutons sans image de Google:

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 un look & feel similaire?

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 réflexions sont les suivantes:

  1. La norme <input type="button"> avec css pour améliorer l'apparence (l'article de conception parlait principalement des css/imges.)

  2. Jquery javascript pour faire apparaître une boîte de dialogue personnalisée enracinée dans le bouton de l'événement "onclick" qui aurait <a> des balises et une barre de recherche pour le filtrage? Une disposition de table pour cette fenêtre contextuelle serait-elle saine?

Je suis horrible en matière d'ingénierie inverse sur le Web, quels sont les outils que je pourrais utiliser pour aider à l'ingénierie inverse de ces boutons? En utilisant la barre d'outils du développeur Web de Firefox, je ne peux pas vraiment voir le CSS ou 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 consulter et obtenir des idées?

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

javascripthtmlcssgmailreverse-engineering
90
MikeN

- EDIT - Je n'ai pas vu le lien dans le message d'origine. Pardon! Va essayer de réécrire pour refléter la question réelle

StopDesign a un excellent article à ce sujet ici . [edit 20091107] Ceux-ci ont été publiés dans le cadre de la bibliothèque de fermeture : voir la démo du bouton .

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

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

Mais plus tard, il a utilisé 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 truqué en utilisant trois couches: Button Gradient

Tout le code peut être trouvé sur la page Boutons personnalisés 3.1 . (bien que le dégradé sans l'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 pour l'appeler (vous en trouverez 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>
55
bjtitus

Il s'agit de 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 ce que je souhaite organiser/coller pour cela. C'est peut-être juste moi, mais quand le balisage/css devient aussi lourd, je pense que je préférerais de beaucoup UTILISER UNE IMAGE (ou quelques images comme arrière-plans. 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 massif et que vous souhaitez internationaliser votre contenu, cette technique sans image est en fait vraiment 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, ni craindre de casser vos boutons.

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

32
Sampson

Vous pouvez utiliser ce plugin jquery que j'ai développé. Les boutons fonctionnent pratiquement n'importe où et puisqu'il s'agit d'un plugin, ils sont faciles à installer et à configurer.

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

13
Swizec

Quelle que soit votre décision, assurez-vous d'abord de rendre la page avec la valeur par défaut:

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

... Et puis utilisez jQuery pour échanger l'élément d'entrée avec votre bouton personnalisé qui a un événement onClick. Cela garantira que les personnes sans JavaScript activé pourront toujours utiliser votre site.

L'utilisabilité doit venir en premier!

13
Ty.

Mise à jour de cet article pour 2011:

Google a lancé un nouveau design sur l'ensemble de ses services en juillet 2011. Les nouveaux boutons Google ont été recréés ici: http://pixify.com/blog/use-google-plus-to-improve- votre-ui /

Les nouveaux boutons ressemblent à ceci: enter image description here

12
bperdue

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

5
David Grant

Le plus gros problème que vous aurez sera de le faire fonctionner sur tous les navigateurs.

Je pense que vous devriez considérer sérieusement si vous en avez vraiment besoin ... Google en a beaucoup pour son argent en créant 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 à utiliser une image.

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

5
Zac Thompson

La majorité du travail ici ne sera probablement pas la conception - ces messages sont déjà un excellent How-To sur les effets de dégradé.

Le problème est que cela fonctionne dans tous les navigateurs, ou plus précisément dans les tas de déchets excentriques 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 aux lecteurs d'écran et pourrez bien vous dégrader dans les très vieux navigateurs.

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'attends à ce qu'il soit complètement différent pour IE6, IE7 (également selon qu'ils ont besoin du mode excentrique) et tout le reste .

2
Keith

Ceux-ci ont été publiés dans le cadre de la bibliothèque de fermeture : voir la démo du bouton

2
Nickolay

Web Developer Toolbar a une information de style d'affichage sous le menu css qui vous indiquera quel css est appliqué à un élément. Il y a aussi la fonction Edit CSS dans ce menu qui vous permettra de changer le CSS à la volée pour voir comment cela affecte la page.

1
Mykroft

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 dégradés.

Les autres solutions listées sont inutiles. Vous ne pouvez pas y aller et faire fonctionner ces boutons sur tous les navigateurs que Gmail fait fonctionner. Ce que Bowman montre sur son site ne fonctionne pas.

0
Jose