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

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.

Hay algoTengo una plantilla web en la que esté haciendo mal?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

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 > *

Quisiera que el filtro para oscurecer el color primario, no afecte al texto en blanco.

Hay algo que esté haciendo mal?

.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>

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

Origen Enlace
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 > *

Quisiera que el filtro para oscurecer el color primario, no afecte al texto en blanco.

Hay algo que esté haciendo mal?

.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>