addobbare il proprio blog per nataleOggi, 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

Teresa
Teresa
Sono mamma, blogger per passione, laureata in terapista della neuro e psicomotricità dell'età evolutiva, da sempre nel settore della prevenzione e riabilitazione, svolgo il mio lavoro presso studi privati e centri di riabilitazione; collaboro con ludoteche per la presentazione di progetti educativi e ludici in età evolutiva

Commenti

  1. 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

  2. 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!

Cosa ne pensi? Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *
Nome* Email* Sito Web

altri articoli

Ultimi Commenti



 
Stikets
 
TicketClub