Addobbare il proprio blog per Natale

Teresa

Addobbare il proprio blog per Natale

15 dicembre 2014 Teresa nessun commento

Oggi, finalmente ho terminato di addobbare la casa con tutte le decorazioni che negli anni ho accumulato tra acquisti e regali. Corona d’avvento, albero di Natale, soprammobili vari, piatti, bicchieri, tappeti, tovaglie e stoviglie, vasi e vasetti, candele, luci, ghirlande, qualche babbo Natale e befane, insomma, tutta la casa è in festa e pronto per il Natale.
Nell’elenco manca ancora una cosa direte…lo so, ma per il presepe, bisogna attendere mio marito che termini il lavoro! Ogni cosa che fa è una Cappella Sistina, speriamo che per la notte di Natale Giuseppe e Maria non dovranno andare in giro per la casa in cerca di un posto dove far nascere il bambino!

Eppure, oltre al presepe, avevo una sensazione che mancasse qualcosa da addobbare. Pensavo e ripensavo guardando in giro, ma in casa davvero non mancava niente. Alla fine poi, ho realizzato: il blog! Cavolo sul blog il Natale non è ancora arrivato!!!

Insomma, ormai il blog è come se fosse un’altra stanza, una pertinenza della casa… non può non essere addobbato per il Natale! E così mi sono messa subito a lavoro per capire come modificare il tema del blog per dargli un clima natalizio. Per prima cosa ho cambiato gli sfondi, poi per dare un tocco di originalità, ho pensato di fare un bell’albero di Natale anche qui…

Ho scaricato quindi dal web delle immagini di alberi di Natale con sfondo trasparente (vi allego qui il file con alcuni esempi: alberodinatale.zip) ed ho aggiunto nel template del sito, tra i tag <body></body> il seguente codice.

<div style="position: fixed; bottom: 0; left: 5px;">
   <img class="albero-di-natale" title="BUON NATALE!!!" src="http://TUO-SITO/CARTELLA-IMMAGINI-DEL-SITO/albero-di-natale-1.png" alt="Albero di Natale" />
</div>

Cambiare il testo http://TUO-SITO/CARTELLA-IMMAGINI-DEL-SITO/albero-di-natale-1.png con il percorso dell’immagine dell’albero da visualizzare

il codice style=”position: fixed; bottom: 0; left: 5px;” permette di posizionare l’immagine “fissandola” anche in caso di scroll (position:fixed), nell’angolo in basso (bottom:0) a sinistra (left:5px;) della finestra del browser.

Posizionata l’immagine sul sito, ho voluto aggiungere un effetto che ricordasse le lampadine intermittenti e quindi ho inserito nel file di stile (style.css) le seguenti righe di codice per definire e assegnare, alla classe “.albero-di-natale”, l’animazione “intermittenza” che durerà “300 millisecondi” e verrà ripetuta all’infinito:

.albero-di-natale { 
  -webkit-animation: intermittenza 300ms infinite;
  animation: intermittenza 300ms;
  animation-iteration-count: infinite;
}

Sempre nel file di stile (style.css) bisogna aggiungere le seguenti righe di codice per definire l’animazione “intermittenza” che andrà ad agire sul contrasto (brightness) aumentandolo del 20% e sull’ombra dell’immagine (drop-shadow) che in questo caso verrà usata “al contrario” per creare un leggero bagliore.

@-webkit-keyframes intermittenza {
	0%, 100%  { -webkit-filter: brightness(1); }  	
  	50% { -webkit-filter: brightness(1.2) drop-shadow(0 0 1px #EEE); }
}

@keyframes intermittenza {
 	0%, 100%  {  filter: brightness(1); }
  	50% { filter: brightness(1.2) drop-shadow(0 0 1px #EEE); } 
}

Al momento in cui scrivo questo articolo, i filtri sulle immagini, non funzionano per FIREFOX, IEXPLORER, OPERA mentre per CHROME e SAFARI non ci sono problemi.

Questo è tutto! Per qualsiasi suggerimento o per semplici informazioni non esitate a lasciare un commento all’articolo. Lo stesso vale in caso di problemi con il codice che ho postato, scrivetemi e vi aiuterò a trovare la soluzione…

BUON NATALE A TUTTI!