سؤال تصميم: تغيير أبعاد الخلفية الدائرية للمنتدى

[jord8on (Jordan)]

لديّ سؤال متابعة لهذا المنشور: Create background gradient overlay on page, making the discussion area white

لاحظ أنه عند الوصول إلى أسفل المنتديات، على الأجهزة المحمولة، يتنافس الخلفية مع “المواضيع المقترحة”.

ماذا لو أردت زيادة الشفافية أكثر نحو أسفل الصفحة (المحور الصادي) مع الحفاظ على الجزء العلوي كما هو؟ كودي الحالي هو…

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

إليك الخلفية التي يضعها هذا الكود على المجتمع:

لا تتداخل الخلفية كثيرًا مع “المواضيع المقترحة” على سطح المكتب، لكنها تبدو ثقيلة بعض الشيء على الأجهزة المحمولة.

مرة أخرى، أريد فقط جعلها أكثر تعتيمًا في أسفل المحور الصادي. هل هناك تعديل يمكنني إجراؤه على كودي؟

[jord8on (Jordan)]

أعتقد أنني وجدت حيلة صغيرة قد لا تكون الحل الأفضل، لكنها بالتأكيد تحقق ما أبحث عنه، لذا سأوثقها هنا، وآمل أنه إذا لم يكن هذا حلاً جيدًا، أن يتدخل شخص ما!

تنسيق CSS الافتراضي لمنطقة “المواضيع المقترحة” في أسفل الشاشة هو:

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

لذا أضفت ما يلي إلى تنسيقي CSS المخصص (لم أقم بالتعديل على “clear: left”)…

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

هذا نجح بشكل جيد جدًا!

إليك صورة قبل وبعد، على الهاتف المحمول:

[awesomerobot (Kris)]

أوه، صحيح، لقد نسيت أن background-attachment: fixed لا يعمل على iOS… لقد قاموا بتعطيله لأنه، حسبما يبدو، يتسبب في إعادة رسم الشاشة بالكامل أثناء التمرير، وهو أمر سيئ للأداء.

هناك حلول بديلة…

مثال على 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;
}

…ومع ذلك، في حين أنها تتيح هذه الوظيفة… فإنها لا تزال عرضة لمشاكل الأداء، لذا قد ترغب في تجربة نهج مختلف تمامًا للخلفية على الأجهزة المحمولة إذا لم تكن راضيًا عن ذلك.

[jord8on (Jordan)]

رائع! شكرًا لك يا @awesomerobot! نحن نقدر دائمًا مهاراتك المذهلة في التصميم!