Come mostrare caratteri con effetto tastiera

Come applicare l'effetto tastiera a tasti per visualizzarli all'interno di un rettangolo ombreggiato e arrotondato che simula un tasto virtuale

Brevissimo post per illustrare una personalizzazione che può essere utile a chi scrive su internet. Per indicare una azione da compiere sulla tastiera, si devono evidenziare i tasti da digitare uno dopo l'altro o contemporaneamente. Il lettore rischia di essere fuorviato, perché non è immediato associare un carattere a un tasto. Può quindi essere utile presentare le singole lettere inserite in tasti virtuali.

In altri termini per indicare le scorciatoie da tastiera Win + . oppure Ctrl + Alt + Canc, risulta essere molto più chiaro se vengono presentate con una grafica come questa Win+. oppure Ctrl+Alt+Canc che è decisamente più intuitiva per i lettori e che non si presta a diverse interpretazioni.

Si tratta in sostanza di mostrare i caratteri da pigiare all'interno di un rettangolo ombreggiato, per dare l'impressione della tastiera. Il codice da usare è molto semplice e può essere usato in tutte le piattaforme che supportano i linguaggi HTML e CSS come Blogger e Wordpress.

Il codice che andrò a illustrare potrà essere usato in una singola pagina web oppure, nel caso della piattaforma Blogger, essere incollato nel Tema per poi essere ripreso all'occorrenza in una qualsiasi pagina web senza dover incollare di nuovo il CSS, ma limitandoci al solo HTML.

Chi abbia delle difficoltà a capire quello di cui sto parlando può scaricarsi gratis il mio ebook Guida all'HTML e al CSS. Iniziamo a mostrare come inserire i caratteri con lo stile tastiera in una singola pagina web.

AGGIUNGERE IL CODICE DELL'EFFETTO TASTIERA IN UN POST

Facendo riferimento alla seconda combinazione di tasti usata come esempio, il codice da usare è il seguente:

<style type="text/css">
tst {
font-family:Georgia !important;
border:1px solid #ccc;
font-size:1.3em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #bbb, 0 2px 0 3px #333;
border-radius:2px;
margin:2px 3px;
padding:1px 5px;
}
</style>
<tst>Ctrl</tst>+<tst>Alt</tst>+<tst>Canc</tst>

In sostanza con il CSS si crea il nuovo tag <tst> con cui aggiungere i caratteri con lo stile impostato. Tale codice si può incollare in una pagina web in Modalità HTML per ottenere questo risultato.

ottenuto con Real Time HTML, un Editor HTML online.

COME AGGIUNGERE IL CODICE AL TEMA DI BLOGGER

Se abbiamo un sito in cui dobbiamo spesso mostrare le scorciatoie da tastiera, o hotkey che dir si voglia, può essere consigliabile aggiungere il codice nel Tema per poi incollare nella pagina solo l'HTML.

In questo caso si va su Bacheca -> Tema -> Modifica HTML e si cerca la riga ]]></b:skin>, quindi subito sopra a quella si incolla solo il blocco di codice che è stato evidenziato di giallo. Si salva il Tema. Alternativamente si può andare su Design > Designer Modelli > Avanzato e incollare il codice del CSS nel campo sulla destra quindi andare in alto e cliccare su Applica a blog per rendere effettive le modifiche.

Dopo questo, per aggiungere caratteri con effetto tastiera, basterà incollare il codice secondo la sintassi mostrata nella riga evidenziata di verde, ovvero i caratteri da mostrare con effetto tasto vanno inseriti tra <tst> e </tst>. Ovviamente il tag <tst> è una mia invenzione e può essere sostituito da un altro a discrezione come <ttt> o <htk>.

PERSONALIZZAZIONE DELL'ASPETTO DEI TASTI

In conclusione si può anche modificare il codice dell'effetto per adattarlo alle nostre esigenze:

1. 1.3em è la dimensione del carattere dentro il tasto. L'unità em rappresenta la larghezza della lettera M maiuscola della famiglia di caratteri. Si può diminuire o aumentare a piacere.
2. Georgia è la famiglia di font che può essere cambiata. Può essere eliminata tutta la riga font-family:Georgia !important; per visualizzare i caratteri con la famiglia di font di default del blog.
3. I codici dei colori #eee, #bbb e #333 sono stati calcolati per dare un effetto tasto, quindi li lascerei stare; anche se si possono provare altre combinazioni di colori anche in funzione di uno sfondo diverso. 
4. border-radius:2px; è la quantità di arrotondamento del tasto
5. margin:2px 3px; imposta una distanza di 2 pixel dall'alto e dal basso e di 3 pixel da sinistra e destra.
6. padding:1px 5px; imposta una distanza di 1px dal bordo del tasto in verticale e di 5px in orizzontale.

L'effetto tastiera sarà visibile su tutti i principali browser.