Streaming live at 10am (PST)

Color bar on webflow CMS page

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!

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

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 ;
    }
8 Likes

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

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

Awesome! Just copied that and looks great

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

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

made a quick clonable with a simple roll over transition just for grins - it worked :slight_smile:

…now to make it flow through jake’s noodley arms as they wave hypnotically. Do I need an SVG animation for that?
http://cdn5.thr.com/sites/default/files/imagecache/scale_crop_768_433/2014/07/adventure_time.jpg

Thanks for posting this that helped a lot :grinning:

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

Hi @mrgovindrai,
A new clonable version:

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:

enjoy! :smiley:

1 Like