إنشاء نص متدرج ديناميكي في CSS: الكود والتصميم ودليل التصدير

فهم نص التدرج في CSS

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

يحتوي تطبيق نص متدرج CSS على العديد من الفوائد المهمة في تصميم UI / UX.من وجهة نظر بصرية ، فإنه يخلق قيمة جمالية ويوفر مظهرًا وشعورًا عصريًا ومتطورًا عند نظرة فورية.يعزز التصميم الديناميكي أيضًا التفاعل على الصفحات المقصودة وأقسام البطل من خلال إدخال انتقالات الحركة أو اللون ، مما يجذب انتباه المشاهد.يمنح نص التدرج أيضًا المصممين حرية تعبير إضافية لتقديم هوية العلامة التجارية من خلال خيارات الألوان المميزة والعمق البصري الذي يتحقق من خلال الطبقات.

أنواع التدرج للنص يجب أن تعرف

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

التدرجات الخطية

غالبًا ما يتم استخدام لون النص المتدرج الخطي في CSS ويتضمن تخرج الألوان في خط مستقيم - أفقيًا أو رأسيًا أو قطريًا.يتم بناء الجملة على النحو التالي:

بناء الجملة: التدرج الخطي (الاتجاه ، color-stop1 ، color-stop2).

على سبيل المثال ، ينتج عن التدرج الخطي (إلى اليمين ، # ff7e5f ، # feb47b) تأثير تدرج أفقي.يمكن استخدام هذا للعناوين النظيفة أو اللافتات أو نصوص البطل حيث يلزم تغيير لون سلس من جانب إلى آخر.

التدرجات الشعاعية

تشع التدرجات الشعاعية من مركز واحد وتشكل تدرجًا دائريًا أو إهليلجيًا عامًا للألوان.بناء الجملة هو:

بناء الجملة: التدرج الشعاعي (الشكل ، color-stop1 ، color-stop2).

تنتج عينة مثل التدرج الشعاعي (الدائرة ، # 6a11cb ، # 2575fc) تأثيرًا متوهجًا أو أمة الله مثاليًا لإنشاء عمق في الشعارات أو الملصقات أو إبراز عناصر النص في تصميمات واجهة المستخدم المعاصرة.

التدرجات المخروطية

تقوم التدرجات المخروطية بتدوير الألوان حول نقطة مركزية ، مثل شرائح المخطط الدائري.يبدو بناء الجملة على النحو التالي: التدرج المخروطي (color-stop1 ، color-stop2).على سبيل المثال ، التدرج المخروطي (من 0 درجة ، أحمر ، أصفر ، أخضر ، أحمر) يخلق دورانًا دائريًا للألوان.غالبًا ما تُستخدم هذه التدرجات لمزيد من النصوص الفنية أو ذات النمط المعلوماتي ، مما يمنح الطباعة الخاصة بك تطورًا ديناميكيًا وغير متوقع.

كيفية إنشاء رسوم متحركة متدرجة للنص في CSS

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

خطوة 1
1. إعداد ملفات المشروع الخاص بك

ابدأ بإنشاء مجلد جديد وافتحه في محرر التعليمات البرمجية المفضل لديك (مثل VS Code).في الداخل ، قم بإنشاء ملفين: index.html و style.CSS.

خطوة 2
1. كتابة HTML الأساسية

في index.html ، أضف بنية معيارية وقم بتضمين علامة < h1 > واحدة لنص التدرج اللوني الخاص بك.اربط ملف style.CSS في قسم < head >.

<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" / > < meta name = "viewport" content = "width = device-width, initial-scale = 1.0" / > < title > Gradient Text Animation < / title > < link rel = "stylesheet" href = "style.CSS" / > < / head > < body > < h1 > Animated Gradient Text < / h1 > < / body > < / html >

خطوة 3
1. نمط الجسم باستخدام CSS

في style.CSS ، قم بتوسيط المحتوى الخاص بك باستخدام Flexbox وقم بتطبيق خلفية داكنة على التباين:

الجسم {الهامش: 0 ؛ الحشو: 0 ؛ الارتفاع: 100vh ؛ العرض: المرن ؛ تبرير المحتوى: المركز ؛ محاذاة العناصر: المركز ؛ الخلفية: # 181818 ؛ عائلة الخطوط: "Poppins" ، sans-serif ؛}

خطوة 4
1. إضافة وقص خلفية التدرج إلى النص

قم بنمط علامة h1 لتطبيق خلفية التدرج وقم بقصها على النص:

h1 {حجم الخط: 4rem ؛ الخلفية: التدرج الخطي (90deg ، # ff6a00 ، # ee0979 ، # ff6a00) ؛ حجم الخلفية: 200 ٪ ؛ مقطع الخلفية: نص ؛ -webkit-background-clip: نص ؛ اللون: شفاف ؛ الرسوم المتحركة: التدرج-الرسوم المتحركة 3s الخطي اللانهائي ؛}

خطوة 5
1. تحريك التدرج

الآن ، حدد الإطارات الرئيسية لإنشاء رسوم متحركة نصية متدرجة من اليسار إلى اليمين في CSS:

keyframes gradient-animation {0 ٪ {background-position: 200 ٪ 50 ٪ ؛} 100 ٪ {background-position: 0 ٪ 50 ٪ ؛}}

نصيحة للمحترفين: للحصول على انتقالات أكثر سلاسة ، كرر التدرج اللوني للخط الأول في CSS في النهاية (كما هو موضح في # ff6a00 المستخدم مرتين).يساعد هذا في تجنب القفزات اللونية الحادة أثناء حلقة الرسوم المتحركة.

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

استخدام CapCut لتصميم نص متدرج بدون كود

يعد محرر فيديو سطح المكتب CapCut أداة تصميم قوية ومتعددة الأغراض غنية بميزات تحرير النصوص الإبداعية مثل الأقنعة وتأثيرات النص وتخصيص الخط.قدرته على إنشاء نص متدرج ملون دون الحاجة إلى كتابة سطر واحد من التعليمات البرمجية يجعله تطبيقًا مفيدًا للغاية للمصممين والمبدعين.قناع وتأثيرات النص من CapCut جعل متقدمة للغاية professional-looking تصاميم النص ممكن.باستخدام خيار القناع ، يمكنك مزج نص متدرج وأي نوع من الأشكال ، بدءًا من الأقنعة الخطية والشعاعية إلى الأقنعة المرآة ، وإنشاء عمق وأبعاد.ابدأ في CapCut اليوم وابدأ في إنشاء نص متدرج رائع لمشاركتك دون أي تشفير!

السمات الرئيسية

• الأقنعة: باستخدام وظيفة قناع CapCut ، يمكنك دمج طبقات نصية متعددة لإنشاء تأثيرات تدرج سلسة ومصممة خصيصًا.
• تأثيرات النص: يتضمن CapCut تأثيرات نصية ديناميكية مثل التوهج والظل والنيون والسكتة الدماغية.يمكن أن تعزز هذه مظهر نص التدرج الخاص بك عن طريق إضافة العمق والذوق.
• خيارات التصدير: يسمح لك CapCut بتصديره على شكل PNG عالي الجودة ، وهو مثالي للاندماج في مواقع الويب باستخدام HTML / CSS.

كيفية إنشاء نص متدرج في CapCut

خطوة 1
1. استيراد الوسائط والنص

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

خطوة 2
1. إنشاء نص التدرج

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

حدد المقطع العلوي وتوجه إلى علامة التبويب "فيديو" وقم بتطبيق "قناع". اضبط إعدادات الزاوية والريشة لتحديد اتجاه وسلاسة انتقال التدرج.

خطوة 3
1. تصدير الملف

بمجرد اكتمال نص التدرج اللوني ، انقر فوق الزر "تصدير" في الزاوية العلوية اليمنى.إذا كنت ترغب في استخدام نص التدرج على موقع ويب (مثل قسم بطل أو لافتة) ، فاختر تنسيق PNG لتصدير صورة ثابتة ، مما يجعله مثاليًا لتكامل CSS / HTML.بدلاً من ذلك ، قم بتصديره كملف فيديو (على سبيل المثال ، MP4) إذا كنت تخطط لاستخدامه في محتوى قائم على الحركة مثل المقدمات أو البكرات أو رؤوس الويب المتحركة.

نصائح واقتراحات تجميل للنص التدرج

• حدد الألوان التكميلية للتحولات أكثر سلاسة : يبدأ النص التدرج ممتازة مع أزواج الألوان جيدة.اختيار الأشكال التي تنتقل بشكل جيد وتكمل لهجة النص الخاص بك.باستخدام CapCut ، يمكنك اختبار مخاليط ألوان متعددة في الوقت الفعلي.
• استخدم الأقنعة للتحكم الدقيق في التدرج : تصبح مهمة إذا كنت ترغب في أن تتخذ التدرجات الخاصة بك شكلاً أو اتجاهًا معينًا.أنها تحدد كيفية انتقال الألوان من واحد إلى آخر.يتميز CapCut بمجموعة من خيارات القناع سهلة الاستخدام ، مثل الانقسام أو الدائرة أو النجوم.قم بتطبيقها على طبقات النص المنسوخة وتخصيص الريش لإنشاء انتقالات مبهجة من الناحية الجمالية بدقة تامة.
• قم بتضمين ظلال نصية طفيفة للعمق : الظلال أو التوهجات المطبقة على نص التدرج الخاص بك ستجعله يبرز على خلفيات مشغولة ، مما يعطي إحساسًا بالعمق وسهولة القراءة.يمكنك إضافة تأثيرات الظل باستخدام CapCut.هذا يكرر الظل الناعم ويجعل النص سهل القراءة دون إرباك التصميم الخاص بك.
• قم بتحريك نص التدرج الخاص بك للحصول على مظهر معاصر : تعطي الحركة مظهرًا احترافيًا للتصميم.يبدو نص التدرج المتحرك ديناميكيًا ويجذب الانتباه بشكل أفضل من الصور الثابتة.يحتوي CapCut على مجموعة مختارة من قوالب الرسوم المتحركة النصية ، بما في ذلك "Pop Up" و "Fade" و "Zoom". يمكن إقرانها بطبقات التدرج الخاصة بك واستخدامها لإنشاء مقدمة أنيقة وخاتمة أو مقاطع اجتماعية متكررة.
• ضبط وقت النص على الموسيقى أو الفيديو : توفر مزامنة النص المتدرج على الإيقاعات أو الانتقالات في الفيديو تجربة متناغمة وجذابة.يلعب الوقت دورًا مهمًا في جعل تصميمك يبدو مقصودًا.في CapCut ، يمكنك تطبيق علامات الإيقاع وسحب طبقات النص وإفلاتها ببساطة على المخطط الزمني لتتماشى مع الإشارات الصوتية أو مقاطع الفيديو.
• تصدير في القرار الصحيح والشكل : بمجرد الانتهاء من التصميم الخاص بك ، وتصديره بشكل صحيح سيجعلها تبدو حادة على كل منصة.حدد التنسيقات بناءً على ما إذا كانت مادة ثابتة أو متحركة.يمكنك تصديره كملف PNG لأغراض HTML و CSS أو كفيديو عالي الجودة للمواد الرقمية.اختر 2K أو 4K للجودة ، حتى على شاشات العرض الأكبر ، لتحقيق تدرجات حادة.

الاستنتاج

في هذه المقالة ، تعلمت كيفية إنشاء نص متدرج في CSS.ومع ذلك ، فإنه يتطلب معرفة الرموز.لا يتضمن إنشاء نص متدرج البرمجة عندما تكون مجهزًا بمجموعة الأدوات المناسبة ؛ CapCut هو المثال المثالي.إنه يعطي طريقة مرئية بدون رمز لإنشاء نص متدرج مذهل.تتيح لك ميزاته ، مثل الأقنعة والمقاطع المركبة وتأثيرات النص والإعدادات المسبقة للرسوم المتحركة ، تجربة انتقالات الألوان والحركة بحرية.سواء كنت تقوم بعمل تصورات ويب ثابتة أو طباعة ديناميكية لمواقع الشبكات الاجتماعية ، يتيح لك CapCut تصور وتصدير تصميمك تمامًا كما تراه.جرب CapCut الآن وابدأ في إنشاء نص متدرج لجعل مشروعك بارزًا ، دون الحاجة إلى كتابة سطر من التعليمات البرمجية.

الأسئلة الشائعة

1
1. هل يعمل نص التدرج في CSS في جميع المتصفحات ؟

النص المتدرج من خلال مقطع الخلفية CSS: سيعمل النص على معظم متصفحات الويب الحديثة ، مثل Chrome و Edge و Safari ، ولكنه لن يعمل بشكل صحيح على إصدارات Internet Explorer القديمة أو المتصفحات القديمة.يمكنك تبني CapCut لإنشاء PNG ثابت للنص المتدرج لتحقيق توافق أوسع.وهذا سيجعل التصميم الخاص بك تبدو موحدة على كل منصة والجهاز.

2
1. كيفية جعل نص التدرج استجابة ؟

لضمان استجابة نص التدرج المتحرك في CSS ، استخدم وحدات خطوط قابلة للتطوير مثل em أو rem أو vw ، واضبط الأنماط باستخدام استعلامات الوسائط لأحجام شاشات مختلفة.بالنسبة للرسوم المتحركة ، يمكن للإطارات الرئيسية CSS تحريك موضع الخلفية.إليك مثال سريع:

.gradient-text {background: linear-gradient (90deg ، # ff8a00 ، # e52e71 ، # 9b00ff) ؛ حجم الخلفية: 200 ٪ تلقائي ؛ مشبك الخلفية: نص ؛ -webkit-background-clip: نص ؛ اللون: شفاف ؛ الرسوم المتحركة: gradientMove 3s linear infinite ؛} keyframes gradientMove {0 ٪ {background-position: 200 ٪ center ؛} 100 ٪ {background-position: 0 ٪ center ؛}}

3
1. كيفية تصدير نص التدرج من CapCut إلى CSS ؟

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