Le applicazioni ormai sono parte integrante della nostra realtà quotidiana. Al di là delle loro incredibili funzionalità c’è una cosa che almeno io personalmente, non riesco a smettere di ammirare: le icone. Queste infatti, nonostante il numero limitato di pixel, sono dei veri e propri capolavori in miniatura. Inoltre grazie ad esse è possibile individuare velocemente l’applicazione che cerchiamo: è proprio questo l’aspetto centrale di questa guida. Infatti, installando una delle tantissime estensioni presenti sul Chrome Web Store è possibile inserire le icone di iOS nella pagina iniziale di Google Chrome, al fine di individuare nel minor tempo possibile i nostri siti preferiti. Senza dilungarci ulteriormente vediamo come fare:
- Installate l’estensione Speed Dial 2
- Al termine dell’installazione aprite una nuova scheda e cliccate prima sull’ingranaggio in alto a destra e poi sulla voce “More Options” nella finestra che si è aperta
- Nella pagina delle impostazioni spostatevi sulla scheda “Customize dial style” e rimuovete le ombreggiature cliccando su “No Shadow”
- Ora scorrete la pagina fino alla voce “Custom CSS” e incollate nel box questo CSS*:
#pages li a, #pages li:hover a, #pages li a:hover, .thumbnail_container { background-color:transparent; }
#pages li a, #pages li:hover a {border-color:transparent}
.thumbnail_container {
-webkit-mask-image: url(“http://i47.tinypic.com/2po31p4.jpg”);
-webkit-mask-repeat:no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
}
Una volta salvate le impostazioni (cliccando su “Save setting”) siete pronti per inserire le icone di iOS. Purtroppo le icone non si trovano “pronte all’uso” e vanno “adattate” al CSS. Questo passaggio però è leggermente più complicato, in quanto richiede una conoscenza base di Adobe Photoshop. Procediamo:
- Prima di tutto dovete cercare l’icona che più fa al caso vostro. E’ possibile reperirla direttamente in rete effettuando una ricerca simile a questa: “Facebook iOS icon”.
- Trovata l’icona, potete utilizzare questo PSD per adattarla alla maschera del CSS. L’importante è che i bordi dell’immagine che utilizzate corrispondano perfettamente ai bordi dell’icona presente nel PSD.
- Terminata questa operazione salvate l’immagine in formato JPG e caricatela su Tinypic o su un qualsiasi servizio di image hosting.
- A questo punto aprite una nuova scheda o tornate alla pagina iniziale, create un nuovo collegamento cliccando sul “+” e alla voce “Custom logo url” inserire il link dell’immagine precedentemente caricata.
In ogni caso cliccando su questo link (aggiornato al 06/07/2013) potete scaricare un archivio con delle icone già adattate e pronte ad essere caricate.
Se avete seguito correttamente le guida dovreste essere pronti a utilizzare le icone di iOS come collegamento per i vostri siti preferiti. Per qualsiasi problema o dubbio non esitate a farcelo sapere nei commenti
*Non intendendomi di CSS ne ho adattato uno che ho trovato in rete. Nel caso riteniate che alcuni elementi siano inutili, vi prego di comunicarmelo.
