Graphic Tricks #10: Social Icons (effetto hoover e risorse)

Ciaoooo amici!!!

Oggi mi cimento in qualcosa che non ho mai fatto , ovvero parlarvi di grafica e html. Non l'ho mai fatto apertamente perchè non ne è mai capitato l'occasione sul mio Briciole, anche se spesso e volentieri mi sono sbizzaritta a usarne di diversi: inoltre ho ricevuto email da parte di altri blogger che chiedevano consigli e aiuti. Per quanto possibile, ho cercato di aiutare tutti, perchè sì, io sono una frana in queste cose, però in due anni e mezzo di blogging qualche codice utile l'ho imparato, e allora volevo condividerlo con voi :3 Lo specifico, non sono un'esperta, molte cose non so neanche che significano (non è incoraggiante, I know >-<"), ma ci sono e per come le uso io funzionano, quindi, se tutto va bene, dovrebbero funzionare anche per voi ^^

Detto ciò, andiamo!

Questo codice HTML in particolare che vi spiegherò oggi serve per avere delle Social Icons interattive, se possiamo dire così, ovvero che cambino colore al passaggio del mouse. 

Il codice originale l'ho trovato su Carrie Loves, un blog statunitense dove potete trovare trovare anche dei bellissimi set di social icons con le icone più utilizzate, disponibili in tutte le tonalità che desiderate e in formati diversi di grandezze (32px, 48px e 72px). Le potete scaricare QUI. Mi raccomando lasciate un ringraziamento o like al blog o sui suoi social, perchè l'autrice mette a disposizione delle risorse bellissime gratuitamente (e se non ci fosse io non avrei saputo come fare XD)!!!

Partiamo allora dai fondamentali. Solitamente le nostre icone sociali (ma questo vale per qualsiasi immagine che riporti a un link, come i bannerini dei nostri blog o dei giveaway) riportano alla pagina Facebook del blog, di Twitter eccetera eccetera e hanno questo codice:

<a href="LINK PAGINA" title="nome della pagina"><img alt"nome della pagina" src="URL ICONA O IMMAGINE" / /></a>

Esempio:

<a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"><img alt="BBSE su Facebook" src="http://imgur.com/GW8kk2R.png" / /></a> 

Per avere l'effetto interattivo al passaggio del mouse, come questo qui...

...dobbiamo per prima cosa avere a disposizione due set differenti di social icons. Ad esempio, nel mio caso ho scaricato  Radian Orchid e Warm Mint proprio da Carrie Loves.

Scegliamo quale dei due sarà l'immagine fissa e quale quella che si vedrà al passaggio del mouse - nel mio caso Radiant Orchid è l'icona fissa, Warm Mint quella che apparirà con il mouse poggiato sopra - e usando un qualsiasi sito di hosting come Imgur, Tinypic o simili, ricavate l'url dell'immagine. Ecco le mie:

Radian Orchid (Icona 1): http://imgur.com/GW8kk2R

Warm Mint (Icona 2): http://imgur.com/R3cYaTC

Attenzione! Su Imgur avrete solo il link all'immagine, ma per farla funzionare nel codice in questione, bisogna aggiungere .png alla fine dell'URL. Quindi diventeranno:

Radian Orchid (Icona 1): http://imgur.com/GW8kk2R.png

Warm Mint (Icona 2): http://imgur.com/R3cYaTC.png

Il codice HTML di base che ci serve per avere l'effetto interattivo è questo:

<a href="LINK PAGINA" title=""><img alt"nome pagina" onmouseout="this.src='URL ICONA1'" onmouseover="this.src='URL ICONA2'" src="URL ICONA1" / /></a> 

Quindi, andiamo a inserire i nostri URL:

<a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"><img alt="BBSE su Facebook" onmouseout="this.src='http://imgur.com/GW8kk2R.png'" onmouseover="this.src='http://imgur.com/R3cYaTC.png'" src="https://imgur.com/GW8kk2R.png" / /></a>

Abbastanza semplice, no?

Consiglio! Per centrare la nostra icona aggiungete all'inizio del codice <div align="center"
HTML</div> utilissimo anche per centrare un'immagine o del testo nei nostri post o nella sidebar.

<div align="center"><a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"> <img alt="BBSE su Facebook" onmouseout="this.src='http://imgur.com/GW8kk2R.png'" onmouseover="this.src='http://imgur.com/R3cYaTC.png'" src="https://imgur.com/GW8kk2R.png" / /></a></div>

Inserite il codice HTML nella vostra sidebar con il gadget Html - se siete alle prime armi potete seguire questo nostro tutorial.

Spero di essere stata chiara, insomma dovete solo fare opera di copia e incolla ;) Fatemi sapere se vi sono stata utile e se userete questo codice per rendere le vostre social icon più carine e accattivanti!!! Alla prossima (forse), 

