Inccubus Fangzz's profile picture

Published by

published
updated

Category: Web, HTML, Tech

ANIMATED RAINBOW BORD3RS AND BLURBZ!! (Layout)

Hiii! Diz is my first blog post zo things might b a lil messy haha

Anyways, since we can't post layoutz yet nd I wanted 2 share how I made diz ↓, here we go

example


I used the rainbow text codes from the Tommy Panzram layout editor as a base for diz 
Anyways, heres da codez:

To add an animated rainbow border to your entire main section:


/* === c0d3d by Inccubus Fangzz  === */

<style>

main{

      border: solid;  

      border-image: linear-gradient(to top left, red, blue) 1 / 5px;

      animation-name: RainbowPan;

      animation-duration: 2s;

      animation-iteration-count: infinite;

  }

@keyframes RainbowPan {

    0% {

      border-image: linear-gradient(

        to top left, 

        #FFFF00, 

        #00FFFF, 

        #0000FF, 

        #FF0000

      ) 

        1 / 5px;

    }

    25% {

     border-image: linear-gradient(

        to top left,

        #00FFFF,

        #0000FF,

        #FF0000,

        #FFFF00

      )

        1 / 5px;

    }

    50% {

      border-image: linear-gradient(

        to top left,

        #0000FF,

        #FF0000,

        #FFFF00,

        #00FFFF

      )

        1 / 5px;

    }

    75% {

     border-image: linear-gradient(

        to top left,

        #FF0000,

        #FFFF00,

        #00FFFF,

        #0000FF

      )

        1 / 5px;

    }

    100% {

     border-image: linear-gradient(

        to top left,

        #FFFF00,

        #00FFFF,

        #0000FF,

        #FF0000

      )

       1 / 5px;

    }

  }

</style>


To add animated rainbow borders to your URL, contact, interests and links sections:



/* === c0d3d by Inccubus Fangzz  === */

<style>

  .profile .contact,

  .profile .url-info,

  .profile .table-section,

  .setting-section,

  .home-actions {

      border: 2px solid red;

      animation-name: RainbowBorder;

      animation-duration: 8s;

      animation-iteration-count: infinite;

  }

 @keyframes RainbowBorder {

     0% {

      border-color: #FFFF00;

    }

    25% {

      border-color: #00FFFF;

    }

    50% {

      border-color: #0000FF;

    }

    75% {

      border-color: #FF0000;

    }

    100% {

      border-color: #FFFF00;

    }

  }

</style>


To make your blurbs headings flash in rainbow colors:


/* === c0d3d by Inccubus Fangzz  === */

<style>

  .heading {

      background-color: red;

      animation-name: Rainbow;

      animation-duration: 8s;

      animation-iteration-count: infinite;

  }

  @keyframes Rainbow {

     0% {

      background-color: #FFFF00;

    }

    25% {

      background-color: #00FFFF;

    }

    50% {

      background-color: #0000FF;

    }

    75% {

      background-color: #FF0000;

    }

    100% {

      background-color: #FFFF00;

    }

  }

</style>


Conclusion

U can use any of those or 4ll at the same time!! Check my profile to zee how they luk togetha (and maybe add me.....)

If u wan change colors, just check da hex codes and chamge them!!!

If anythin doesn't work or u need help, just let me kno!


6 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

zyozi

zyozi's profile picture

great piece of code !! i added it to my resources blog :O


Report Comment



omg thnkz! it's an honor!!

by Inccubus Fangzz; ; Report