MFC Profile Snowflakes

[marloane]

Hi

i wanted to ask if anybody knows how to add a snowflake effect to a mfc profile. That snowflakes would fall over the screen :dance:
Model or User for both would be nice.

Thank you very much

 

[Kradek]

You could do it with CSS3.

 

[Kradek]

Something like this maybe.

 

[marloane]

Yes exactly like this. It looks great
What is the code for this exactly please and where to put it that it looks like this ?

Thanks a lot

 

[SexySteph]

Something like this maybe.

Idk if this is just a glitch in mobile but your profile kept growing forever. Like the boxes were also snowflakes.Lol

 

[Kradek]

Something like this maybe.

Idk if this is just a glitch in mobile but your profile kept growing forever. Like the boxes were also snowflakes.Lol

What browser? Looks OK on my iPad in Chrome and Safari. Android's default browser possibly?

 

[Kradek]

Yes exactly like this. It looks great
What is the code for this exactly please and where to put it that it looks like this ?

Thanks a lot

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

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

@-webkit-keyframes snow {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
  
  50% {
    background-color:#b4cfe0;
  }
  
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:#6b92b9;
  }
}

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

body {
  background-color:#6b92b9;
  background-image:url(https://dl.dropboxusercontent.com/u/9659390/snow.png),
                           url(https://dl.dropboxusercontent.com/u/9659390/snow3.png),
                           url(https://dl.dropboxusercontent.com/u/9659390/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;
}

If you use it, you probably want to change the snowflake urls in the background image. I don't promise I will leave them on my Dropbox forever.

 

[SexySteph]

Something like this maybe.

Idk if this is just a glitch in mobile but your profile kept growing forever. Like the boxes were also snowflakes.Lol

What browser? Looks OK on my iPad in Chrome and Safari. Android's default browser possibly?

I'm on my iPhone in safari.

 

[Kradek]

Something like this maybe.

Idk if this is just a glitch in mobile but your profile kept growing forever. Like the boxes were also snowflakes.Lol

What browser? Looks OK on my iPad in Chrome and Safari. Android's default browser possibly?

I'm on my iPhone in safari.

Probably some iOS/Safari version specific issue then. Browsers can drive you crazy sometimes.

 

[marloane]

I can download the flakes and upload it on own webspace then and change the code but where to put the code in?
Till now it didnt work no matter where i tried it.

Thank you very much :thumbleft:

 

[Kradek]

I can download the flakes and upload it on own webspace then and change the code but where to put the code in?
Till now it didnt work no matter where i tried it.

Thank you very much :thumbleft:

Paste it at the end of your custom CSS.

 

[marloane]

It worked. Thank you.
But that also means my normal background would be replaced with the one from the code i guess. So i think it is not possible to keep my now used background and also put on snowflakes.

 

[Kradek]

It worked. Thank you.
But that also means my normal background would be replaced with the one from the code i guess. So i think it is not possible to keep my now used background and also put on snowflakes.

All you should have to do is change the rule below.

body {

  background-image:url(https://dl.dropboxusercontent.com/u/9659390/snow.png),
                           url(https://dl.dropboxusercontent.com/u/9659390/snow3.png),
                           url(https://dl.dropboxusercontent.com/u/9659390/snow2.png),
                           url(<your current background image>);
  -webkit-animation:snow 20s linear infinite;
  -moz-animation:snow 20s linear infinite;
  -ms-animation:snow 20s linear infinite;
  animation:snow 20s linear infinite;
}

 

[marloane]

I will try that. Thats so cool. Thank you for everything

 

[marloane]

The code worked well. Also if i put in my own background. The only problem is now that the background i want to use is also moving then. Is there a way to have this normal backgroung solid - not moving and the flakes to move ?

Maybe if i write the normal background in another line from the code.
Thank you very much for the great help

 

[Kradek]

The code worked well. Also if i put in my own background. The only problem is now that the background i want to use is also moving then. Is there a way to have this normal backgroung solid - not moving and the flakes to move ?

Maybe if i write the normal background in another line from the code.
Thank you very much for the great help

Would you link your profile for me so I can take a look? Also tell me what browser you are using.

I added a background to my profile. Here is the exact code I am using.

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

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

@-webkit-keyframes snow {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
  
  50% {
    background-color:#b4cfe0;
  }
  
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:#6b92b9;
  }
}

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

body {
  background-color:#6b92b9;
  background-image:url(https://dl.dropboxusercontent.com/u/9659390/snow.png),url(https://dl.dropboxusercontent.com/u/9659390/snow3.png),url(https://dl.dropboxusercontent.com/u/9659390/snow2.png),url(https://dl.dropboxusercontent.com/u/9659390/xmas-background.jpg);
  background-size:auto,auto,auto,contain;
  -webkit-animation:snow 20s linear infinite;
  -moz-animation:snow 20s linear infinite;
  -ms-animation:snow 20s linear infinite;
  animation:snow 20s linear infinite;
}

 

[Kradek]

Nevermind, I see your problem in Firefox and Internet Explorer. Gotta love browsers! This code below should fix the moving background.

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

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

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

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

body {
  background-color:#6b92b9;
  background-image:url(https://dl.dropboxusercontent.com/u/9659390/snow.png),
url(https://dl.dropboxusercontent.com/u/9659390/snow3.png),
url(https://dl.dropboxusercontent.com/u/9659390/snow2.png),
url(https://dl.dropboxusercontent.com/u/9659390/xmas-background.jpg);
  background-size:auto,auto,auto,contain;
  -webkit-animation:snow 20s linear infinite;
  -moz-animation:snow 20s linear infinite;
  -ms-animation:snow 20s linear infinite;
  animation:snow 20s linear infinite;
}

You also might need to change this line:

background-size:auto,auto,auto,contain;

from "contain" to something else. I set it to contain on mine so that the background image would be resized to the size of the browser. Setting it to "auto" tells the browser not to do anything with it. You can easily google the possible background-size choices.

 

[marloane]

Works great at the moment. Thank you very very much Hope i will not find anything else that is not good to not bother you anymore. Thank you for all the work you done for it :thumbleft: