Effetto opacità o trasparenza al passaggio del mouse sopra le immagini.

Nei post precedenti abbiamo visto come creare un effetto hover per lo zoom e un effetto hover per passare dal bianco e nero ai colori e viceversa. Come preannunciato vado a illustrare un effetto hover anche per la trasparenza o opacità.

Ricordo che con l'utilizzo del javascript e di jQuery si possono rendere trasparenti o opache tutte le immagini di un sito. In questo post mi occuperò di mostrare solo gli effetti dovuti agli eventi mouseover e mouseout cioè a quegli eventi determinati dal cursore che passa sopra a una foto o dallo stesso che la lascia.

In sostanza si può mostrare una foto trasparente che diventa opaca al passaggio del mouse e una foto opaca che invece diventa trasparente. I maggiori browser sono in grado di leggere la trasparenza di un colore o di una foto. È stata introdotta anche la rappresentazione dei colori RGBA con cui inserire una trasparenza nel codice del colore tramite il canale Alpha.

Come rendere trasparente la Barra delle App di Windows 10.

La Barra delle Applicazioni di Windows 10 può essere personalizzata insieme al menù Start come abbiamo visto in un precedente articolo. In questo post riprenderò brevemente il tema per mostrare nel dettaglio come rendere completamente trasparente la Barra delle Applicazioni.

Infatti  andando su Impostazioni > Personalizzazione > Colori si può cliccare sul cursore per rendere trasparente Menù Start e Barra delle Applicazioni. Con questo sistema però non si potrà nascondere completamente tale Barra visto che si potrà settare un minimo di opacità solo intorno al 10-15%.

Come rendere trasparente il Menù Start di Windows 10.

Il menù Start di Windows 10 è molto migliorato rispetto a quello di Windows 8 e può essere personalizzato aggiungendoci i tiles delle applicazioni che usiamo più spesso. Tramite le Impostazioni si può rendere il menù Start trasparente in modo che possano essere viste le applicazioni che abbiano una finestra al di sotto di esso o le icone del desktop che vengono coperte.

Con questa impostazione però viene aggiunta la funzione Aero che offusca lo sfondo del Menù Start. Con una opportuna modifica del Registro di Sistema di Windows 10 si può abilitare la trasparenza senza avere l'effetto sfocatura.

Come eliminare lo sfondo da una foto e renderlo trasparente con Pixlr Editor.

Non ci sono solo Photoshop e Gimp per editare le immagini. Se in un computer non è presente nessun programma di Editor Grafico ci può sempre usare l'applicazione online Pixlr Editor che ha una quantità di strumenti paragonabile ai programmi desktop.

Anche l'interfaccia di Pixlr è molto simile a quella di Gimp ma soprattutto di Photoshop e questo facilita ancora di più il suo utilizzo. Dopo l'apertura della applicazione online si sceglie Apri una immagine dal computer per importare la foto da modificare. Le immagini possono anche essere aperte da un URL o da una Galleria di Facebook, Google+ o altro. Per questa ultima operazione bisogna ovviamente accedere con il nostro account. Per aprire una foto dal PC non occorre neppure la registrazione

Come rendere trasparenti le immagini con Gimp.

Nell'articolo precedente abbiamo visto come far diventare trasparenti le foto con Photoshop però questo programma è piuttosto costoso e non è presente in tutti i computer. Vediamo quindi come effettuare la stessa operazione con Gimp che è la sua alternativa gratuita e multipiattaforma più usata per la grafica.

Si può scaricare Gimp gratis aprendo la sua pagina di Download e attualmente è arrivato alla versione 2.8.14. Dopo la sua installazione personalmente preferisco lavorare con l'interfaccia unica invece che con tre pannelli slegati uno dall'altro quindi consiglio di andare su Finestre e mettere la spunta a Finestra singola. Si va poi su File > Apri per selezionare la foto da processare

Come far diventare trasparente una foto con Photoshop.

I colori in informatica e non solo vengono individuati tramite quelli che sono i codici dei colori e che indicano la quantità di ciascuno dei tre colori primari che non sono quelli classici rosso giallo e blu che abbiamo imparato a scuola ma Red, Green e Blue che portano alla notazione RGB o a quella HEX esadecimale. Queste notazioni non sono però sufficienti a determinare la quantità di opacità o se si vuole di trasparenza contenuta in una immagine. Per questa ragione è stato introdotto il Canale Alfa che determina appunto la trasparenza.

I formati che supportano la trasparenza sono il PNG, il TIFF e anche il GIF mentre in generale non la supportano il JPG e il BMP. Chi possiede un sito può aver l'esigenza di creare una immagine con un certo grado di trasparenza per un logo da applicare alle immagini o ai video. Essendo il watermark trasparente non nasconderà del tutto quello che c'è sotto.

Effetto trasparenza per le immagini al passaggio del mouse.

Sebbene le immagini siano uno dei fattori che più rallentino la navigazione delle pagine è dimostrato che inserite in una giusta misura nei siti ne favoriscano il posizionamento nei risultati di ricerca. La più bassa velocità di caricamento viene infatti abbondantemente bilanciata dalla superiore tendenza che dei visitatori a soffermarsi su pagine con immagini interessanti, inoltre anche i motori di ricerca sembra che premino la presenza di contenuti diversi da quelli testuali quando siano pertinenti con il tema trattato nella pagina.

Tutti i blogger hanno necessariamente dimestichezza con l'utilizzo di foto da inserire negli articoli. Per distinguersi magari si può pensare di aggiungere un tocco di originalità attraverso l'inserimento del semplice effetto della trasparenza o se si vuole dell'effetto opacità.

Ecco due immagini identiche una inserita la prima in modo normale e l'altra con l'effetto trasparenza

Come rendere trasparente lo sfondo delle immagini con Photoshop.

Mi sono già occupato di come eliminare lo sfondo di una immagine e come renderlo trasparente usando il software open source Gimp. Vediamo adesso come fare entrambe queste operazioni usando il programma di grafica più conosciuto che è Photoshop.

Questa operazione è veramente semplicissima per chi è esperto di grafica ma è tutt'altro che scontata per chi non lo è. L'articolo è quindi rivolto ai blogger che si trovano a dover estrarre una immagine in formato PNG da una invece in formato JPG o simile. A titolo di esempio pensiamo all'effetto delle foglie cadenti sul blog dove le immagini su sfondo trasparente sono state ricavate a partire da delle foto che invece avevano lo sfondo.

Questa necessità si presenta abbastanza spesso quando ci sono da inserire immagini o anche icone in un widget o nel modello. Si apre l'immagine in questione su Photoshop andando su File > Apri e selezionandola dal disco rigido. Poi si va nel menù in alto su Livello > Nuovo > Livello dallo sfondo

Come rendere trasparente lo sfondo di una immagine con GIMP.

Le immagini in formato JPG non supportano la trasparenza e non possono essere utilizzate se si vogliono inserire in un contesto in cui non deve essere visibile il loro sfondo. Una foto in formato JPG avrà quindi una forma rettangolare e lo sfondo, spesso bianco, sarà sempre visibile. Questo fatto pone dei problemi quando dobbiamo utilizzare tali immagini in effetti, menù o semplici realizzazioni grafiche.

Vediamo come si possa facilmente rendere trasparente uno sfondo dello stesso colore da una immagine con Gimp, programma di grafica open source e multipiattaforma che può essere scaricato gratuitamente da questa pagina. Si apre la foto andando su File > Apri e si clicca sullo Strumento Selezione Fuzzy

Galleria di immagini con Effetto Hover.

Quando il mouse passa sopra a un oggetto in genere viene a mutare la forma del cursore, vediamo come si possa creare un effetto che attraverso il nuovo linguaggio CSS3 che permette di creare delle transizioni fantastiche senza appesantire la pagina con file javascript. Codrops ha creato tutta una serie di effetti basandosi esclusivamente sui fogli di stile. In totale sono ben dieci effetti di cui potete vedere le rispettive demo selezionando il numero dell'esempio nel menù posto in alto. Dopo che si è scelto il tipo di effetto da applicare al blog si aggiungono delle classi specifiche con la sintassi specificata.

Le classi sono state denominate view view-first, view view-second, view view-third, view view-fourth, ecc per rendere più semplice l'installazione dell'effetto. Ho applicato l'Effetto numero tre a un post di prova inserendo come l'autore una tabella con quattro immagini

• Demo dell'Effetto Hover per quattro foto - 

Per la sua installazione si va su Modello quindi su Backup/Ripristino per un backup di sicurezza del modello. Poi andiamo sempre su Modello > Modifica HTML > Procedi e si cerca la riga </head> dove, subito sopra, si incolla il seguente codice

Come visualizzare i menù a tendina quando sono coperti da un video di Youtube.

Se nel vostro blog avete un menù a tendina che si apre verticalmente e siete soliti inserire dei video nella parte alta dei post, vi capiterà senz'altro che alcune voci del menù rimangano nascoste sotto al video

Per ovviare a questo fastidioso inconveniente si deve necessariamente acquisire il vecchio codice di Youtube e non quello nuovo basato sull'iFrame. In teoria si potrebbe far diventare trasparente l'iFrame mediante l'attributo allowtransparency="true" e modificare il CSS di body { aggiungendo background:transparent; o background-color:transparent; ma ho verificato che il metodo non funziona. Se qualcuno più bravo di me riesce a trovare un sistema alternativo con il nuovo codice sarei molto lieto che me lo indicasse nei commenti.

Come inserire nel blog una textarea trasparente.

Non so se sia più appropriato usare il maschile o il femminile. Nel dubbio opterò per il secondo. La textarea è un tag HTML che permette di generare un box in cui inserire del testo per potere essere copiato più facilmente dai lettori. Viene molto usata nel caso di codici di antipixel o banner che vengono offerti ai navigatori per creare collegamenti al nostro sito.

Coloro che usano Windows Live Writer hanno delle difficoltà a inserire una textarea in un articolo perché questo software della Microsoft non sempre la interpreta correttamente. Fortunatamente non ci sono invece problemi con l'Editor di Blogger anche con la sua versione più datata.

Fino a qualche mese fa, noi utenti di Blogger, per mostrare solo i riassunti degli articoli in Homepage, usavamo una personalizzazione chiamata degli Articoli Sintetici. Adesso con l'avvento del Read More è diventato un sistema largamente obsoleto. Questo metodo si basava tra l'altro sull'inserimento del codice <span id="fullpost"> nel punto esatto in cui si voleva mostrare il post in Homepage.

Double Vision è un browser trasparente che permette di vedere i film in ufficio senza farsi beccare.

Mi sono riferito ai film come esempio ma può essere usato per guardare una finestra che non si dovrebbe aprire senza essere sorpresi dall’improvviso arrivo di un collega. Può essere usato anche per continuare un lavoro al computer senza interrompere la visione di una partita o di una serie TV.
Double Vision è infatti un browser con caratteristiche molto particolari

1. E’ semitrasparente cioè si possono vedere le icone delle applicazioni nello schermo
2. Si possono vedere contemporaneamente due finestre senza passare da una all’altra
3. E’ gratuito e può essere scaricato da  qui – Scarica Double Vision – andando su Download Now. Ha una dimensione di poco più di 2MB e sarà installato nella cartella Sincell

La prima volta che lo aprite ci sarà un breve tutorial per poterlo utilizzare al meglio che così riassumo

1. Si può inserire un URL direttamente nella barra del browser
   
2. Quando si è aperto il video o lo streaming che ci interessa si clicca sul Double Vision Button
    
3. Dalla modalità Double Mode si può tornare a quella Normal Mode cliccando sul pulsante in alto a sinistra
4. Con un cursore si può incrementare o diminuire la trasparenza della finestra e si può spostarla nello schermo 
   
5. Quando è nella modalità trasparente puoi continuare il tuo lavoro senza per questo smettere di guardare il video
6. Se arriva qualcuno si clicca su Ctrl+ESC e il browser chiude l’audio e scompare. Si preme nuovamente su Ctrl+ESC e ricompare di nuovo
7. Con Ctrl+Alt si ha un opacità immediata al 100% che è possibile eliminare pigiando sugli stessi tasti
8. E’ un prodotto in Beta

Come vedete oltre al video sono visibili anche le icone del desktop sulle quali possiamo continuare a lavorare. In alto a sinistra sono visibili il bottone per tornare alla visione normale ed il cursore per modificare la trasparenza.