مولد نص مائل بالكود
مرشد
مولد نص مائل بالكود
صمم تأثيرات نص مُلهمة باستخدام تدرجات متعددة الألوان ونسخة جاهزة للإنتاج من CSS بضغطة واحدة. اختر ألوانك، اختر تدرجًا خطيًا أو دائريًا، وشاهد التحديث الفوري للعرض، ثم انسخ الكود إلى ملفك الخاص.
كيفية استخدام
- أدخل النص المطلوب لعرضه.
- اختر حجم الخط ونوعه لتناسب تصميمك.
- اختر نوع التدرج — خطي (بزاوية أو اتجاه محدد) أو دائري (بشكل ومكان).
- اختر اثنين أو أكثر من نقاط اللون وقم بتعديل مواقعها.
- انسخ الكلاس والكود HTML المُنشأ.
خصائص
- العرض المباشر – رؤية التأثير على النص الحقيقي أثناء تعديل الألوان، الزوايا، ونقطة التوقف.
- التدرجات الخطية والشعاعية – اختر بزاوية، اتجاه محدد، أو شكل دائري ومكانه.
- حتى أربع نقاط لون – أضف ألوانًا وسيطة باستخدام مساعٍ مخصصة.
- متوافق مع متصفحات متعددة – يحتوي الناتج على كلا النوعين
background-clipو-webkit-background-clipلتوافق واسع. - مُحَوِّل الخلفية – انتقل بين عرض الخلفية المربعية، الخفيفة، والداكنة لاختبار التباين.
- النسخ أو التنزيل – احصل على الكود ونقطة HTML جاهزة للإسقاط.
متى تستخدم تدرج النص؟
يُستخدم تدرج النص بشكل ممتاز في عناوين البداية، صفحات التسويق، علامات العلامة التجارية، وملخصات الميزات حيث يشعر اللون الموحد بالجفاف. استخدمه بحذر — الأوزان الكبيرة والعناوين القصيرة تُظهر أفضل، بينما يجب أن يبقى النص الأساسي بسلاسة لسهولة القراءة.
التعليمات
-
كيف يعمل تدرج النص على الخلفية؟
يقوم المتصفح برسم صورة الخلفية داخل شكل الحروف المُعرض بدلًا من مساحة العنصر الكامل. مع لون نص شفاف، يصبح التدرج أو الصورة مرئيًا فقط من خلال حدود النص، بينما تبقى باقي مساحة العنصر فارغة.
-
لماذا لا يزال خاصية -webkit-text-fill-color مطلوبة؟
أثناء استخدام محركات ويب القديمة والـSafari، كانت تطلب -webkit-text-fill-color: شفاف لجعل الحروف تظهر من خلالها، بحيث يظهر الخلفية المقطوعة. كما تقبل المتصفحات الحديثة لونًا شفافًا بحسب المعيار، لذا تضمين كلا الخيارين يضمن التوافق بين الأنواع والمنصات.
-
ما الفرق بين التدرج الخطي والدائري؟
يتحول التدرج الخطي بين الألوان على خط مستقيم معرف بزاوية أو اتجاه. أما التدرج الدائري فينتقل من نقطة واحدة بأشكال متماسكة أو مربعة، مما يُنتج تأثير ضوء مركزي أو كروي.
-
هل تأثيرات التدرج متوافقة مع معايير التفاعل؟
يمكن أن يقلل تأثير التدرج من التباين المُحسوس مع الخلفية. اختر نقاط اللون بدرجة تباين كافية مع السطح المحيط، تجنب استخدام تدرجات للنص الأساسي، ووفر لونًا بديلًا منطقيًا في حال عدم دعم خاصية background-clip.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
