Left-to-Right Header Gradients

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
trent the thief
Propellus Maximus
Posts: 613
Joined: Wed Feb 01, 2006 6:21 am
Location: Off in the dark....

Left-to-Right Header Gradients

Post by trent the thief »

Copy out nav.title-bar from one of Flare's generated css files
Add it to your stylesheet with these changes:

nav.title-bar
{
padding: 10px 0;
line-height: inherit;
display: block;
background-repeat: no-repeat;
background-position: center top;
padding-top: 25px;
padding-bottom: 25px;
background: transparent none;
background: -moz-linear-gradient(90deg, #0FF 0%, #3036ff 100%);
background: -webkit-gradient(linear, left, color-stop(0%,#0FF), color-stop(100%,#3036ff));
background: -webkit-linear-gradient(left, #0FF 0%, #3036ff 100%);
background: -o-linear-gradient(left, #0FF 0%,#3036ff 100%);
background: -ms-linear-gradient(left, #0FF 0%,#3036ff 100%);
background: linear-gradient(90deg, #0FF 0%,#3036ff 100%);
-pie-background: linear-gradient(90deg, #0FF, #3036ff);
}

In all cases, the change was to 90deg, left, 0deg, or top. The other properties describe the angle for the gradients and any color stops. Gradient definitions can get complex evem for a simple two-color linear gradient. There's a whole world of gradient fun awaiting you ;-)

I use the gradient maker at https://coolors.co/. Click "Tools" on the nav menu, then select "Create a gradient" from the drop-down's RH-side menu.

Flare complains about starting the horizontal linear gradient from the left, but it's valid and works fine. There's a feature request to add it to the validation in the stylesheet.
Trent.

Certifiable.

Image

umm...
I meant MAD Certified.

Official Propeller Beanie Owner :-)

:flare: Are you on Flare's Slack channels? PM me for an invitation! :flare:
Post Reply