css gradient background behind multiple elements

Question

I have a gradient background which I'd like to apply behind a hamburger menu icon.

<button type="button" id="btn-menu">
  <span></span>
  <span></span>
  <span></span>
</button>

The background needs to apply on the span elements, NOT on the button. What I have managed to do is apply the background to EACH span - but this is not the effect I want. Please see this fiddle for a better idea of what I am trying to achieve:

https://jsfiddle.net/spacyad6/

As you will see, each span looks exactly the same. What needs to happen is the bottom span should have hardly any blue, the middle span should have a larger green area and the top span should have a larger blue area.

Is there a clever way to do this? Ideally I would prefer not to have 3 separate gradients. The solution needs to work in Firefox, Chrome & Safari.

Doing it on the button then make the span the things that hides and not the things that show the span ? I don't know if I am clear — Alburkerk
– Alburkerk, Commented Jul 21, 2017 at 3:59

Martin Parenteau · Accepted Answer · 2017-08-06 16:20:50Z

Here is one way to do it:

Define the background in the common #btn-menu span style element
Set the background size to match the button size
For each span, set background-position-y to the appropriate vertical offset

In the code snippet below, I showed 3 colors in the gradient to make the effect more obvious. The same example is shown in this jsfiddle.

#btn-menu {
  float: left;
  width: 150px;
  height: 150px;
  position: relative;
  background: none;
  border: none;
  z-index: 5000;
  position: relative;
}

#btn-menu span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  background-image: linear-gradient(45deg, red 20%, yellow 60%, blue 100%);
  background-size: 150px 150px;
}

#btn-menu span:nth-child(1) {
  top: 0;
  background-position-y: 0px;
}

#btn-menu span:nth-child(2) {
  top: 65px;
  background-position-y: -65px;
}

#btn-menu span:nth-child(3) {
  bottom: 0;
  background-position-y: -135px;
}

#gradient {
  float: left;
  margin-left: 50px;
  width: 150px;
  height: 150px;
  background-image: linear-gradient(45deg, red 20%, yellow 60%, blue 100%);
}

<button type="button" id="btn-menu">
  <span></span>
  <span></span>
  <span></span>
</button>

<div id="gradient"></div>

Alburkerk · Accepted Answer · 2017-07-21 04:09:12Z

0

I updated your js fiddle with my solution.

The idea is to use span not to display the color but to hide it.

Relevant part of the changes :

<div id="gradient">
  <span></span>
  <span></span>
</div>

#gradient {
  position : relative;
}

#gradient span {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc((150px - 45px)/2);
  background-color : #f3f5f6;
}

#gradient span:nth-child(1) {
  top: 15px;
}

#gradient span:nth-child(2) {
  bottom: 15px;
}

For this solution you need to know :

The background color hex
The height of your button
The height of the span you want

Which should not be a problem for a normal use.

Downside :

Need hardcoded values as explained before
Good luck for making a border-radius or something like that for those fake spans now

answered Jul 21, 2017 at 4:09

Alburkerk

1,77215 silver badges19 bronze badges

1 Comment

MAX POWER Over a year ago

Good idea but not workable for me as it needs to work on any background. So the "in between" areas need to be transparent, not a fixed colour.

Collectives™ on Stack Overflow

css gradient background behind multiple elements

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related