شرح إضافة ألقاب أعضاء (User Banners) بألوان متدرجة ومتحركة

[codeNET]

الوصف:
طريقة احترافية لإضافة تأثيرات ألوان متدرجة ومتحركة (Animated Gradients) لألقاب الأعضاء (User Banners).
طريقة التركيب:
1. أضف الكود التالي في قالب extra.less:

.userBanner {
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 65%;
padding: 3px 6px;
background-size: 600% 600%;
animation: AnimBanner 10s ease infinite;
&.userBanner--staff {
color: #fff;
border: none;
background: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
background-size: 900% 900%;
}
&.admin {
background-image: linear-gradient(270deg, #ff0000, #dc00ff, #ff9400);
}
&.moder {
background-image: linear-gradient(270deg, #01a72c, #df841a, #468153);
}
&.user {
background-image: linear-gradient(270deg, #878a88, #7b73a5, #648981);
}
}
@keyframes AnimBanner {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

2. في إعدادات مجموعة العضو، قم بإضافة اسم الكلاس الخاص في خانة "تنسيق CSS إضافي" (Extra CSS class)، على سبيل المثال:
* للمدير: admin
* للمشرف: moder
* للعضو: user

حقوق الطبع والنشر © منتدى كود نت codeNET. جميع الحقوق محفوظة.

 

[masrysat.com]

بارك الله فيك

 

[ixGnTx]

شاكرلك