Pulsanti senza immagine di Google

90

Di recente sono stati pubblicati alcuni articoli sui nuovi pulsanti senza immagini di Google:

Mi piace molto come funzionano questi nuovi pulsanti in Gmail. Come posso utilizzare questi pulsanti o simili sul mio sito? Esistono progetti open source con un aspetto simile?

Se volessi eseguire il rollio del mio pacchetto di pulsanti come questo utilizzando JQuery / XHTML / CSS, quali elementi potrei usare? I miei pensieri iniziali sono:

  1. Standard <input type="button">con css per migliorare l'aspetto (l'articolo di design ha parlato principalmente di css / imges coinvolto).

  2. Jquery javascript per far apparire una finestra di dialogo personalizzata basata sul pulsante dell'evento "onclick" che avrebbe <a>tag al loro interno e una barra di ricerca per il filtro? Un layout di tabella per quel popup sarebbe sano?

Sono pessimo nel reverse engineering delle cose sul web, quali sono alcuni degli strumenti che potrei usare per aiutare a decodificare questi pulsanti? Utilizzando la barra degli strumenti per sviluppatori Web di Firefox non riesco a vedere il css o javascript (anche se è minimizzato) che viene utilizzato nelle finestre di dialogo popup dei pulsanti. Quale strumento del browser o altro metodo potrei usare per sbirciarli e avere qualche idea?

Non sto cercando di rubare nessuno degli IP di Google, ho solo un'idea di come potrei creare funzionalità di pulsanti simili.

javascript  html  css  gmail  reverse-engineering 
— MikeN
fonte

Risposte:

55

- MODIFICA - Non ho visto il collegamento nel post originale. Scusa! Cercherò di riscrivere per riflettere la domanda reale

StopDesign ha un post eccellente su questo qui . [modifica 20091107] Questi sono stati rilasciati come parte della libreria di chiusura : guarda la demo del pulsante .

Fondamentalmente i pulsanti personalizzati che mostra sono creati utilizzando un semplice bit di CSS.

Inizialmente ha utilizzato 9 tabelle per ottenere l'effetto: 9 tabelle

Ma in seguito ha utilizzato un semplice margine sinistro e destro di 1 px sui bordi superiore e inferiore per ottenere lo stesso effetto.

Il gradiente viene simulato utilizzando tre livelli: Pulsante gradiente

Tutto il codice può essere trovato nella pagina Custom Buttons 3.1 . (anche se il gradiente senza l'immagine funziona solo in Firefox e Safari)

Istruzioni passo passo

1 - Inserisci il seguente 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 - Usa uno dei seguenti modi per chiamarlo (altri possono essere trovati nei link sopra)

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

o 

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>
— bjtitus
fonte
32

Questo è il loro pulsante "Archivio", secondo 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>

Il CSS è più di quello che mi interessa organizzare / incollare per questo. Forse sono solo io, ma quando il markup / css diventa così pesante, penso che preferirei di gran lunga USARE UN'IMMAGINE (o un paio di immagini come sfondi. Meglio ancora, Sprites). Inoltre, un'immagine per questo pulsante sarebbe inferiore a un singolo K.

Per quanto amo Google, questo sembra un po 'eccessivo.

Aggiornamento: Google è un caso unico. Se sei un sito enorme e desideri internazionalizzare i tuoi contenuti, questa tecnica senza immagini è davvero interessante. Ti consente di applicare praticamente qualsiasi lingua scritta alla tua interfaccia utente, senza la necessità di generare nuove immagini o la paura di rompere i pulsanti.

Vedere Domanda: quali sono i vantaggi dell'utilizzo di un pulsante senza immagini?

— Sampson
fonte
13

Comunque tu decida di farlo, assicurati di eseguire prima il rendering della pagina con l'impostazione predefinita:

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

... E poi usa jQuery per scambiare l'elemento di input con il tuo pulsante personalizzato che ha un evento onClick. Ciò garantirà che le persone senza JavaScript abilitato saranno ancora in grado di utilizzare il tuo sito.

L'usabilità dovrebbe venire prima!

— Ty.
fonte
5
Perché? Usa <button type="submit">invece un , poiché può avere elementi figlio e avere lo stile che preferisci.
— mancanza di palpebre
13

Potresti usare questo plugin jquery che ho sviluppato. I pulsanti funzionano praticamente ovunque e poiché è un plugin sono facili da impostare e configurare.

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

12

Aggiornamento di questo post per il 2011:

Google ha lanciato un nuovo design tra i suoi servizi nel luglio 2011. I nuovi pulsanti di Google sono stati ricreati qui: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

I nuovi pulsanti hanno questo aspetto: inserisci qui la descrizione dell'immagine

— bperdue
fonte
+1. Piuttosto che provare a falsificare i gradienti usando immagini o elementi aggiuntivi come questa risposta attuale, usa i gradienti dove possibile e torna a un colore ragionevole sui browser meno recenti.
— mikemaccana
5

Il problema più grande che avrai sarà farlo funzionare su tutti i browser.

Penso che dovresti considerare fortemente se ne hai davvero bisogno ... Google ottiene un sacco di soldi facendo qualcosa di simile a causa del vasto numero di pulsanti e lingue di cui hanno bisogno; Sospetto che la maggior parte dei siti e delle applicazioni sarebbe altrettanto benestante utilizzando un'immagine.

Tuttavia, un componente open source è una buona idea: diffondere ampiamente la ricchezza e lo sforzo.

— Zac Thompson
fonte
2

La maggior parte del lavoro qui probabilmente non sarà il design: quei post sono già un eccellente How-To sugli effetti sfumati.

Il problema è farlo funzionare in tutti i browser, o più specificamente negli eccentrici cumuli di spazzatura che sono IE6 e IE7.

Penso che tu sia sulla strada giusta con un pulsante standard che viene riscritto con jQuery: in questo modo sarai ancora accessibile agli screen reader e potrai degradare piacevolmente nei browser molto vecchi.

Per l'HTML, penso che la soluzione migliore sia visitare Gmail con ogni browser e vedere quale HTML viene prodotto: mi aspetto che sia completamente diverso per IE6, IE7 (anche a seconda che abbiano bisogno della modalità quirks) e tutto il resto .

— Keith
fonte
1
Dubito sinceramente che il browser stia annusando IE per il rendering dei pulsanti.
— mancanza di palpebre
1

La Web Developer Toolbar ha una visualizzazione delle informazioni sullo stile nel menu CSS che ti dirà quale CSS è applicato a un elemento. C'è anche la funzione Modifica CSS in quel menu che ti permetterà di cambiare il CSS al volo per vedere come influisce sulla pagina.

— Mykroft
fonte
Trovo firebug estremamente utile per esattamente questo genere di cose - guardare cosa viene applicato CSS e modifiche in tempo reale.
— Thelema,
Uso anche Firebug ma poiché ha il suo motore può essere un po 'pesante. La barra degli strumenti è molto più leggera e più facile da usare secondo me.
— Mykroft
0

Il post con un collegamento alla libreria di chiusura non si applica. Ciò che è stato rilasciato come parte della libreria di chiusura utilizza pulsanti con sfumature .

Le altre soluzioni elencate sono inutili. Non puoi andare da lì e far funzionare questi pulsanti su tutti i browser in cui Gmail li ha funzionanti. Quello che Bowman mostra sul suo sito non funziona in codice.

— Jose
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.