Domanda di design: modificare le dimensioni dello sfondo radiale del forum

Supporto
1

Ho una domanda di seguito a questo post: Create background gradient overlay on page, making the discussion area white

IMG_3CFC38C5EDA2-1
IMG_3CFC38C5EDA2-11125×2436 921 KB

Notate che, arrivando alla fine dei forum, su mobile, lo sfondo entra in competizione con “Argomenti suggeriti”.

E se volessi aumentare l’opacità verso la parte inferiore della pagina (asse y) mantenendo invece invariata la parte superiore? Il mio codice attuale è questo…

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

Ecco lo sfondo che questo codice applica alla community:

image
image1299×1597 385 KB

Su desktop lo sfondo non interferisce troppo con “Argomenti suggeriti”, ma su dispositivi mobili risulta un po’ troppo pesante.

Di nuovo, vorrei solo renderlo più opaco nella parte inferiore dell’asse y. C’è una modifica che potrei apportare al mio codice?

2

Penso di aver trovato un piccolo trucco che potrebbe non essere la soluzione migliore, ma fa sicuramente ciò che cerco, quindi lo documenterò qui e spero che, se non è una buona soluzione, qualcuno intervenga!

Il CSS predefinito per l’area Argomenti suggeriti in basso nello schermo è:

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

Quindi ho aggiunto quanto segue al mio CSS personalizzato (non ho modificato “clear: left”)…

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

Questo ha funzionato davvero bene!

Ecco un confronto prima e dopo, su mobile:

background opacity tweak
background opacity tweak2938×3028 1.25 MB

3

Ah giusto, avevo dimenticato che background-attachment: fixed non funziona su iOS… lo disabilitano perché apparentemente causa il ridisegno dell’intero schermo durante lo scorrimento, il che è dannoso per le prestazioni.

Ci sono delle soluzioni alternative…

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

…anche se abilitano la funzionalità, sono comunque soggette a problemi di prestazioni, quindi potresti voler provare un approccio completamente diverso per lo sfondo su mobile se non ti soddisfa questa soluzione.

4

Brillante! Grazie @awesomerobot! Apprezzo sempre le tue pazzesche capacità di design!

source
source691×658 1.09 MB