Question de conception : Modifier les dimensions du fond radial du forum

Soutien
1

J’ai une question complémentaire à ce sujet : Create background gradient overlay on page, making the discussion area white

IMG_3CFC38C5EDA2-1
IMG_3CFC38C5EDA2-11125×2436 921 KB

Remarquez qu’en arrivant au bas des forums, sur mobile, l’arrière-plan entre en concurrence avec la section « Sujets suggérés ».

Et si je voulais augmenter l’opacité vers le bas de la page (axe Y) tout en conservant le haut tel quel ? Mon code actuel est le suivant…

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

Voici l’arrière-plan que ce code applique à la communauté :

image
image1299×1597 385 KB

L’arrière-plan ne gêne pas trop les « Sujets suggérés » sur ordinateur, mais il est un peu trop marqué sur mobile.

Encore une fois, je souhaite simplement qu’il soit plus opaque en bas de l’axe Y. Y a-t-il un ajustement que je pourrais apporter à mon code ?

2

Je pense avoir trouvé un petit hack qui n’est peut-être pas la meilleure solution, mais qui fait définitivement ce que je cherche. Je vais donc le documenter ici et espérer que, si ce n’est pas une bonne solution, quelqu’un viendra donner son avis !

Le CSS par défaut pour la zone des sujets suggérés en bas de l’écran est le suivant :

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

J’ai donc ajouté ce qui suit à mon CSS personnalisé (je n’ai pas touché au “clear: left”)…

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

Cela a plutôt bien fonctionné !

Voici un avant et un après, sur mobile :

background opacity tweak
background opacity tweak2938×3028 1.25 MB

3

Ah oui, j’avais oublié que background-attachment: fixed ne fonctionne pas sur iOS… ils l’ont désactivé car apparemment cela provoque le redessin de tout l’écran pendant le défilement, ce qui nuit aux performances.

Il existe des contournements…

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

…bien que, même s’ils réactivent cette fonctionnalité, ils restent sujets aux problèmes de performance. Vous voudrez peut-être essayer une approche de fond complètement différente pour les appareils mobiles si cela ne vous convient pas.

4

Génial ! Merci @awesomerobot ! Nous apprécions toujours vos talents de design fous !

source
source691×658 1.09 MB