Eliminare lo sfondo da una immagine con Easily Remove Image Backgrounds.

Cancellare il background da una immagine è uno di quei lavori di grafica che possiamo definire basilari e che dovrebbero essere facilmente alla portata di chi usa internet abitualmente. I più esperti possono togliere lo sfondo da una foto con Photoshop oppure usare GIMP per rendere lo sfondo trasparente.

Se abbiamo un computer senza programmi di grafica oppure se stiamo usando un PC di altri si può ottenere lo stesso risultato con Pixlr che un tool online veramente dalle mille funzioni. Tutte queste operazioni hanno però bisogno di un minimo di conoscenza grafica. Se siamo proprio digiuni di tool di questo tipo possiamo usare lo strumento online Instant Mask con cui è possibile rimuovere il background di una foto in modo semplicissimo e intuitivo.

Come alternare immagini di sfondo su Blogger.

Nei blog di Blogger si possono impostare colori di sfondo o anche selezionare immagini che vengano visualizzate come background. Bisogna andare su Modello > Personalizza > Sfondo e scegliere una delle immagini proposte oppure caricarne una dal nostro hard-disk.

In articolo di qualche mese fa ho illustrato come alternare degli header diversi in modo casuale. Il passaggio da una immagine a un'altra avveniva però solo ricaricando la pagina o aprendo un altro post.

La personalizzazione che vado a presentare mostra invece le foto di background con una sorta di slideshow. Vediamo quindi come sia possibile mostrare un numero indefinito di immagini di sfondo che si alternino a distanza di un tempo prestabilito con effetto dissolvenza tipico di JQuery. Come mio solito ho postato una dimostrazione dell'effetto che andremo a creare

Si tratta di una personalizzazione veramente suggestiva a cui non mancheranno gli estimatori. Le immagini che saranno scelte come sfondo dovranno essere di dimensioni piuttosto grandi non inferiori ai 1800 pixel di larghezza come del resto è consigliato anche per gli sfondi di Blogger.

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

Come modificare il colore di sfondo di tutte le pagine statiche o il background di una soltanto.

In occasione della prossima festività di Tutti i Santi, seguita dalla giornata dedicata al ricordo dei defunti, e preceduta dalla notte di Halloween che non fa parte della nostra cultura ma che è ormai entrata in pianta stabile delle nostre tradizioni, mi sono dato un po' da fare per creare qualcosa di originale da inserire nel blog per l'occasione quali fiamme infernali, fantasmi e grida dell'altro mondo.

Dedicherò a queste personalizzazioni diversi articoli ognuno specifico per un singolo effetto inserito. Comincio da una modifica del template che mi serve per rendere esteticamente migliori le personalizzazioni inserite modificando il background della pagina statica di demo. Si tratta comunque di un hack generico che può essere utilizzato anche in altre circostanze. Parto da due articoli che ho scritto in passato per la personalizzazione delle pagine statiche

1. Come togliere le sidebar dalle pagine statiche (vecchi modelli) -
2. Come eliminare le sidebar dalle pagine statiche (template del Designer Modelli)-

In entrambi i casi si inseriscono dei fogli di stile prima della riga </head> in Modello > Modifica HTML > Procedi. Si utilizzano i tag condizionali per attivare i CSS solo nelle pagine statiche. Se si vuole modificare anche il colore dello sfondo e necessariamente anche il colore del testo occorre modificare il codice così

Come cambiare lo sfondo del blog al passaggio del mouse.

Qualche mese fa in questo commento mi fu chiesto se fosse possibile creare un sistema che permettesse agli utenti di scegliersi il colore di sfondo che preferivano. Sono riuscito a creare un widget molto carino che consente proprio di fare questa operazione. Per testarlo accedete sulla

• Pagina di Demo dello sfondo che varia al passaggio del mouse -

Spostatevi con il mouse sulla tabella in alto a destra e, passando sopra a un riquadro colorato, si visualizzerà lo stesso background per tutto il blog

