مولد سایه متن CSS

سایه‌های متن CSS را به‌صورت بصری طراحی کنید، نه با حدس‌زدن مقادیر پیکسل

ویژگی text-shadow یک جابه‌جایی، شعاع محوشدگی و رنگ دریافت می‌کند — برای یک لایه به‌اندازه کافی ساده است، اما افکت‌های واقعی مانند درخشش نئونی، برجسته‌کاری یا ظاهر تمیز سه‌بعدی به چند سایه نیاز دارند که روی هم قرار بگیرند؛ تنظیم دستی آن‌ها در شیوه‌نامه خسته‌کننده است. این ابزار به شما امکان می‌دهد سایه‌ها را در برابر یک پیش‌نمایش زنده و به‌صورت بصری بسازید و لایه‌بندی کنید؛ همچنین برای افکت‌هایی که کاربران واقعاً جست‌وجو می‌کنند، پیش‌تنظیم‌های یک‌کلیکی دارد.

نحوه استفاده از آن

• متن پیش‌نمایش دلخواهتان را وارد کنید و اندازهٔ قلم، رنگ متن و پس‌زمینه را تغییر دهید تا پیش‌نمایش به چیزی نزدیک به طرح واقعی‌تان شبیه باشد.
• هر تعداد لایهٔ سایه که نیاز دارید اضافه کنید — هرکدام جابه‌جایی X/Y، محوشدگی، رنگ و شفافیت مخصوص خود را دارند.
• برای شروع، یکی از پیش‌تنظیم‌ها (درخشش نئونی، سه‌بعدی، برجسته، دورخط، سایهٔ بلند) را امتحان کنید و سپس لایه‌ها را جداگانه تنظیم کنید.
• تولیدشده را کپی کنید text-shadow CSS را مستقیماً در شیوه‌نامهٔ خود قرار دهید.

موارد استفاده در دنیای واقعی

برجسته‌کردن تیتر اصلی روی پس‌زمینه عکس، ساخت افکت تابلوی نئونی رترو برای صفحه فرود، ایجاد ظاهری ظریف و برجسته برای نوشتار لوگو یا طراحی سایه‌افکن سخت برای رابط کاربری بازی یا پوستر.

سؤالات متداول

text-shadow چه تفاوتی با box-shadow دارد؟

box-shadow به کل کادر عنصر (لبه‌های مستطیلی آن) سایه می‌دهد؛ text-shadow از شکل واقعی حروف پیروی می‌کند؛ چیزی که برای ایجاد جلوه‌های درخشش یا دورخط در تایپوگرافی به آن نیاز دارید.

آیا می‌توانم چند سایه را روی یک عنصر اعمال کنم؟

بله — text-shadow فهرستی از تعریف‌های سایه جداشده با ویرگول را می‌پذیرد؛ دقیقاً همان چیزی که «لایه‌های» این ابزار می‌سازند. افکت‌های نئونی و سه‌بعدی به چند سایه لایه‌ای با شعاع‌های محوشدگی متفاوت متکی هستند.

چرا سایه‌ام پیکسلی یا بلوکی به نظر می‌رسد؟

مقدار محوشدگی ۰ همراه با یک جابه‌جایی رنگی، به‌جای سایه‌ای نرم، یک نسخهٔ کپی با لبه‌های تیز از متن ایجاد می‌کند — در واقع پیش‌تنظیم‌های دورخط و سه‌بعدی این ابزار همین‌طور کار می‌کنند. برای ظاهری نرم‌تر، محوشدگی را افزایش دهید.

آیا این ابزار در همهٔ مرورگرها کار می‌کند؟

text-shadow سال‌هاست در همهٔ مرورگرهای مدرن پشتیبانی می‌شود؛ بنابراین استفاده از CSS تولیدشده در اینجا بدون پیشوندهای فروشنده ایمن است.

چطور به‌جای سایهٔ افتاده، جلوهٔ درخشش ایجاد کنم؟

مقدار جابه‌جایی X و Y را روی ۰ تنظیم کنید و فقط به محوشدگی و رنگ تکیه کنید — پیش‌تنظیم درخشش نئونی همین کار را انجام می‌دهد و چند سایه با جابه‌جایی صفر و شعاع‌های محوشدگی افزایشی را روی هم قرار می‌دهد.