Addobbare il proprio blog per Natale

Da Martavi @martavi_it

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!

Tags:addobbiblognatale

Potrebbero interessarti anche :

Possono interessarti anche questi articoli :

  • Le Grotte di Castellana

    Un idea per una gita fuori porta, nelle viscere della terra. Oggi vi porto a Castellana Grotte nel cuore della Valle d'Itria. Le Grotte di Castellana sono uno... Leggere il seguito

    Il 29 maggio 2015 da   Marlenetrn
    FAMIGLIA, MATERNITÀ, MUSICA, PER LEI
  • Acquistare i giochi Masha e Orso senza farsi fregare.

    Premesso. Con me ci sono riusciti. Sono riuscita a spendere cifre “da capogiro” per dei giochi Masha e Orso che non valevano nemmeno la metà del prezzo di... Leggere il seguito

    Il 28 maggio 2015 da   Mammachevita
    MATERNITÀ, PER LEI
  • #ilpiùbelviaggio - Per arrivare a te

    Il mese di maggio è il mese della festa della mamma e Ford ha deciso di rendere omaggio a modo suo alle mamme. In particolare ha realizzato un video... Leggere il seguito

    Il 27 maggio 2015 da   Rachele Kaelle
    DIARIO PERSONALE, FAMIGLIA, MATERNITÀ
  • Stiamo tutti bene

    E insomma, ci eravamo lasciati il giorno di Natale, quando scrivevo dalla mia camera bunker, cercando di recuperare le energie e lo spirito natalizio dopo un... Leggere il seguito

    Il 20 maggio 2015 da   Sfollicolatamente
    MATERNITÀ, PER LEI, RICERCA
  • La festa della Mamma…quindi non la mia

    Oggi in Italia è la festa della mamma (qui in Francia è alla fine di maggio invece). Avrei sperato che potesse essere anche la mia festa oggi. Ma non lo è. Io... Leggere il seguito

    Il 10 maggio 2015 da   Mikiparis
    MATERNITÀ, PER LEI
  • Il gioiello della mamma

    10 maggio 2015 Marta 1 commento Oggi è la festa della mamma, e come sorpresa, all’asilo, abbiamo preparato un bel lavoretto: un cuore decorato con coccinelle,... Leggere il seguito

    Il 10 maggio 2015 da   Martavi
    FAMIGLIA, MATERNITÀ