تحقيق نص ثنائي اللون باستخدام CSS

الاستعلام الأولي:

كيف يمكنك تحقيق تأثير النص بألوان مختلفة الألوان على كل جانب دون تكرار المحتوى؟

النهج التقليدي:

تتضمن الطريقة الشائعة إنشاء عنصرين نصيين منفصلين ووضعهما جنبًا إلى جنب، كل منهما بما يناسبه خلفية فريدة وألوان أمامية.

الحل البديل:

لتقليل تكرار المحتوى، فكر في الاستفادة من خصائص CSS مثل مقطع الخلفية: النص. تتيح لك هذه الخاصية تطبيق تدرج على النص نفسه، مما يتيح لك ما يلي:

تنفيذ CSS:

#main { الخلفية: تدرج خطي (إلى اليمين، أحمر 50%، #fff 50%)؛ } #الرئيسي > ص { الخلفية: تدرج خطي (إلى اليسار، أزرق 50%، #fff 50%)؛ العرض: كتلة مضمنة؛ -webkit-background-clip: نص؛ مقطع الخلفية: النص؛ -webkit-text-fill-color: شفاف؛ اللون: شفاف؛

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

بنية HTML: