מחולל אפקטי טקסט CSS

רוב גלריות אפקטי הטקסט של CSS מעניקות לך הגדרה קבועה מראש: זוהר ניאון אחד, שחול תלת מימדי אחד, קח אותו או עזוב אותו. המחולל הזה בונה את ה-CSS מהפרמטרים שלך במקום זאת, על הטקסט שאתה מקליד בפועל. בחר ניאון זוהר, 3D-extrude, letterpress/הבלטה, קווי מתאר או מילוי שיפוע מתוך בחירת האפקט, התאם את הפקדים של האפקט עצמו, והתצוגה המקדימה החיה בתוספת בלוק CSS הניתן להעתקה מתחתיו מתעדכנת בכל שינוי.

אפקט ה-3D-extrude הוא זה שכדאי להבין: עבור עומק נבחרים (מספר שכבות מוערמות) וזווית, שכבה i מאופקת ב-i × cos(זווית) אופקית ו-i × sin(זווית) אנכית, מחושבת ב-JavaScript עם הפונקציות הטריגונומטריות האמיתיות - לא נקראת מטבלת חיפוש של זוויות מוגדרות מראש. ב-45 מעלות ההיסטים האופקיים והאנכיים יוצאים שווים עבור כל שכבה, כי קוסינוס וסינוס של 45° הם אותו ערך; סובב את מחוון הזווית וצפה בכל הערימה של שכבות 'צל-טקסט' מתנדנדות סביב האותיות בזמן אמת, כל אחת מהן התכהה קצת יותר מהקודמת כדי לזייף פנים תלת-ממדיות מוארות.

זוהר ניאון עורם ארבע שכבות 'טקסט-צל' של רדיוס טשטוש הולך וגובר בצבע שבחרת, עם הבהוב אופציונלי: הפעל אותו וכלל '@keyframes' עם רצף אקראי של אטימות אטימות נוצר ומונפש בשידור חי, וכפתור ערבוב מאפשר לך לגלגל מחדש את התבנית מבלי לכתוב פריים מפתח אחד ביד. טקסט מתאר חל על '-webkit-text-stroke' עבור דפדפנים שתומכים בו, בתוספת 'טקסט-shadow' כנה עם 8 כיוונים עבור אלה שלא - שתי השורות נשלחות ב-CSS המועתק עם הערה מדוע. Gradient-fill מצמיד `-gradient-gradient` לצורת הטקסט באמצעות `background-clip: text`, כעת מאפיין סטנדרטי עם תמיכה רחבה, תוך שמירה על השורה הישנה יותר `-webkit-` עבור מנועים מדור קודם.

הכל מוצג באופן מקומי בדפדפן שלך - אף טקסט שאתה מקליד לא נשלח לשום מקום. העתק את גוש ה-CSS המוגמר, כולל כלל `@keyframes` כאשר האפקט צריך אחד, ישר לגיליון הסגנונות שלך.