create animated header?

• 

  kjeg2015 · Member · Sep 22, 2015 at 10:46 pm

  • Copy link
  • Add topic to favorites

  Maybe this is too much to ask, but could someone please help me with this?

  I am really struggling to learn CSS):

  What I need is to have an animated header-image in one single colour – then I want it to slowly fade into a different colour and then back again..so that if the website is open for a longer period of time the colour has changed

  Thank you for helping me

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Sep 22, 2015 at 10:49 pm

  • Copy link

  You don’t need any CSS editing to create a .gif header image. You must be aware however that the custom header image dimensions you upload into the blog must be in perfect accord with the header size for the theme or the animation will not be displayed. If you think you can upload a .gif that is not correctly sized and then use the cropper, that will not succeed. The animation will not appear and instead you will have an ugly black box.

• 

  timethief · Member · Sep 22, 2015 at 10:51 pm

  • Copy link

  P.S. What you are asking for ie. the fading color bit that changes over time (so that if the website is open for a longer period of time the colour has changed) is probably too advanced to be possible here.

• 

  kjeg2015 · Member · Sep 22, 2015 at 11:02 pm

  • Copy link

  Ok, thats probably why I couldnt do it haha(:

  Create a .gif header image – will read up on it

  Thank you(:

• 

  timethief · Member · Sep 22, 2015 at 11:05 pm

  • Copy link

  I don’t provide CSS editing help. Those who do provide it will respond to you here when they can.

• 

  kjeg2015 · Member · Oct 3, 2015 at 9:50 pm

  • Copy link

  is probably too advanced to be possible here.

  I made it with CSS3!!!

• 

  staff-totoro · Staff · Oct 3, 2015 at 10:53 pm

  • Copy link

  Props @kjeg2015, that is a cool effect! :)

  Would you mind sharing the code you used here, so anyone trying to do something similar can try it out too?

  Many thanks!

• 

  kjeg2015 · Member · Oct 3, 2015 at 11:36 pm

  • Copy link

  of course! I`m sorry I didnt do it right away…to exited I guess..

  The colors arent fixed but it works, thats the important..thing, fact or whatever …

  heres the code!

  @keyframes example {
  0% {
  background-color: rgba(0,0,70,0.65);
  }

  50% {
  background-color: rgba(100,0,0,0.65);
  }

  100% {
  background-color: rgba(0,0,70,0.65);
  }
  }

  div.cover {
  animation-name: example;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  }

• 

  kjeg2015 · Member · Oct 4, 2015 at 12:10 am

  • Copy link

  Please let me know if that was not what you were after. I am really a noobe, feeling that I made the impossible happen..and I cannot explain it all.. Hihi…

  If you need something more I’ll take some screenshots for you

• 

  shawnajroberts · Member · Oct 6, 2015 at 6:22 pm

  • Copy link

  That looks great @kjeg2015! Thanks for sharing. :)