4

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

3
  • 2
    No estoy seguro si entiendo bien tu pregunta, pero tal vez podrías usar un position: absolute para el texto en blanco y así ubicarlo por encima del contenedor que estas oscureciendo.
    – Jucaalpa
    Commented el 9 ene. 2019 a las 22:48
  • Este selector .primary-color > * .footer-copyright es un poco raro y no seleccionará nada porque .footer-copyright es un hijo directo de .primary-color y al hacer .primary-color > * .footer-copyright entonces estás indicando que .footer-copyright debe ser al menos un nieto. Deberías indicar qué preguntas has utilizado como referencia en el sitio y explicar qué es lo que intentas hacer con el filtro y el código. Lee Cómo preguntar para más información.
    – Alvaro Montoro
    Commented el 10 ene. 2019 a las 13:55
  • Hola y gracias por sus atentas observaciones, voy a modificar mi código para darme a entender mejor
    – EMCode
    Commented el 11 ene. 2019 a las 12:13

1 respuesta 1

2

Lo que te dicen los compañeros en los comentarios es muy cierto, por un lado usa position: absolute, preferiblemente en una clase aparte (como un "nieto").

Esto es lo que yo haría, cabe resaltar que las propiedades top y right de la clase .text-white tienen valores para ajustarlos al snippet de esSO, debes usar unos diferentes en tu sitio web, o bien asignarle un ancho fijo a ese DIV, aplicar un left:50% y luego con la propiedad margin-left le das un valor que sea la mitad del ancho del DIV.

O como gustes y sea acorde a tu necesidad. Suerte!

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

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

.text-white{
color: #fff;
position: absolute;
top: 30px;
right: 45%;
}
<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 py-3 primary-color">&nbsp;</div>
    <div class="text-white">© Copyright</div>

  </footer>


ACTUALIZACIÓN

Te propongo otra opción mucho más simple y sencilla, sin necesidad de crear otro div.

Solo cambiando una propiedad de tu CSS:

filter: brightness(50%);

Por

background: rgba(0, 0, 0, 0.5);

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

.primary-color .footer-copyright {
  background: rgba(0, 0, 0, 0.5);
}

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

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.