3

Note: I am not simply asking how to put a gradient to the bottom of a div. I'm asking how to only show the gradient if the div is greater than a certain height.

I currently have this:

https://jsfiddle.net/fwtj44bj/3/

I want to apply this gradient to the bottom of any .container that is great than 100px in height:

http://www.colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100

Meaning that the second row of the first .container should have the gradient over the boxes, but the second .container should have no gradient.

How can this be done?

My thinking is to somehow make use of max-height, but I'm not sure how.

HTML:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS:

.container {
  width: 332px;
  margin-bottom: 48px;
}

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
  margin-right: 8px;
}
2
  • 1
    You'd need Javascript for achieving this.
    – Harry
    May 16, 2016 at 5:54
  • I'm almost 100% certain you'll need javascript for this. At least if you want it to be dynamic. May 16, 2016 at 5:59

4 Answers 4

5

You need javascript to get the height of div. after that you can set a class that will add gradient. If you want gradient over boxes then we use ::after pseudo class.

have a look please

var heights = document.getElementsByClassName('container');
for (var i = 0; i < heights.length; i++) {
    var height = heights[i].offsetHeight;
    if(height > 104){
    	heights[i].className += " gradient";
    }
}
.container {
  width: 332px;
  margin-bottom: 48px;
  padding:0px;
  position:relative;
}

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
  margin-right: 8px;
}

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
.gradient::after{
  display:inline-block;
  position:absolute;
  z-index:999;
  bottom:0px;
  left:0px;
  width:100%;
  height:100%;
  content:' ';
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */  
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

4

Without javascript. Use :after selector.Position your container as relative and then offset the :after element by 100px.

.container {
  width: 332px;
  margin-bottom: 48px;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
  margin-right: 8px;
}

.container:after {
  content: '';
  position: absolute;
  top: 100px;
  left:0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

4
  • In this example the gradient grows in height as the height of the container grows. So as more boxes are added the height of the gradient changes because it's positioned from the top, not the bottom. May 16, 2016 at 6:53
  • Yes. And what do you think OP expects? He didn't mention more rows , and he didn't specify how it should behave if there are more box elements.
    – Paran0a
    May 16, 2016 at 6:57
  • I think it is implied - otherwise why not just add it to the first container, and any other similar containers manually? May 16, 2016 at 7:05
  • Good approach but keep in mind it is not a dynamic solution. with change in box height (due to content) or number of rows it will fail. May 25, 2016 at 20:51
1

If you add jQuery to your project you can do this by adding a css class after checking each .container div's height.

https://jsfiddle.net/fwtj44bj/5/

$(".container").each(function(){
  if ($(this).height() > 100) {
    $(this).addClass("gradient");
  }
});
1

Edit I edited my answer so the pseudo element have height:calc(100% - 100px); instead of just height:100%, this way you don't need to have overflow:hidden on .container

How about this: check fiddle

.container{
  width: 332px;
  margin-bottom: 48px;
  position:relative;
}
.container:after{
  content:' ';
  position:absolute;
  bottom:0px;
  width:100%;
  height:calc(100% - 100px);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,0,255,1) 100%);
}

Obvious limitations: .container should have position:relative and overflow:hidden.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.