Tra le varie personalizzazioni che si possono apportare al proprio sito web,
la scelta di un cursore del mouse “fuori dall’ordinario” è certamente una chicca gradita e,
come vedremo, neanche così complessa da realizzare.
Per prima cosa, occorre avere una buona idea.
Qualcosa che si adatti al contenuto che si va a presentare,
dalla forma idonea e dall’effetto sorprendente e penetrante.
La scelta del cursore per questo sito si è fatta quasi da sola.
Su Internet ci sono diversi siti che propongono cursori già pronti, ma,
per chi non dovesse essere soddisfatto, c’è la possibilità di crearsene uno ad hoc.
E’ questo il nostro caso. Dopo una breve ricerca su Google immagini,
qualche valutazione estetica e dimensionale, ecco il nostro pezzo da novanta:
Con l’aiuto di un software di fotoritocco, è necessario estrapolare dall’immagine la parte che ci serve. Per lo scopo, possiamo utilizzare Gimp, con la sua funzione di “forbici intelligenti” ottenendo un risultato discreto:
Dovremo incollare il nostro bricolage su un’immagine vuota. Il puntatore del mouse, però, ha un orientamento destrorso, quindi capovolgeremo l’immagine a specchio:
E salveremo il tutto in formato jpg (o un qualsiasi altro formato tra i più comuni).
Dopo aver accuratamente preparato il nostro attrezzo rigirandolo e manipolandolo a nostro piacere, siamo pronti a farlo diventare un cursore.
Anche in questo caso, le possibilità di scelta sono diverse.
Per l’esempio, ci affidiamo al tool RealWorld Cursor Editor, che ha un utilizzo piuttosto intuitivo e compie bene il suo dovere.
Apriamo all’interno del software l’immagine che abbiamo salvato e creiamo il cursore:
Il software identificherà automaticamente il brackground:
Non ci resta che regolare l'hot spot, la punta del nostro cursore, che nel nostro caso abbiamo posizionato alla base della cappella (il puntino azzurro):
Ora salviamo il nostro cursore come formato .cur.
Per avere un cursore animato, potremmo salvarlo come .ani, ma i cursori animati, purtroppo, non sono più supportati dalle ultime versioni dei browser.
Una volta ottenuto il nostro file cursore, dovremo renderlo disponibile ai visitatori del nostro sito.
Per far ciò, dovremo caricarlo su Internet. Vanno bene i più comuni servizi di file sharing, purché permettano di condividere il file con un link diretto.
In questo caso, abbiamo direttamente copiato il nostro file .cur qui su Blogger:
Copiamo il link del file.
Ora dovremo andare sulle impostazioni del tema del nostro blog e cliccare su "Modifica HTML":
Il codice del tema del nostro blog si presenta così:
Non dobbiamo far altro che incollare il seguente codice immediatamente dopo il tag <head>:
Fatto ciò, possiamo salvare il tema e visualizzare il nostro blog con il suo nuovo cursore!
la scelta di un cursore del mouse “fuori dall’ordinario” è certamente una chicca gradita e,
come vedremo, neanche così complessa da realizzare.
Per prima cosa, occorre avere una buona idea.
Qualcosa che si adatti al contenuto che si va a presentare,
dalla forma idonea e dall’effetto sorprendente e penetrante.
La scelta del cursore per questo sito si è fatta quasi da sola.
Su Internet ci sono diversi siti che propongono cursori già pronti, ma,
per chi non dovesse essere soddisfatto, c’è la possibilità di crearsene uno ad hoc.
E’ questo il nostro caso. Dopo una breve ricerca su Google immagini,
qualche valutazione estetica e dimensionale, ecco il nostro pezzo da novanta:
Con l’aiuto di un software di fotoritocco, è necessario estrapolare dall’immagine la parte che ci serve. Per lo scopo, possiamo utilizzare Gimp, con la sua funzione di “forbici intelligenti” ottenendo un risultato discreto:
Dovremo incollare il nostro bricolage su un’immagine vuota. Il puntatore del mouse, però, ha un orientamento destrorso, quindi capovolgeremo l’immagine a specchio:
Dopo aver accuratamente preparato il nostro attrezzo rigirandolo e manipolandolo a nostro piacere, siamo pronti a farlo diventare un cursore.
Anche in questo caso, le possibilità di scelta sono diverse.
Per l’esempio, ci affidiamo al tool RealWorld Cursor Editor, che ha un utilizzo piuttosto intuitivo e compie bene il suo dovere.
Apriamo all’interno del software l’immagine che abbiamo salvato e creiamo il cursore:
Il software identificherà automaticamente il brackground:
Non ci resta che regolare l'hot spot, la punta del nostro cursore, che nel nostro caso abbiamo posizionato alla base della cappella (il puntino azzurro):
Ora salviamo il nostro cursore come formato .cur.
Per avere un cursore animato, potremmo salvarlo come .ani, ma i cursori animati, purtroppo, non sono più supportati dalle ultime versioni dei browser.
Una volta ottenuto il nostro file cursore, dovremo renderlo disponibile ai visitatori del nostro sito.
Per far ciò, dovremo caricarlo su Internet. Vanno bene i più comuni servizi di file sharing, purché permettano di condividere il file con un link diretto.
In questo caso, abbiamo direttamente copiato il nostro file .cur qui su Blogger:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXScDBSBBtUMHgz1wBkIr7SS2gUk3k0fIA4zeJe9WoAk4SK1SvHvykRoDmC8xTF2gi041ePYFzLVBA_9e8V834SmeqxFCubbaaVc2yjb2ozXb_pnfK2TtNkbwGs46r15l9moJSZns0D9sC/s1600/penis.cur
Ora dovremo andare sulle impostazioni del tema del nostro blog e cliccare su "Modifica HTML":
Il codice del tema del nostro blog si presenta così:
<style type='text/css'>* {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXScDBSBBtUMHgz1wBkIr7SS2gUk3k0fIA4zeJe9WoAk4SK1SvHvykRoDmC8xTF2gi041ePYFzLVBA_9e8V834SmeqxFCubbaaVc2yjb2ozXb_pnfK2TtNkbwGs46r15l9moJSZns0D9sC/s1600/penis.cur), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXScDBSBBtUMHgz1wBkIr7SS2gUk3k0fIA4zeJe9WoAk4SK1SvHvykRoDmC8xTF2gi041ePYFzLVBA_9e8V834SmeqxFCubbaaVc2yjb2ozXb_pnfK2TtNkbwGs46r15l9moJSZns0D9sC/s1600/penis.cur), auto !important;}</style>
Fatto ciò, possiamo salvare il tema e visualizzare il nostro blog con il suo nuovo cursore!
Commenti
Posta un commento