I bottoni stile Google (anche con jQuery)
Venerdì 20 Febbraio 2009 - 08:11
di Cesare Lamanna
Qualche giorno fa, Douglas Bowman (ai più noto come l’autore di StopDesign, ma ora anche impiegato di Google) ha dedicato un bellissimo intervento al processo di creazione con cui hanno preso forma i pulsanti che possiamo vedere in azione, tra l’altro, su GMail.
La sfida era quella di passare da una struttura basata su 9 celle di tabella per un singolo bottone ad una soluzione leggera, mantenibile, efficace e basata sui CSS, con una sola immagine, quella usata come sfondo. Il risultato in questa pagina dimostrativa. Studiate il codice e vedrete come con qualche regola CSS sia possibile dare quel particolare aspetto partendo da normali elementi a e button.
Ieri ho invece trovato il link alla soluzione per emulare quello stile di pulsanti, basata su un plugin per jQuery, presentata da Swizec Teller. Qui la demo con la scarna documentazione.
Certo, ci si potrebbe chiedere se è proprio necessario ricorrere a jQuery/Javascript dopo aver visto il lavoro di Bowman… Ma, come si dice, tutto per amor di completezza :).
Categoria: Web Design | Permalink
Commenti
1
“Certo, ci si potrebbe chiedere se è proprio necessario ricorrere a jQuery/Javascript dopo aver visto il lavoro di Bowman”
bellissima soluzione ma non a tutti potrebbe piacere un codice leggermente ridondante come questo:
<span><span>longer button text</span></span>
# - postato da saibal - 20 Febbraio 2009 - 10:09
2
soluzione per emulare quello stile di pulsanti
per emu-cosa, Cesare?
Avete presente La settimana enigmistica?
Allora trovate le differenze…ma forse non mi funzionano i browsers…
perché Swizec Teller dice cheThese buttons have been tested to work properly on:
* Opera 9.6x
* Firefox 3
* Firefox 2
* Safari 3
* Safari 2
* Internet Explorer 8 beta
* Internet Explorer 7
* Internet Explorer 6
* Chromead ogni modo… ciò che vorrei dire è che anche ottenendo un effetto identico…
cos’è? l’UCAS?!
tanto popò di roba per emulare l’effetto di <button…
tanto valeva tenersi 9 celle di tabellaci si riempie la bocca di standard, accessibilità, semantica… e poi si sporca così il codice di un bottone?!
IE6 e co. sono una ciofeca…
ma questo non è modo di lavorare…
3
Non pensavo servisse jQuery per emulare i pulsanti di Google :-)
Non credevo servissero nemmeno tutti quei div innestati :P
4
Uff… a volte mi ruga di non aver modo di “farmi conoscere”: mi e’ capitato gia’ in passato di trovare qualche soluzioncina carina con html/css e vederla poi sbandierata in giro come chissa’ quale novita’.
Ad ogni modo… questi sono i miei bottoni:
http://www.jamesonwhiskey.com/....._team.aspxUtilizzano semplicemente un tag A e un tag SPAN. Non credo sia possibile far di meglio con meno (almeno se li si vuole tenere “ridimensionabili”).
Non li ho testati ovunque… per esempio su firefox 2 credo abbiano qualche problema. Ma su ie6/7 firefox 3 e safari mac/pc funzionano bene!
Anzi… se avete voglia di testarli su qualche altro browser, mi fate anche un favore! :D# - postato da Andrea - 23 Febbraio 2009 - 11:38
5
Interessante questo articolo sul button per valutare tutte le possibilità di interazione che offre questa novità. Invece riguardo al pixel di radius, mi sembra francamente esagerato tutto quel giro per ottenere così poco…
6
Concordo con Saibal e rilancio dicendo che visto il codice css per fare solo “sta cosa” mi viene la pelle d’oca.
A me pare invece che nel Web qualcuno abbia scoperto l’elemento button ed ora lo stia prendendo di mira per fare ciò che fino ad ora usabilità ed accessibilità gli avevano tolto.
Poi tolto a chi e che cosa?m.
# - postato da Marco Grazia - 24 Febbraio 2009 - 14:51
7
Hi, creator of that jquery plugin here.
The reason you need a jQuery plugin to do this is that the markup of your page stays the same and so pretty buttons don’t hurt SEO. It’s also a point of maintainability and ease of production, or would you rather have to put all that code in there manually every time?
The logic behind not just using a button tag is that this way you have control over what your controls look like in all browsers. There is also extended functionality above and beyond just what a simple button can do (like dropdown menus etc.) AND you can make anything look like a button … like, say, a regular link.
8
[…] I bottoni stile Google (anche con jQuery) […]
# - postato da NexNova » Blog Archive » Links del giorno: March 25, 2009 - 25 Marzo 2009 - 06:08