Skip to main content
2 de 2
Explico lo que deseo lograr y el motivo de mi problema
EMCode
  • 1.1k
  • 2
  • 10
  • 29

Aplicar filtro css a contenedor padre sin afectar los hijos

Revisando en el sitio, veo que esta pregunta se ha echo anteriormente con regularidad, la solución que proponen es revertir la propiedad con los selectores > * Fuentes: 1 2 3

Quisiera que el filtro brightness para oscurecer el color primario primary-color, no afecte al texto en blanco text-white en la sección footer.

Tengo una plantilla web en la que existe únicamente un color primario (aplicado a navbars, botones, footers, etc) y un secundario que por defecto siempre será gris.

Este color primario lo debo cambiar a petición por el usuario, tengo muchos usuarios, y para dar un poco de variedad a ese primary-color, aplico filtros CSS (como saturación para "avivar" un poco el tono, o brillo para aclarar u oscurecer el tono). Sé que no es la mejor forma y existen alternativas como LESS en CSS en la que puedo utilizar @variables para definir valores; lamentablemente el sitio está muy avanzado ya para pasarme a esta opción (A lo mejor en un futuro con más tiempo y conocimiento lo haga).

Usando estos filtros solo debo cambiar el valor heaxadecimal en primary-color y listo. (No estoy siendo perezoso, en serio me ahorra demasiado trabajo y tiempo).

Esto es lo que tengo actualmente.

.primary-color{
background-color: #4285F4;
}

.primary-color .footer-copyright{
filter: brightness(50%);
}

.text-white{
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Footer -->
  <footer class="page-footer font-small primary-color darken-3">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="mb-5 flex-center">
            <p class="text-center">Redes Sociales</p>            
          </div>
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <div class="footer-copyright text-center text-white py-3 primary-color">© Copyright</div>

  </footer>

Y así es como quisiera que se vea:

Imagen

EMCode
  • 1.1k
  • 2
  • 10
  • 29