CODEWITHSUNDEEP
css
John
John

Reputation: 83

CSS div with different background colors without rainbow effect

I would like to create a css bar like the this:

CSS sample

The first way i know is to use number divs each with its onw color.

The second way is to use one div with `

background: -webkit-linear-gradient (left, red, orange, yellow, green, blue, indigo);

this way achieves what I want, however the colors fade into each other like a rainbow, and this is the effect that i don't want.

so is there any way to achieve a css div with different colors like the shown one BUT without rainbow effect?

cheers.

EDIT: Thanks a lot every one, for your time and help.

Upvotes: 4

Views: 487

Answers (3)

denchu
denchu

Reputation: 869

See CSS cross-browser code below:

.bar {
  height: 10px;
  width: 350px;
  background: -webkit-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  background: red; /* For browsers that do not support gradients */
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* Standard syntax */
  background: linear-gradient(to right, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%); 
}
<div class="bar"></div>

Upvotes: 5

user6269864
user6269864

Reputation:

Use this:

background: -webkit-linear-gradient(left, red, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, indigo 60%, indigo 80%, blue 80%, blue 100%);

There's no need to use several divs.

The idea is that you specify e.g. gradient from orange at 20% to the same color 40% by specifying the color twice.

Fiddle: https://jsfiddle.net/4hrc7ydx/

Upvotes: 1

Heavy
Heavy

Reputation: 1900

You can achieve this effect using gradient if you specify color positions:

background: -moz-linear-gradient(top, #ff3232 0%, #ff2828 35%, #48ff30 35%, #48ff30 35%, #48ff30 68%, #7db9e8 68%);

You can use CSS gradient editor to be sure you're using correct parameters.

Upvotes: 4

Related Questions