FANDOM


  • HelloEveryOne, 

    As many of You know, that what is "Background Animated Gradient" for a page or box,module, right?

    Sooo can someone "tell me \ give me" right "code" for, my wiki's RecentWikiActivity's BackGround Animation?,

    My Wiki's RecentWikiActivity Looks this RightNow : 
    .yyyyyy

    See, but i want those two colors animation or moving or u know what i mean, right?

    (see first photo + caps)

    OR

    My Wiki's RecentWikiActivity's Code is this RightNow :

    /* Background image and color */
    section#wikia-recent-activity {
    	background-image: linear-gradient(to top right, #f10fff 33%, #28d8ff 67%);
            background-color: #27D8FE;
    }
     
    /* Heading color */
    section#wikia-recent-activity h2 {
        color: #F10FFF;
        text-shadow:0 0 7px White;
        animation: RainbowModules 6s linear infinite;
    }
     
    /* Pulse Shrink */
    @-webkit-keyframes hvr-pulse-shrink {
      to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
    @keyframes hvr-pulse-shrink {
      to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
    section#wikia-recent-activity {
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 10px White;
    }
    section#wikia-recent-activity:hover, section#wikia-recent-activity:focus, section#wikia-recent-activity:active {
        -webkit-animation-name: hvr-pulse-shrink;
        animation-name: hvr-pulse-shrink;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

    Ok? 

    aNd i've an Animation of Rainbow Colors for my RecentWikiActivity's Heading, So Pleas Pleas Pleas don't be confused with that+that skyblue looking color is #28D8FF , and that fuchsia color is #F10FFF..

    If you've not got my question, then ask, i'll try to explain.

    Pleas Reply , thx LuvOf99Th ^_^ 19:27, July 9, 2020 (UTC).

      Loading editor
    • I can't help you due to how it offends my aesthetic sensibilities.

      However, I will say, "RainbowModules" looks suspicious and doesn't sound like something that is a standard supported CSS keyword.

        Loading editor
    • Same thoughts here but that was random, 

      any ideas Fandyllic , what should be there? instead of that  "RainbowModules" , .

      Reply fandyllic?

        Loading editor
    • Nope... no other ideas. Like I said, I'd rather not help with that.

        Loading editor
    • Ohhhhk, well no worries, i'll try to find, a good ones.

        Loading editor
    • Sooo no one is gonna help, right? or no one knows how to do it, right?

        Loading editor
    • What kind of motion are you looking for. I can try to help but I agree with Fandyllic that I don't think it would be the best choice from a readability perspective.

        Loading editor
    • Bro i want those two colors which are in background of recent wiki activity's module, i want them to move or Animate... , nd yea i also agree with Fandyllic, i'll change that wehenever i'll get a good name or something.

        Loading editor
    • Yeah, but what kind of motion. Back and forth just a bit, continuously moving to the right, etc.

        Loading editor
    • Yea, continuously moving to the right in two colors, and those two colors are "#26D9FF" and "#F00FFF" , .

        Loading editor
    • Okay. Here is a revised version of the code you posted above. I did not include the styling for the header or the "-webkit-" version of things. You can add them back in if you want.

      section#wikia-recent-activity {
          background-color: #27d8fe;
          background-image: linear-gradient(
              to top right,
              #f10fff calc(100% * 1 / 13),
              #28d8ff calc(100% * 2 / 13),
              #28d8ff calc(100% * 3 / 13),
              #f10fff calc(100% * 4 / 13),
              #f10fff calc(100% * 5 / 13),
              #28d8ff calc(100% * 6 / 13),
              #28d8ff calc(100% * 7 / 13),
              #f10fff calc(100% * 8 / 13),
              #f10fff calc(100% * 9 / 13),
              #28d8ff calc(100% * 10 / 13),
              #28d8ff calc(100% * 11 / 13),
              #f10fff calc(100% * 12 / 13)
          );
          background-size: calc(100% * 13 / 3) calc(100% * 13 / 3);
          background-position: 80% bottom;
      }
       
      @keyframes hor-trans-diag-grad {
          to {
              background-position-x: 0%;
          }
      }
       
      @keyframes hvr-pulse-shrink {
          to {
              transform: scale(0.9);
          }
      }
       
      section#wikia-recent-activity:hover,
      section#wikia-recent-activity:focus,
      section#wikia-recent-activity:active {
          animation-name: hvr-pulse-shrink, hor-trans-diag-grad;
          animation-duration: 0.3s, 1.2s;
          animation-timing-function: linear, linear;
          animation-iteration-count: infinite, infinite;
          animation-direction: alternate, normal;
      }

      a

        Loading editor
    • Ohk, i'll try it and will tell u the results soon.

        Loading editor
    • Yes 

      Andrewds1021 , its working fine and i've added something by my mind too, anyway one question...

      i'm just worried, my mediawiki;wikia.css shows this "background-position-x" 'red' and says 'unkown property' , why? or i mean its not a problem, right?

      besides thank u very much Andrewds, really man ! i had forgot this forum of mine, thank god i didn't removed it from my "following" , LuvOf99Th ^_^ 15:06, July 24, 2020 (UTC).

        Loading editor
    • It should be fine. The message just means that the syntax checker doesn't recognize the property for some reason. However, it should be perfectly valid since even IE6 supports it.

        Loading editor
    • Ohk...

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.