måndag 1 december 2014

Julkalender 2014 - Lucka 1


Designtips: Fallande snö i bakgrunden.
Gillar du att ha fallande snö på din blogg under vintertid men gillar inte att den ibland kan vara i vägen? Med det här tipset hamnar snön bakom bloggen.
Se exempel på julbloggen.

Denna beskrivning är för Blogg.se-användare. Blogger-användare hittar en jättebra beskrivning HÄR.

1) Kopiera följande text och placera den längst ner i din stilmall.

/* Snow falling for Blogg Esse
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

#falling-snow {
background-image: url(http://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png), url(http://4.bp.blogspot.com/-8RALuvldFh8/UaJZY1tUptI/AAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png), url(http://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAADfE/0Lp5NLrudxc/s1600/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

2) Kopiera följande text och placera den under <body> i kodmallarna.

<div id='falling-snow'>

3) Kopiera följande text och placera den ovanför </body> i kodmallarna.

</div>

Färdigt!

2 kommentarer:

  1. åh vad fiiint. Men hur gör man så att det går hela vägen ner, min fastnar som där uppe? ://

    SvaraRadera
    Svar
    1. Du måste ha "margin: 0px;" i Body i stilmallen, testa det :)

      Radera