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

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

تأثير البثق ثلاثي الأبعاد هو التأثير الذي يستحق الفهم: بالنسبة للعمق المختار (عدد الطبقات المكدسة) والزاوية، تتم إزاحة الطبقة i بواسطة i × cos(angle) أفقيًا وi × sin(angle) عموديًا، محسوبة في JavaScript باستخدام الدوال المثلثية الحقيقية - ولا تتم قراءتها من جدول بحث للزوايا المحددة مسبقًا. عند 45 درجة، تكون الإزاحات الأفقية والرأسية متساوية لكل طبقة، لأن جيب التمام وجيب الزاوية 45 درجة لهما نفس القيمة؛ قم بتدوير شريط تمرير الزاوية وشاهد المجموعة الكاملة من طبقات "ظل النص" تتأرجح حول الحروف في الوقت الفعلي، كل واحدة منها داكنة أكثر قليلاً من الأخيرة لتزييف وجه ثلاثي الأبعاد مضاء.

يجمع توهج النيون أربع طبقات من "ظل النص" لزيادة نصف قطر التمويه في اللون الذي اخترته، مع وميض اختياري: قم بتشغيله وسيتم إنشاء قاعدة "@keyframes" مع تسلسل عشوائي لانخفاضات العتامة وتحريكها مباشرة، ويتيح لك زر التبديل العشوائي إعادة تدوير النمط دون كتابة إطار رئيسي واحد يدويًا. يطبق النص المحدد "-webkit-text-stroke" على المتصفحات التي تدعمه، بالإضافة إلى خيار احتياطي "text-shadow" ذي 8 اتجاهات للمتصفحات التي لا تدعمه - يتم شحن كلا السطرين في CSS المنسوخ مع ملاحظة حول السبب. يقوم التعبئة المتدرجة بقص `التدرج الخطي` إلى شكل النص باستخدام `مقطع الخلفية: النص`، وهو الآن خاصية قياسية تتمتع بدعم واسع النطاق، مع الاحتفاظ بالخط البادئ `-webkit-` الأقدم للمحركات القديمة.

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