Rosa

Big Screen #8: Io prima di te

Buon pomeriggio amici! Ritorna la rubrica in cui parlare e sparlare delle ultime uscita al cinema, e per la precisione oggi vi volevo parlare dell'attessissimo strappalacrime Io prima di te. Sono riuscita ad andare al cinema dopo mesi di pellicole da sì, mi piace ma non tanto da spenderci i soldi e no, non lo voglio vedere neanche morta >-<"

Ah, e avete saputo della splendida promozione cinematografica? Per i prossimi sei mesi, ogni secondo mercoledì del mese i biglietti costano solo due euro! *.* Ho deciso quindi di approfittarne per recuperare un po' la voglia di cinema, che ultimamente si era persa. 

Ma bando alle ciance, andiamo a tuffarci nelle atmosfere dolci e melanconiche di questa pellicola.

Io prima di te (2016), regia di Thea Sharrock, con Emilia Clarke, Sam Claflin, Jenna Coleman e Charles Dance.

Tratto dall'omonimo best seller di Jojo Moyes, Io prima di te si è rivelata prima di tutto una trasposizione molto fedele al libro (considerato anche la sceneggiatura è stata curata dalla stessa Moyes), e posso affermarlo sebbene io lo abbia letto fino a metà: infatti in questo caso mi è successo di apprezzare moltissimo la storia raccontata, ma purtroppo lo stile narrativo dell'autrice non mi è piaciuto per nulla, tant'è che arrivata al capitolo 15 l'ho abbandonato a se stesso. Per fortuna ne hanno fatto un film, e che film ragazzi!

110 minuti di emozioni, felici e gioiose all'inizio e disperati e malinconici verso l'inevitabile fine. 110 minuti tra i sorrisi contagiosi e faccine buffe della Clarke, le sopracciglia espressive e quelle fossette tutte da baciare di Caflin, di una colonna sonora da brividi e di una storia che commuove, scuote nel profondo e fa riflettere tutti noi su quanto significhi vivere la propria vita, nei limiti e delle infinite possibilità che questa ci presenta. Per inciso, io rispetto profondamente la scelta, certamente non facile ma molto coraggiosa, di William Traynor, e sono fermamente convinta e d'accordo con il messaggio finale di fondo: l'amore, per quanto forte e puro, da solo purtroppo non basta per ribaltare la realtà delle cose, e non si può salvare chi non vuole essere salvato.

Detto questo, il film è una meravigliosa goduria: la prima parte è godibilissima, ho riso molte volte, merito della protagonista, Louisa Clark, interpretata alla grande da un Emilia Clarke inedita. Abituata a vederla seriosa e composta nella serie tv Game of Thrones, vedere l'attrice sorridere a tutto spiano, con i suoi vestiti strani, le guance rosse e quell'aria da folletto della felicità è stata una scoperta inaspettata e apprezzata. Una Lou più perfetta di lei non potevamo trovarla. Anche Sam Claflin ci mette del suo, una recitazione affidata totalmente alle espressioni del viso e all'inflessione della voce. Adorabile! Le scene sono talmente vivide e scorrevoli che si arriva a metà film e quando si arriva all'amore be', brividi a gogò. Quella prima scena, in cui Lou apre il suo cuore a Will, e lui che nonostante tutto è intenzionato a seguire la sua decisione finale mi ha fatto venire i lucciconi, e per inciso io sono una che non piange mai!!! E quella scena finale, il bianco che sfuma e poi la foglia che cade... li ho avuto i brividi. Merito quindi a Io prima di te di avermi fatto commuovere, il secondo film della storia dopo il finale struggente di Un amore all'improvviso (e un pochino anche Colpa delle stelle).

Tra gli altri interpreti da segnalare Charles Dance, nel ruolo di Steven Traynor, il papà di Will, altri che non è Tywin Lannister, e per un momento ho avuto un WTF stampato in faccia, perchè vedere una Targaryen abbracciare un Lannister sorridente è stato uno shock da ma-che-cappero-fai-chiama-i-tuoi-draghi-adesso-o-mai-più; e poi ancora Matthew Lewis alias Neville Paciok cresciuto davvero bene, nel ruolo di Patrick, il fidanzato storico e distante di Louisa.

La colonna sonora poi è semplicemente meravigliosa: ritroviamo la melanconica ballad degli X Ambassadors, Unsteady, Ed Sheeran che fa addirittura doppietta con Photograph e Thinking Out Loud, e gli Imagine Dragons con Not Today.

Insomma, una pellicola da non perdersi, una storia romantica e crudele, una carezza e una botta in faccia, proprio com'è la vita di tutti noi.

E voi, l'avete visto? Che ne pensate? Fatemi sapere la vostra opinione!
Un bacio,

Rosa