[ تم الحل ] تأثير قراديين على أعمدة الأقسام

[النوميدي]

السلام عليكم و رحمة الله
هلا بالشباب ...
كيف يمكن عمل تأثير قراديين Gradient
​

 

[أبو غَيْث]

وعليكم السلام ورحمة الله وبركاته

اذا تقصد مثل ما موجود هنا بالمعهد فهي صورة وبمفهوم CSS هي patterns أما اذا فعلا تقصد Gradient فهي لن تعطيك شيء جميل
اما اذا تريد عملها ب CSS فهناك نماذج ويمكنك الاختيار منها مثلا هذا الموقع يقدم بعضا منها و يمكنك البحث في جوجل

110+ CSS Background Patterns

We are thrilled to present our latest update, featuring a meticulously curated collection of free HTML and CSS background pattern code examples. This compilation showcases a wide range of captivating patterns that will instantly elevate the visual appeal of your website.

freefrontend.com

اما بخصوص الكود يمكنك استخدام الكود التالي في قالب Extra.less

/* الى أقسام المنتدى Patterns  إضافة*/
.block.block--category.block--category .block-header {
هنا ضع الكود
}
/**********/

 

[النوميدي]

اذا فعلا تقصد Gradient فهي لن تعطيك شيء جميل

هلا بالطيب..،
ليش مو جميل...؟ رأيت الكثير من المنتديات بهذا النوع من التأثير و صراحة أراه جميل
لكن أغلب الستايلات تكون بنسبة 50% لون و 50% لون أخر عوض القرادين الحقيقي
مثلا هذا قرادين حقيقي

أما هذا فهو قرادين 50%


و طبعا إذا كان بال CSS يكون أحلى أظن
ما رأيك ...؟

بخصوص الكود ما نفع اللي تفضلت بطرحه هنا..​

 

[shqawe]

حي الله اخوي @النوميدي

بالنسبة ﻻستخدام التدرج ف css3 تقدم لك خيار ﻻستخدام الخلفية بثلاث الوان ويمكنك الدخول الى الموقع التالي واﻻختيار بين لونين او ثلاثة الوان

ColorSpace - CSS Gradient Color Generator

Generate a nice color gradient. Just enter two colors and our tool generates a perfect color gradient and the fitting css code.

mycolor.space

وعند اختيار اللون المناسب اضغط على زر انشاء وسوف ترى اللون الذي اخترته كخلفية للصفحة كلها ويمكنك ايضاً التحكم في طريقة تدرج اللون اما من اﻻعلى للاسفل او من اليمين لليسار والعكس طبعا الموقع الذي وضعته لك يمكنك ايضاً من اختيار شفافية اللون حسب ذوقك

اتمنى ان يكون هذا هو طلبك

احترامي وتقديري
اخوك
شقاوي

 

[أبو غَيْث]

يمكنك عمل ذلك اخي لكن من واقع تجربتي لا يعطي نتيجة جميلة عند استخدامه في اماكن صغيرة
وطبعا لكل واحد ذوقه
يمكنك استخدام التدرج اللوني من الموقع الذي طرحه الاخ تركي او من خلال

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

أو

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

uigradients.com

 

[النوميدي]

اتمنى ان يكون هذا هو طلبك

ما شاء الله عليك أخي الغالي شقاوي ..،
هو بالفعل ما كنت أصبوا له ، صراحة التأثيرات أكثر من رائعة
الموقع صراحة مهم

التأثير قرادين الجميل فيه كأنه يعطي طابع 3D لتصميم الويب
و هي تفتح إحتمالات لا نهاية لها
تسلم من كل شر ... يا رب​

 

[النوميدي]

يمكنك استخدام التدرج اللوني من الموقع الذي طرحه الاخ تركي او من خلال

تسلم على المواقع الجميلة يا طيب..،
طيب و الأن كيف أعمل نفس التأثير للقطع على اليمين كرما و فضلا
​

 

[أبو غَيْث]

يمكنك استخدام الكود التالي

/* تلوين خلفية عناوين الشريط الجانبي */
.block-minorHeader{
هنا ضع الكود
}
/**********/

 

[النوميدي]

يمكنك استخدام الكود التالي

بهذا الكود تلونت الخلفية ...يا طيب..،
لكن الأعمدة الأفقية بقت دون أي تأثير ​

 

[أبو غَيْث]

فضلا التوضيح هل تقصد تلوين خلفية عناوين القطع ام خلفية محتوى القطعة ؟

 

[النوميدي]

هل تقصد تلوين خلفية عناوين القطع ام خلفية محتوى القطعة ؟

نعم خلفية العنوان..
​

 

[أبو غَيْث]

اه معذرة تفضل الكود الصحيح

/* تلوين خلفية عناوين الشريط الجانبي */
.block-minorHeader{
هنا ضع الكود
}
/**********/

 

[النوميدي]

الكود الصحيح

لما أضع هذا الكود يا طيب...،
كانه يتعارض مع الذي قبله فيزيله
و تخرب بعض الأكواد كمثلا كلمة المدير ​

 

[أبو غَيْث]

جرب الكود التالي

/* تلوين خلفية عناوين الشريط الجانبي */
.p-body-sidebar .block-minorHeader {
 ضع هنا الكود
}
/**********/

 

[النوميدي]

جرب الكود التالي

روعة أخي الغالي ...تسلم الأيدي ...
طيب كمل خيرك و زيدني الكود اللي يغير البار مانيو
​

 

[أبو غَيْث]

تفضل

/*   إضافة لون لخلفية شريط الناف بار العلوي  */
.p-nav-inner {
    ضع هنا الكود
}
/**********/

 

[النوميدي]

تفضل

تسلم الأيدي .. يا طيب..،
اظن لما وضعت دالة p-nav نفعت أكثر من p-nav-inner و غيرت p-navgroup
==
أشكرك أخي أبو غيث و الأخ الغالي شقاوي على التوجيه
اللهم أرزقهم من نعمك ما بطن منها و ما ظهر ... يا رب
و إحفظهم من كل شـــــر ... يا رب
تحياتي العطــــــــرة شباب​

 

[أبو غَيْث]

اللهم امين واياك اخي
نسعد دوما بشرف مساعدتكم