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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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