OL Learn

Gradient Background on a DIV


#1

Is there a way to set a linear gradient on a DIV background?
I tried this, but it does not appear to work however I could be using it in the wrong place.

background: linear-gradient(orange, red);

In PP7 you could create a dox and add a Gradient Fill to a color with say 25 steps vertical. I would like to replicate this in Connect.


#2

It appears that I need to use background-image instead

background: transparent linear-gradient(orange, red) 

#3

Actually, something like this works just fine:

<div style="width:500px;height:300px;background: linear-gradient(orange, red)">

But you can’t easily recreate the “banding” effect that PP7 displayed (i.e. the 25 clear cut color transitions), unless you’re able to provide 25 distinct color values to the linear-gradient() instruction. CSS provides much smoother transitions compared to PP7, so unless you’re specifically looking to recreate that banding effect (as in this example), the CSS method results in something much more pleasing to the eye.

.


#4

The CSS method is perfect for my purposes to create a Reverse RX logo.
Here are my settings:

ExampleGradient
Original print on the left and photocopy on the right.


#5

Very nice. And very clever.