1

Busco una solución puramente CSS al siguiente problema.

Tengo un div que contiene un número indeterminado de divs, busco que dado un color RGB, por ejemplo, (0,0,0) y un range de valores de opacidad (0.3 - 0.7) vaya variando la opacidad de los divs en ese rango de manera progresiva.

De momento tengo lo siguiente. Usando los selectores first-child y 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>

¿Es posible utilizando solamente CSS?

3 respuestas 3

3

CSS funciona con selectores, es imposible hacer calculos o iteraciones, lo mas cercano seria utilizar 'nth-child' para referenciar a un child de un elemento.

.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); };

Pero de esta manera debes especificar estaticamente el valor de opacidad, no de manera aleatoria, si los child del elemento container contiene mas hijos a su vez, estos se van a ver afectados, para solamente se aplique a los hijos inmediatamente inferiores entonces

.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); };

para obtener lo que quieres necesariamente debes utilizar Javascript para dar un valor aleatorio a la opacidad y adicionalmente para utilizar un bucle donde asignes la opacidad a 'n' cantidad de hijos.

Con SASS o LESS puedes utilizar iteradores pero a la final esto genera CSS así que estas restringido a la cantidad de iteraciones que especifiques en el preprocesador así que llegaras a lo mismo.

2

Con un número determinado se puede hacer, exediendo el número el color se mantiene. un ejemplo claro es un 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;
    }

La clave esta en especular la cantidad de elemento que vamos a usar, en tu ejemplo podriamos insertar este codigo:

.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); }
1

Usando la directiva @for en Sass puedes conseguirlo mediante CSS (preprocesado):

@for $i from 1 through 4 {  

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

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

Ver ejemplo

1
  • 1
    Genial saber esto! La única pega que el ejemplo no funciona, lo he arreglado usando opacity: #{$i * 0.2}; Muchas gracias! el 7 mar. 2017 a las 1:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.