Gradually change the opacity of divs using CSS

Question

Gradually change the opacity of divs using CSS

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

1

I am looking for a purely CSS solution to the following problem.

I have a div that contains an indeterminate number of divs, I'm looking for that given an RGB color, for example, (0,0,0) and a range of opacity values (0.3 - 0.7) will vary the opacity of the divs in that range progressively.

At the moment I have the following. Using the selectors first-child and last-child :

.container {
  background : #f7f7f7;
  padding : 10px;
}

.container div {
  height : 30px;
  margin : 5px;
  background : rgba(0, 0, 0, .5);
}

.container div:first-child {
  background : rgba(0, 0, 0, .3);
}

.container div:last-child {
  background : rgba(0, 0, 0, .7);
}

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

Is it possible using CSS only?

css3 css

asked by Jose Hermosilla Rodrigo 06.03.2017 в 23:01

source

3 answers

2

With a certain number can be done, exceeding the number the color is maintained. A clear example is a breadcrumb:

    .breadcrumb li:nth-child(2) a       { background:        hsla(207,24%,35%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(207,24%,35%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(207,24%,40%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(207,24%,40%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(207,24%,45%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(207,24%,45%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(207,24%,50%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(207,24%,50%,1); }
    .breadcrumb li:last-child a {
      background: hsla(207,24%,80%,1) !important;
      color: black;
      pointer-events: none;
      cursor: default;
    }

The key is to speculate the amount of element that we are going to use, in your example we could insert this code:

.container div:nth-child(2) { background:rgba(0, 0, 0, .4); }
.container div:nth-child(3) { background:rgba(0, 0, 0, .5); }
.container div:nth-child(4) { background:rgba(0, 0, 0, .6); }

answered by 06.03.2017 в 23:48

1

Using the directive @for in Sass you can get it by CSS (preprocessed):

@for $i from 1 through 4 {  

  div:nth-child(#{$i})  {

    opacity: calc(.2 * #{$i});
  } 
}

See example

answered by 07.03.2017 в 00:11

Draw functions f (x) with JavaScript and canvas Java syntax error

score 3 · Accepted Answer

CSS works with selectors, it is impossible to do calculations or iterations, the closest would be to use 'nth-child' to reference a child of an element.

.container div:nth-child(1) { background : rgba(0, 0, 0, .1); };
.container div:nth-child(2) { background : rgba(0, 0, 0, .2); };
.container div:nth-child(3) { background : rgba(0, 0, 0, .3); };

But in this way you must statically specify the opacity value, not randomly, if the child of the container element contains more children in turn, these will be affected, to only apply to the immediately lower children then

.container > div:nth-child(1) { background : rgba(0, 0, 0, .1); };
.container > div:nth-child(2) { background : rgba(0, 0, 0, .2); };
.container > div:nth-child(3) { background : rgba(0, 0, 0, .3); };

to get what you want you must necessarily use Javascript to give a random value to the opacity and additionally to use a loop where you assign the opacity to 'n' number of children.

With SASS or LESS you can use iterators but at the end this generates CSS so you are restricted to the number of iterations you specify in the preprocessor so you will get to the same thing.