Pergunta de design: alterar as dimensões do fundo radial do fórum

Suporte
1

Tenho uma pergunta de acompanhamento sobre este tópico: Create background gradient overlay on page, making the discussion area white

IMG_3CFC38C5EDA2-1
IMG_3CFC38C5EDA2-11125×2436 921 KB

Perceba que, ao chegar ao final dos fóruns, no celular, o fundo compete com a seção “Tópicos Sugeridos”.

E se eu quiser aumentar a opacidade em direção ao final da página (eixo Y), mas manter o topo como está? Meu código atual é este…

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

Aqui está o fundo que esse código aplica na comunidade:

image
image1299×1597 385 KB

O fundo não interfere muito nos Tópicos Sugeridos no desktop, mas fica um pouco mais pesado em dispositivos móveis.

Novamente, eu só quero torná-lo mais opaco na parte inferior do eixo Y. Existe algum ajuste que eu possa fazer no meu código?

2

Acho que encontrei um pequeno truque que pode não ser a melhor solução, mas definitivamente faz o que estou procurando, então vou documentá-lo aqui e torcer para que, se não for uma boa solução, alguém dê sua opinião!

O CSS padrão para a área de Tópicos Sugeridos na parte inferior da tela é:

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

Então, adicionei o seguinte ao meu CSS personalizado (não mexi no “clear: left”)…

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

Isso funcionou muito bem!

Aqui está um antes e depois, no celular:

background opacity tweak
background opacity tweak2938×3028 1.25 MB

3

Ah, certo, esqueci que background-attachment: fixed não funciona no iOS… eles desativaram porque, aparentemente, isso faz com que toda a tela seja redesenhada durante a rolagem, o que prejudica o desempenho.

Existem alternativas…

exemplo 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;
}

…embora, ao habilitar a funcionalidade, elas ainda estejam sujeitas aos problemas de desempenho. Então, se você não estiver satisfeito com isso, talvez queira tentar uma abordagem de fundo totalmente diferente para dispositivos móveis.

4

Brilhante! Obrigado @awesomerobot! Sempre apreciamos suas habilidades de design incríveis!

source
source691×658 1.09 MB