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!
Info sull'autore
Vuoi offrirmi un caffè?
Ti ringrazio per il pensiero, ma fallo solo per ringraziarmi nel caso il blog ti sia stato utile o per il semplice piacere di farlo. Utilizza il metodo di donazione sicuro PayPal
Campane natalizie da realizzare con vasetti di yogurt
Prepariamo la corona dell’Avvento
8 Dicembre: la nostra tradizione
franco: 
Guirdano: 
Giovanni: 
ugo erio pizzatti sertorelli: 
Franco: 
Franco: 
Ciao Teresa, il tuo blog ha fagocitato il mio codice, dimmi quali tag devo usare per far passare indenne il mio commento… comunque metto anche stavolta su pastebin… ho dato uno sguardo al tuo css e mi sono permesso di fare qualcosa di completamente sfruttabile sotto qualsiasi browser. Intanto il tuo codice richiede una modifica perché su Microsoft Edge non va, l’albero resta sotto invece di comparire avanti… dipende dal fatto che non usi z-index e display: block…
http://pastebin.com/9QAdcTMD
Con questo trucchetto va anche su mobile e l’effetto è quasi lo stesso, bisogna fare molta attenzione per vedere la differenza… almeno per me è così… ciao Teresa!
Ciao Alessandro, grazie come sempre per i tuoi preziosi consigli!!!
Per inserire del codice nei commenti, prova ad usare i seguenti tag:
<pre class="prettyprint">codice da visualizzare</pre>
Saluti
Ciao Teresa, senti… ho dato uno sguardo al tuo css e mi sono permesso di fare qualcosa di completamente sfruttabile sotto qualsiasi browser. Intanto il tuo codice richiede una modifica perché su Microsoft Edge non va, l’albero resta sotto invece di comparire avanti… dipende dal fatto che non usi z-index e display: block…
Poi veniamo al css vero e proprio:
/* Decorazione Natalizia */
.albero-di-natale {
-webkit-animation: intermittenza 300ms infinite;
animation: intermittenza 300ms;
animation-iteration-count: infinite;
}
@-webkit-keyframes intermittenza {
0%, 100% {
opacity: 1.0;
}
50% {
opacity: 0.9;
}
}
@keyframes intermittenza {
0%, 100% {
opacity: 1.0;
}
50% {
opacity: 0.9;
}
}
Con questo trucchetto va anche su mobile e l’effetto è quasi lo stesso, bisogna fare molta attenzione per vedere la differenza… almeno per me è così… ciao Teresa!