מהו מחולל צל הטקסט של CSS?
מחולל הצללים של טקסט CSS הוא עורך חזותי עבור המאפיין CSS Text-Shadow. אתה מכוון את ההיסט האופקי, ההיסט האנכי, רדיוס הטשטוש, הצבע והאטימות עם המחוונים וצופה באפקט העיבוד בשידור חי על טקסט לדוגמה, ואז מעתיק את ה-CSS המדויק. במקום לנחש ערכי פיקסלים ולרענן את הדף שלך, אתה מעצב את הצל ישירות וקורא את הקוד שהוא מייצר.
בין אם אתה מחפש מחולל צל טקסט CSS, כלי CSS מחולל צללים טקסט או מחולל טקסט צל CSS, הפלט הוא אותה הצהרה יחידה לחץ על הקביעה המוגדרת מראש הקשה ותיבת ה-CSS שנוצרה מציגה צל טקסט: 2px 2px 0px #00000099; שהיא שכבה שחורה אחת ב-60% אטימות, כשהאטימות כתובה בשתי ספרות המשושה האחרונות לחץ על Neon Glow ותקבל שלוש שכבות מופרדות בפסיקים בטשטוש של 7px, 14px ו-28px. העתק CSS מעתיק את כל השורה, כולל נקודה-פסיק.
תכונת הצל הטקסט פשוטה יותר מ-box-shadow - אין לה רדיוס התפשטות ואין לה מילת מפתח משובצת - אבל השכבות הן המקום שבו היא נעשית עוצמתית. הצהרה בודדת יכולה לערום מספר צללים, כל אחד עם קיזוזים, טשטוש וצבע משלו. ערימת שכבות היא הדרך שבה אתה בונה זוהרי ניאון, קווי מתאר קשים, אותיות רטרו 3D, אפקטי הבלטות של אותיות וצללים שטוחים ארוכים. כתיבת אלה ביד היא בצורה מטופשת, כך שהכלי הזה מנהל את השכבות ומוציא הצהרה חוקית מפרט ומופרדת בפסיקים בסדר הצבע הנכון.
הכל קורה בדפדפן שלך. בחר הגדרה מראש כמו Neon Glow או Outline, כוונן כל שכבה, החלף את התצוגה המקדימה בין רקע בהיר לכהה, ערוך את הטקסט לדוגמה והעתק את ה-CSS. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
סדר השכבות פועל ראשון עד אחרון, מלפנים לאחור, כך שהצל הרשום ראשון יושב למעלה. זה מה שגורם לקווי המתאר לעבוד: ארבעה צללים קטנים מקזזים פיקסל אחד לכל כיוון, מוערמים, משוערים למהלך של-CSS אין תכונה ישירה עבורו. רדיוס טשטוש הוא החלק היקר לעיבוד, וטקסט עם מספר טשטוש גדול שנצבע מחדש בגלילה הוא גורם שכיח לטלטלה במכשירים בעלי הספק נמוך יותר. צללים לעולם אינם משפיעים על הפריסה, כך שהם יכולים להציף את הקופסה שלהם ולהיחתך על ידי הורה עם הצפה מוסתרת.
כיצד להשתמש במחולל צל הטקסט של CSS?
התחל מתוך הגדרה מראש
הדף נפתח על ההגדרה המוגדרת מראש של Neon Glow. בחר הגדרה מוגדרת מראש אחרת כמו Soft, Retro 3D או Outline לנקודת התחלה מציאותית, או מחק שכבות עד אחת והצטבר משם.
כוונן את הצל עם מחוונים
גרור את המחוונים האופקיים והאנכיים של ההיסט והטשטוש ברדיוס, ולאחר מכן הגדר את צבע הצל והאטימות. צפה בעדכון הטקסט לדוגמה באופן מיידי בזמן העריכה.
ערמו עוד שכבות לאפקטים
הוסף שכבות נוספות כדי ליצור זוהר, מתאר או עומק 3D - מספר עותקים אופסט של צל נקרא כטקסט שחול, בעוד עותקים מטושטשים מוערמים נקראים כזוהר.
העתק את ה-CSS
העתק את הצהרת הטקסט-צל והדבק אותה ישר בגיליון הסגנונות או ברכיבי הרכיבים שלך. החל אותו על כל רכיב טקסט כדי לקבל את אותו אפקט.
תכונות מפתח
צללים רב-שכבתיים
ערמו כל מספר של שכבות צל להצהרה אחת, בסדר הצבע הנכון מלמעלה למטה, וכך בנויים ניאון זוהר, קווי מתאר וטקסט תלת מימדי
בקרת רכוש מלאה
מחוונים להיסט אופקי ואנכי ורדיוס טשטוש, בתוספת בורר צבעים ובקרת אטימות, מכסים כל חלק בדקדוק הטקסט-צל
תצוגה מקדימה חיה
טקסט לדוגמה מתעדכן באופן מיידי תוך כדי עריכה, ותוכל להחליף את הרקע שלו בין אור לחושך כדי לבדוק כיצד האפקט קורא בשני הנושאים
הגדרות קבועות מראש מוכנות
מתכונים אוצרים לאפקטים רכים, קשים, זוהר ניאון, רטרו תלת מימד, מתאר, הבלטה, אש וצל ארוך נותנים לך נקודת התחלה מוכחת במקום קנבס ריק
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
Maps Scraper
Pull business listings for any search and place: name, address, category, rating, review count, phone and website, deduplicated and exportable as CSV.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!