Come personalizzare l'aspetto dei link su Blogger tramite le pseudo-classi con selettori.

In tutti i modelli di Blogger c'è una classe che sovrintende all'aspetto dei link che si vedono nei post o nei widget. Più che di classe si dovrebbe parlare di pseudo-classe visto che non definisce un elemento ma un suo stato particolare. Per esempio la pseudo classe

a:link {color: #004488;}

inserisce la regola che i link non ancora visitati abbiano quel particolare colore. Un'altra pseudo classe sicuramente presente potrà essere così

a:visited {color: #800080;}

in cui la regola impone il colore del codice esadecimale per i link che sono già stati aperti. Ai meno esperti consiglio di leggere il post sui codici dei colori. L'altra pseudo classe utilizzata per i link è la seguente

a:hover {color: #FDBCB7;}

Come personalizzare il tema e lo sfondo di GMail.

Gmail è uno dei client più diffusi per la posta elettronica anche perché consente di gestire numerosi account da una stessa pagina. Da poche ore è possibile personalizzare il tema della finestra del browser quando si accede al nostro account principale. Si va in alto a destra su Impostazioni > Temi

Oltre ai numerosi template già presenti, in basso a destra, c'è l'opzione Crea il tuo Tema. Se ci clicchiamo sopra possiamo configurare l'aspetto della schermata. Cliccando su una qualsiasi zona si aprono tre tavolozze di colori che permettono di configurare la colorazione dello sfondo, del testo e del link. Questo può essere fatto indipendentemente da una sezione all'altra

Effetto Groovy 1970s per inserire barre colorate e animate sullo sfondo del blog.

Dallo stesso autore del Tinkerbell Mouse Effect di cui potete vedere una demo in questo post, e che crea una scia di stelline colorate al passaggio del mouse, vi presento il Groovy 1970s Effect. Si tratta di visualizzare nello sfondo del blog delle animazioni di barre colorate di cui si possono personalizzare i colori, la velocità e la dimensione.

Si può vederlo all'opera nello sfondo del blog che uso come motore di ricerca esterno: Demo Effetto Groovy 1970s. Le animazioni sono visualizzate solo nella parte di background non occupata dai contenuti del blog come l'area del post e le sidebar

Come inserire uno sfondo o una immagine di background in un widget.

I gadget o widget che dir si voglia sono univocamente determinati dal loro nome o comunque da un numero, se non abbiamo inserito alcun titolo. Ciascuno di essi inizierà con il codice

<b:widget id=...

e terminerà con la riga

</b:widget>

Per modificare lo sfondo di un widget dobbiamo innanzitutto scoprirne l'ID. Andiamo quindi in Design > Modifica HTML e espandiamo i modelli widget. Per rendere le cose più chiare vediamo come inserire uno sfondo al widget degli Ultimi Commenti. Cliccando su F3 o su Ctrl+F e digitando il nome del widget si trova subito la riga corrispondente. In questo caso

Come installare il Like Box di Facebook nei blog con sfondo scuro per visualizzarne meglio il testo.

Se avete un blog con sfondo scuro avete certamente trovato difficoltà nella visualizzazione del bottone Mi Piace nel vostro blog situato in qualsiasi piattaforma. Per fortuna è stato lo stesso Facebook che ha inserito una opzione nella generazione del codice per ovviare all'inconveniente. A coloro che non sanno di cosa parlo consiglio di leggersi gli articoli

• Come inserire il pulsante Mi Piace nei blog su Blogger -
• Come visualizzare il bottone Mi Piace nei blog con sfondo scuro -

Il trucco, se così si può chiamare, è quello di sostituire il codice colorscheme=light con colorscheme=dark e il testo sarà così visualizzato in un colore chiaro con molto più contrasto. Ecco un esempio

Come potete vedere il testo è di colore bianco. Dopo la pubblicazione di quell'articolo mi fu chiesto se fosse possibile fare una cosa analoga anche per il Like Box, ovvero per il riquadro di coloro che hanno cliccato sul Mi Piace della pagina fan del nostro blog. Adesso sono finalmente in grado di indicare come risolvere anche questo problema estetico.

Come inserire uno sfondo personalizzato in Blogger con il Designer Modelli.

Avevo già trattato su come inserire uno sfondo personalizzato nei nuovi modelli di Blogger che si basano sul Designer Modelli molto usato specie da coloro che si avvicinano per la prima volta a questa piattaforma. Da poche ore, per il momento solo attraverso Blogger in Draft, è possibile farlo senza utilizzare particolari procedure.

Occorre però avere una immagine di alta risoluzione di almeno 1800x1600 pixel. Le istruzioni possono essere consultate sul sito ufficiale di Blogger in Draft che suggerisce di utilizzare immagini proprie o comunque libere da copyright. A tal proposito viene esplicitamente consigliato di cercarle nel sito iStockPhoto che ne offre tantissime con un modesto contributo. Per un sito con immagini totalmente gratuite vi consiglio Free Wallpapers; possono anche essere cercate con Google Immagini ma dobbiamo impostare la ricerca royalty free.

Come rendere visibile il pulsante Mi Piace di Facebook anche nei blog con sfondo scuro.

Se avete un blog a sfondo scuro e avete provato a inserire l'iFrame del Mi Piace di Facebook avrete certamente notato che la parte relativa al testo non viene visualizzata molto bene. Ecco infatti come appare in un caso come questo

 

Viene male agli occhi per cercare di leggere il testo. Ricordo che il codice è da inserire subito sopra alla riga <div class='post-footer'> o subito sotto a <data:post.body/>. Se si ha un modello in cui è stato inserito anche il Read More si può cercare il blocco di codice del jump che sarà simile a questo

Come personalizzare autonomamente ciascun widget di un blog su Blogger.

Praticamente in tutti i modelli di Blogger c'è un solo stile che vale per tutti i widget presenti nella sidebar. Andando su Layout > Caratteri e Colori se ne può cambiare il tipo di font del titolo o del testo, la dimensione dei caratteri. Non in tutti i modelli esistono queste personalizzazioni che hanno anche la controindicazione di essere applicate globalmente a tutti i widget presenti.

In taluni modelli ci può essere l'esigenza di visualizzare un widget in modo diverso da un altro. Per esempio se vogliamo cambiare il background degli ultimi articoli e renderlo diverso da quello dei commenti recenti. Prima di procedere con l'illustrazione del procedimento ricordo che ogni modello fa storia a sé, specialmente se è superpersonalizzato. Inoltre faccio presente che quando si opera sull'HTML è sempre prudente scaricare un modello completo per un eventuale backup.

Per prima cosa bisogna individuare il widget che ci interessa andando su Layout > Modifica HTML (senza espandere i modelli widget)

TwiBack per ruotare le immagini di sfondo o gli avatar del profilo su Twitter.

Per cambiare il background su Twitter si deve andare su Setting > Design > Change background image e caricare l'immagine dal computer oppure scegliere una tra quelle proposte; per cambiare avatar bisogna andare su Setting > Picture e selezionare un nuovo avatar dal computer.

Se siamo indecisi su quale avatar e quale sfondo inserire possiamo usare TwiBack che fa in modo di ruotare tutti gli sfondi e tutti gli avatar che abbiamo caricato sul servizio

Non è necessaria nessuna registrazione, è sufficiente loggarsi con l'account di Twitter. Le sue caratteristiche sono

1. Si caricano le immagini che devono ruotare come background e quelle che lo devono fare come avatar del Profilo oppure possiamo scegliere tra quelle predefinite
2. Inseriamo data e ora della rotazione
3. Si possono inserire anche banner pubblicitari del nostro blog, di una nostra attività o di altro ancora
4. Basta così, TwiBack fa il resto

Ecco il video-tutorial di TwiBack

Texture Vault, una directory di texture e background gratis per artisti, designers e blogger.

Le texture sono delle immagini geometriche con le quali rivestire degli oggetti anche tridimensionali. Un luogo in cui scaricarle gratis è TextureVault, una directory  che oltre a offrire texture senza copyright ha anche una vasta collezione di background. Tutte le realizzazioni degli artisti sono suddivise in tre gradi qualitativi

1. Media Qualita - Libero download
2. Alta Qualità - al prezzo di 2$
3. Massima Qualità - al prezzo di 4$

Le risoluzioni di maggiore qualità possono essere utilizzate nella realizzazione di poster di grandi dimensioni; per le esigenze di un blog la qualità media è ampiamente sufficiente e quindi le texture e i background in questo caso sono gratuiti

Come vedete dallo screenshot, le texture a disposizioni sono ben 3040 e sono suddivise in categorie che comprendono tra le altre  Abstract, Architecture, Glass, Liquid, Hair, Paper, Skin, ecc.

In alto è presente anche una barra di ricerca per inserire delle parole chiave e ottenere risultati più mirati. I fotografi di texture possono condividere il loro lavoro e guadagnare il 60% degli introiti ottenuti con la vendita di quelle di alta qualità.

Per scaricare le texture occorre registrarsi gratuitamente. Le gallerie di miniature hanno tutte l'effetto Lightbox e, volendo, possono anche essere scaricate con il destro del mouse.

Come inserire uno sfondo dei tuoi followers in Twitter.

Nel web ci sono applicazioni utili e applicazioni carine; Twilk fa parte di questo secondo tipo, permette infatti di creare uno sfondo su Twitter composto da tutti coloro che ti seguono in quel servizio di microblogging.

Per cambiare background al nostro account in modo rapidissimo si clicca su Get Started, quindi si accede con l'account di Twitter. Dopo che sono state acquisite le informazioni necessarie, vale a dire gli avatar dei followers, ecco che aspetto prenderà la vostra pagina su Twitter

Photo-credit Makeuseof -

 

Come cambiare il colore di sfondo (background) ai titoli della sidebar e della data in Blogger.

I lettori più affezionati di questo blog, che non leggono solo i feed, si saranno accorti della colorazione apparsa nei background dei titoli dei widget e della data. Ho utilizzato come colore di sottofondo quello con il codice #FDBCB7 che è anche lo stesso che appare nel menù espandibile. 

Ovviamente può essere scelto un colore a piacere che si intoni con gli altri presenti nel blog.

Andare su Layout > Modifica HTML e cercate il blocco di codice che comincia con

.sidebar h2 {

Dovreste trovare una cosa di questo tipo:

.sidebar h2 {
font-weight:bold;
font-size: 150%;
color: $sidebarTitleColor;
padding: 2px 5px 2px 15px;
 background-color: #FDBCB7;
 }

dove la riga colorata di rosso è proprio quella che è stata aggiunta per ottenere questo effetto e il codice del colore, colorato di blu, deve essere personalizzato. Se avete già una riga con background-color potete anche cambiarlo con un altro di maggior gradimento. In questo caso però il cambiamento in genere è possibile farlo andando su Layout > Caratteri e Colori.



In questo blog sono state aggiunte tre colonne nella parte bassa. Nei fogli di stile che determinano il loro aspetto mancava la parte relativa al titolo dei widget inseriti. Per inserire un background occorre dunque crearla ex-novo. E’ piuttosto semplice e il metodo specificato può tranquillamente essere esteso ad un altro template in cui manca quella parte di codice. Per ciascuna colonna è presente infatti solo questo codice


.column1 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px;
text-align: left;
} 


Per inserire anche i dati riguardo al titolo basta inserire il codice colorato di rosso sotto ciascuno dei tre blocchi

.column1 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px;
text-align: left;
} .column1 h2{
background-color: #FDBCB7;
padding: 2px 2px 2px 10px;
 }


Dove il codice in blu deve essere personalizzato. Ho anche aggiunto la riga padding che determina la posizione del titolo dentro il sottofondo colorato. I pixel sono quelli che determinano la distanza e partono dalla parte alta e, in senso orario, arrivano alla parte sinistra. Ho infatti inserito un 10px per non far iniziare il titolo troppo a ridosso della riga rosa.


Per completare questa personalizzazione bisognerebbe inserire anche la data dentro un sottofondo dello stesso colore. Questo vale naturalmente solo per i blog che hanno la data posta in posizione orizzontale sopra il titolo dell’articolo.


Si va su Layout > Modifica HTML e si cerca questa riga di codice

h2.date-header {

Ricordo che per cercare una riga di codice in un modello basta cliccare su F3 oppure su Ctrl+F ed inserire nella casella che si apre la riga da cercare; automaticamente sarà visualizzata evidenziata di verde. Questo vale con tutti i browser anche se ci possono essere delle modalità diverse di inserimento e visualizzazione. Per ulteriori informazioni leggi quest’articolo.

Troverete un codice di questo tipo

h2.date-header {
border-bottom:none;
font-size: 150%;
text-align:$startSide;
margin-top:20px;
margin-bottom:14px;
padding:1px;
padding-$startSide:17px;
color: $dateHeaderColor;
font-weight: bold;
font-family: Trebuchet MS, Verdana, Sans-serif; background-color: #FDBCB7;
 } 

dove dovrete aggiungere la riga colorata di rosso con il colore che preferite al posto di quello colorato di blu; se non conoscete la corrispondenza tra sestine esadecimali e colori vi consiglio di leggere l’articolo sui codici dei colori.

Come inserire un colore di sfondo (background) o un’immagine ad una parte del nostro articolo.

Per ravvivare un articolo può essere interessante cambiare il background di una parte del testo per cercare di evidenziarlo maggiormente.

Il codice che si deve usare in questo caso è molto semplice

<div style="background:#FFFFFF; padding:5px 8px 5px 8px;">
INSERISCI IL TESTO
</div>

• al posto di INSERISCI IL TESTO digitiamo quello che vogliamo sia visualizzato con un colore di sottofondo diverso.
• al posto di #FFFFFF inseriamo il codice Hex del colore che vogliamo come sottofondo. Il codice proposto non è altro che il bianco
• In padding scegliamo i pixel che devono intercorrere tra il testo ed il background, 5 sono quelli verticali, 8 quelli orizzontali

Se si passa alla modalità HTML e si incolla il codice ecco in un esempio quello che si può vedere

Tanto gentil e tanto onesta pare
la donna mia quand'ella altrui saluta,
ch'ogne lingua deven tremando muta,
e li occhi no l'ardiscon di guardare.
Ella si va, sentendosi laudare,
benignamente d'umilta' vestuta;
e par che sia una cosa venuta
da cielo in terra a miracol mostrare.
Mostrasi si' piacente a chi la mira,
che da' per li occhi una dolcezza al core,
che 'ntender non la puo' chi no la prova;
e par che de la sua labbia si mova
uno spirito soave pien d'amore,
che va dicendo a l'anima: Sospira.

in cui ho mantenuto la formattazione della poesia ed eccone un altro senza formattazione

Questo blog è nato alla fine del Gennaio 2008 ma è stato semiabbandonato per mesi e solo dal Giugno di un anno fa viene aggiornato con regolarità. In questo anno di tempo mi sono accorto che è praticamente impossibile scrivere delle complete recensioni su tutti i siti e servizi web che lo meriterebbero. Voglio quindi inaugurare una rubrica in cui elenco, con solo una breve spiegazione, quei siti che non ho il tempo di recensire in modo adeguato ma che comunque meritano attenzione. La rubrica avrà una cadenza settimanale (giorno più, giorno meno) e nel caso qualche lettore fosse interessato ad un sito o una funzionalità elencata, oppure ne avesse già una buona conoscenza sarei lieto che integrasse le informazioni presenti con dei commenti.

Si può anche inserire un’immagine di sottofondo. In questo caso per prima cosa va caricata su un hosting gratuito tipo Skydrive. I successivi passaggi sono

1. Si acquisisce l’URL dell’immagine
2. Si scrive la porzione di testo in cui si vuole  mettere l’immagine come sottofondo
3. Si passa alla modalità HTML

Nel punto in cui si vuole che inizi il sottofondo si incolla il seguente codice

<div style="background:url(URL_immaine) no-repeat;">

mentre nel punto in cui si vuole che finisca si incolla il tag

</div>

come mostrato in questo screenshot.

Se si toglie l’attributo in rosso no-repeat l’immagine si visualizzerà fino a dove si è inserito il tag di chiusura </div>. Ecco come 

Il Michael Jackson persona era veramente un esempio di come non si dovrebbe essere. Non mi riferisco solo agli episodi di pedofilia da cui è stato assolto e che li sono costati un sacco di soldi per pagare il silenzio dei familiari dei “suoi giovani amici” ma anche a tutta la sua vicenda personale.

    * La mania della chirurgia plastica che lo aveva fatto diventare una specie di essere “non umano”
    * L’altra mania di voler diventare a tutti i costi bianco che presuppone una notevole fragilità morale
    * Il dilapidare di immense fortune in futili realizzazioni che sono in bella mostra nella sua dimora di Wonderland. Cito tra tutti un treno che attraversava la proprietà

E’ sempre difficile scindere l’uomo dall’artista ma nel suo caso penso che si possa fare e una cosa gli va sicuramente riconosciuta. I videoclip esistevano anche prima di lui ma Michael Jackson è stato il primo a capirne l’importanza.

• Inserire un sottofondo colorato o un immagine di sfondo by Parsifal32 -

Come racchiudere all’interno di un bordo e mettere un sottofondo colorato (background) ai nostri post su Blogger.

Questa è una personalizzazione piuttosto semplice che è indicata soprattutto per i blog che hanno un aspetto semplice e vogliono ravvivarlo un po’.

Andare su Layout > Modifica HTML e scaricare un modello completo per sicurezza. Cercare la seguente riga di codice cliccando su F3 o Ctrl+F

.post {

Troverete un codice di questo tipo

.post {
  padding-$startSide:20px;
  margin-bottom:20px;
  text-indent:12px;
  padding-$endSide:20px;
  line-height:22px;
}

Per aggiungere bordi e colore di sfondo basta aggiungere le seguenti righe colorate di rosso

.post {
border: 2px dashed #003366;
background:#FFFFFF;
  padding-$startSide:20px;
  margin-bottom:20px;
  text-indent:12px;
  padding-$endSide:20px;
  line-height:22px;
}

in cui le parti in blue possono essere personalizzate.

1. 2 rappresenta il numero dei pixel del bordo
2. dashed significa che il bordo è tratteggiato ma può essere sostituito da solid per una linea unita e dotted per una punteggiata
3. I codici dei colori dopo il cancelletto possono essere scelti in funzione dei colori del nostro blog

Possiamo, nello stesso modo, personalizzare anche la data andando su

h2.date-header

troveremo un codice simile a questo

h2.date-header {
  border-bottom:none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color: $dateHeaderColor;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

 

che potremo modificare per esempio così

h2.date-header {
border: 2px dashed #003366;
background:#FFFFFF;
  border-bottom:none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color: $dateHeaderColor;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

con le stesse personalizzazioni precedenti. In questo caso anche la data sarà racchiusa in un bordo e avrà un colore di sottofondo. Salvate il modello e visualizzate il blog.