Zen Eddin Allaham نشر 28 مايو أرسل تقرير نشر 28 مايو كيف يمكن دمج لون الوسم a مثل linear-gradient() الموجودة في background 2 اقتباس
0 Mustafa Suleiman نشر 28 مايو أرسل تقرير نشر 28 مايو من خلال خاصية background-image لتعيين خلفية للعنصر a ثم تعيين قيمة من خلال دالة linear-gradient كالتالي: a { display: inline-block; padding: 10px 20px; text-decoration: none; color: white; background-image: linear-gradient(to right, #ff416c, #ff4b2b); border-radius: 5px; } حيث من خلال background-image: linear-gradient تستطيع تحديد التدرج اللوني وأيضًا تخصيص الاتجاه to right, to bottom, وغيرهم، بالإضافة إلى تحديد الألوان. ستجد تفصيل هنا: اقتباس
0 Zen Eddin Allaham نشر 28 مايو الكاتب أرسل تقرير نشر 28 مايو لا اريدهم على شكل خلفية بل اريدهم فقط color لكن مدمج اللون 1 اقتباس
0 محمد_عاطف نشر 28 مايو أرسل تقرير نشر 28 مايو لا يمكنك استخدام linear-gradient مباشرة كلون لنص الوسم <a> أو لأي نص آخر باستخدام خاصية color. وذلك لأنها لا تدعم التدرجات اللونية (gradients). ولكن هناك طريقة للتحايل على ذلك حيث يمكنك استخدامها لعمل تدرج لوني للنص سواء داخل الوسم <a> أو غيره باستخدام خاصيتي background و -webkit-background-clip. <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <style> a { font-size: 24px; font-weight: bold; background: linear-gradient(90deg, #f00, #00f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; } </style> </head> <body> <a href="#">gradiant color text</a> </body> </html> حيث background تحدد تدرج اللون الذي نريده . و -webkit-background-clip: text يجعل الخلفية تقتصر على النص فقط . و -webkit-text-fill-color: transparent تجعل النص شفاف بحيث يظهر التدرج. اقتباس
0 Mustafa Suleiman نشر 28 مايو أرسل تقرير نشر 28 مايو بتاريخ 5 دقائق مضت قال Hxfhf Ucicic: لا اريدهم على شكل خلفية بل اريدهم فقط color لكن مدمج اللون لم تقم بالتوضيح هل تقصد الخلفية أم لون النص نفسه، هل تريده مثل التالي؟ تم توضيح في ذلك تعليق سابق. أم لون الخلفية للعنصر نفسه؟ فذلك ما قمت بتوضيحه في التعليق الخاص بي. a { display: inline-block; padding: 10px 20px; text-decoration: none; color: white; background-image: linear-gradient(to left, #bba6ab, #ff4b2b); border-radius: 5px; } اقتباس
0 Mustafa Suleiman نشر 28 مايو أرسل تقرير نشر 28 مايو بتاريخ 8 دقائق مضت قال Hxfhf Ucicic: اقصد لون نص نفسه اقتباس
السؤال
Zen Eddin Allaham
كيف يمكن دمج لون الوسم a مثل linear-gradient() الموجودة في background
6 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.