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

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

אפקט השיחול התלת-ממדי הוא זה שכדאי להבין: עבור עומק נבחר (מספר השכבות המוערמות) וזווית, שכבה i מוזזת ב-‎i × cos(זווית) אופקית וב-‎i × sin(זווית) אנכית, מחושב ב-JavaScript עם הפונקציות הטריגונומטריות האמיתיות – לא נקרא מטבלת חיפוש של זוויות מוגדרות מראש. ב-45 מעלות ההזזות האופקיות והאנכיות יוצאות שוות לכל שכבה, כי קוסינוס וסינוס של 45° הם אותו ערך; סובבו את מחוון הזווית וצפו בכל מחסנית שכבות ה-`text-shadow` מסתובבת סביב האותיות בזמן אמת, כל אחת מוחשכת מעט יותר מהקודמת כדי לדמות פאה תלת-ממדית מוארת.

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

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