كيفية إنشاء تأثير اللون المتدرج للنص باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء تأثير نص متدرج ملون بسيط باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء تأثير نص متدرج ملون بسيط باستخدام HTML و CSS فقط.

 

تُنشئ وظيفة التدرج الخطي () CSS صورة تتكون من انتقال مستمر بين لونين أو أكثر على خط مستقيم. في برنامجنا [Gradient Text Effect] ، يوجد نص يسمى "GRADIENT" على صفحة الويب وداخل النص ، يتدفق لون متدرج باستمرار من الجانب الأيمن إلى الجانب الأيسر.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [تأثير النص المتدرج].

 

في الفيديو ، رأيت تأثير نص متدرج رائع حيث تتدفق ألوان التدرج الخطي باستمرار داخل النص. لقد استخدمت خاصيتين CSS لوضع لون الخلفية داخل النص أحدهما --webkit-background-clip والآخر هو -webkit-text-fill-color ، والتحريك أو تدفق لون الخلفية ، استخدمت CSS للرسوم المتحركة وخصائص keyframes كما رأيتم في الفيديو.

 

يمكنك أيضًا وضع صورة داخل النص ، وضع الصورة داخل النص ، يجب عليك تقديم عنوان URL للصورة داخل خاصية الخلفية ، أي background: url ("your image url هنا"). ببساطة ، نسمي هذا التأثير قص صورة إلى نص.

 

إذا كنت تحب تأثير النص المتدرج وترغب في الحصول على أكواد المصدر لهذا البرنامج. يمكنك بسهولة الحصول على أكواد هذا البرنامج من صندوقين أدناه أو يمكنك أيضًا تنزيل ملفات التعليمات البرمجية - HTML و CSS من رابط التنزيل الموضح أدناه. يمكنك استخدام تأثير النص هذا في مشروعك وفقًا لاختيارك.

 

تأثير النص المتدرج الملون

لإنشاء هذا البرنامج [تأثير النص المتدرج الملون]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow