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

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

تأثير البثق ثلاثي الأبعاد هو الذي يستحق الفهم: لعمق محدد (عدد الطبقات المكدسة) وزاوية، يتم إزاحة الطبقة i بمقدار i × جيب تمام الزاوية أفقيًا و i × جيب الزاوية رأسيًا، محسوبة في JavaScript باستخدام دوال مثلثية حقيقية — ليست مقروءة من جدول بحث لزوايا محددة مسبقًا. عند زاوية 45 درجة تصبح الإزاحات الأفقية والرأسية متساوية لكل طبقة، لأن جيب التمام وجيب الزاوية 45° لهما نفس القيمة؛ قم بتدوير منزلق الزاوية وشاهد مجموعة طبقات `text-shadow` بأكملها تتأرجح حول الأحرف في الوقت الفعلي، كل واحدة منها تصبح أغمق قليلاً عن سابقتها لمحاكاة وجه ثلاثي الأبعاد مضاء.

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

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