Streaming live at 10am (PST)

Color bar on webflow CMS page


#1

Would be awesome if someone could show how to make the skinny color bar effect on the "sign up" form for beta page. I like how it changes colors in a loop. Really cool!

https://webflow.com/cms

anybody have the time and patience to attempt this cool effect? smile


#2

After seeing that as well, I was blown away. Here is the custom CSS our designer, @nate, used:

@-webkit-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@-moz-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@keyframes beta-gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
    .beta-colorbar {
        background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
        background-size: 500% auto;    
        -webkit-animation: beta-gradient 3s linear infinite ;
        -moz-animation: beta-gradient 3s linear infinite;
        animation: beta-gradient 3s linear infinite ;
    }

#3

Great job @nate !! Thanks @PixelGeek this was a nice little trick!


#5

Hey @PixelGeek thanks for sharing, where did he put the code to make this work?


#6

Awesome! Just copied that and looks great


#7

he put it in the custom code area.

For more information on this, please refer to this article: http://help.webflow.com/site-settings/custom-code


#8

This is wikipedias new definition of awesome looks like @PixelGeek smile Thanks for sharing your code @nate!

made a quick clonable with a simple roll over transition just for grins - it worked smile
https://webflow.com/website/bar-gradient

...now to make it flow through jake's noodley arms as they wave hypnotically. Do I need an SVG animation for that?


#9

Thanks for posting this that helped a lot grinning


#10

I'm sorry none of the links seem to be working in this thread! Could someone repost?


#11

Hi @mrgovindrai,
A new clonable version:

https://webflow.com/website/gradient-color-bar

Custom code is in the page level > header > custom code section nested between <style> </style> tags
Create a div with the class name of beta-colorbar

<style>
@-webkit-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@-moz-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@keyframes beta-gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
    .beta-colorbar {
        background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
        background-size: 500% auto;    
        -webkit-animation: beta-gradient 3s linear infinite ;
        -moz-animation: beta-gradient 3s linear infinite;
        animation: beta-gradient 3s linear infinite ;
    }
</style>

For tips on inserting custom code and the custom code sections:
http://help.webflow.com/site-settings/custom-code

enjoy! :smiley:


#12