Pregunta de diseño: cambiar dimensiones del fondo radial del foro

Soporte
1

Tengo una pregunta de seguimiento sobre este tema: Create background gradient overlay on page, making the discussion area white

IMG_3CFC38C5EDA2-1
IMG_3CFC38C5EDA2-11125×2436 921 KB

Fíjate que, al llegar al final de los foros en el móvil, el fondo compite con la sección “Temas sugeridos”.

¿Y si quisiera aumentar la opacidad hacia la parte inferior de la página (eje Y) pero mantener la parte superior tal como está? Mi código actual es el siguiente…

body {
 background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto  ;
 background-attachment: fixed;
}

Así es el fondo que este código coloca en la comunidad:

image
image1299×1597 385 KB

En el escritorio, el fondo no interfiere demasiado con los “Temas sugeridos”, pero en dispositivos móviles resulta un poco más pesado.

De nuevo, solo quiero que sea más opaco en la parte inferior del eje Y. ¿Hay algún ajuste que pueda hacer en mi código?

2

Creo que encontré un pequeño truco que quizás no sea la mejor solución, pero definitivamente hace lo que necesito, así que lo documentaré aquí. Espero que, si no es una buena solución, alguien pueda aportar su opinión.

El CSS predeterminado para el área de Temas sugeridos en la parte inferior de la pantalla es:

.suggested-topics {
    clear: left;
    padding: 20px 0 15px 0;
}

Así que agregué lo siguiente a mi CSS personalizado (no modifiqué el “clear: left”)…

.suggested-topics {
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
}

¡Esto funcionó bastante bien!

Aquí tienes una comparación antes y después, en móvil:

ajuste de opacidad del fondo
ajuste de opacidad del fondo2938×3028 1.25 MB

3

¡Ah, cierto! Se me olvidó que background-attachment: fixed no funciona en iOS… lo deshabilitan porque, al parecer, provoca que toda la pantalla se redibuje mientras se hace scroll, lo cual es perjudicial para el rendimiento.

Existen soluciones alternativas…

ejemplo de CSS 
body.mobile-view {
  background: none;
}

body.mobile-view:after {
  content:"";
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:-1;
  display:block;
  background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto;
  background-size:cover;
}

…aunque, mientras habilitan la funcionalidad, siguen sujetos a problemas de rendimiento, por lo que quizás quieras probar un enfoque de fondo completamente diferente para dispositivos móviles si no te convence este.

4

¡Brillante! Gracias, @awesomerobot. ¡Siempre valoramos tus increíbles habilidades de diseño!

source
source691×658 1.09 MB