Guida: come portare un po’ di iOS su Chrome

1453
2
CONDIVIDI

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:

  1.  Installate l’estensione Speed Dial 2
  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
  3. Nella pagina delle impostazioni spostatevi sulla scheda “Customize dial style” e rimuovete le ombreggiature cliccando su “No Shadow”
  4. 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:

  1. 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”.
  2. 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.
  3. Terminata questa operazione salvate l’immagine in formato JPG e caricatela su Tinypic o su un qualsiasi servizio di image hosting.
  4. 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.

 

 

RIPRODUZIONE RISERVATA © Copyright OVERPRESS
  • Luca

    Nel CSS manca la “{” all’inizio. Grazie per l’idea comunque!

    • Giacomo Richichi

      Grazie, comunque ho provato a correggere il CSS ma inserendo “{” all’inizio si sballa tutto, quindi è meglio lasciarlo così ;)