مولد سایهٔ جعبه‌ای CSS

این ابزار چه کاری انجام می‌دهد

این مولد box-shadow به شما امکان می‌دهد سایه‌ها را همان‌طور بسازید که رابط‌های واقعی از آن‌ها استفاده می‌کنند: به‌صورت لایه‌لایه. یک سایهٔ افتادهٔ متقاعدکننده به‌ندرت فقط یک box-shadow مقدار — سیستم ارتفاع Material Design و بسیاری از کیت‌های رابط کاربری حرفه‌ای، برای شبیه‌سازی افت واقعی نور، دو یا سه سایه را با محوشدگی و شفافیت متفاوت روی هم قرار می‌دهند. این ابزار به شما امکان می‌دهد هر تعداد لایهٔ سایه که می‌خواهید اضافه، تنظیم و روی هم قرار دهید؛ پیش‌نمایش را به‌صورت زنده روی رنگ پس‌زمینه‌ای که خودتان تعیین می‌کنید ببینید؛ و در پایان CSS تمیز یا یک کلاس Tailwind با مقدار دلخواه دریافت کنید.

نحوه استفاده

• با استفاده از لغزنده‌ها، جابه‌جایی X/Y، محوشدگی، گستردگی، رنگ و شفافیت یک لایه را تنظیم کنید.
• بررسی داخلی تا یک لایه را به‌جای سایهٔ افتان به سایهٔ داخلی تبدیل کنید.
• کلیک کنید افزودن لایه سایه تا سایهٔ دیگری را روی آن قرار دهید — عمق نرم و واقع‌گرایانه به این شکل ساخته می‌شود.
• رنگ پس‌زمینهٔ پیش‌نمایش را تغییر دهید تا ببینید سایه در برابر سطوح روشن یا تیره چگونه دیده می‌شود.
• یک پیش‌تنظیم را امتحان کنید — سطوح برجستگی به سبک متریال، سایهٔ سخت و تختِ «استیکری»، سایهٔ بلند یا سایه‌های نرم نئومورفیکِ فرورفته/برجسته — و سپس آن را تنظیم کنید.
• مورد تولیدشده را کپی کنید box-shadow CSS یا کلاس مقدار دلخواه Tailwind را تنها با یک کلیک ایجاد کنید.

کاربردهای واقعی

• دادن یک سایهٔ افتادهٔ نرم و لایه‌لایه به کارت یا پنجرهٔ مودال، به‌جای یک سایهٔ تخت و تکی.
• بازسازی سطوح برجستگی متریال دیزاین (۱ تا ۵) بدون نیاز به حفظ کردن مقادیر دقیق سایهٔ آن‌ها.
• ساخت یک دکمه یا پنل نئومورفیک (رابط کاربری نرم) با سایه‌های فرورفتهٔ روشن و تیرهٔ هماهنگ.
• ایجاد یک سایهٔ «درخشش» رنگی در اطراف یک ورودیِ دارای تمرکز یا دکمهٔ برجسته.

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

چطور چند سایه را روی یک عنصر قرار دهم؟

CSS به‌صورت بومی از لایه‌های سایهٔ جداشده با ویرگول پشتیبانی می‌کند — روی «افزودن لایهٔ سایه» کلیک کنید تا هرکدام در یک مقدار واحد و جداشده با ویرگول ترکیب شوند box-shadow مقدار به‌صورت خودکار.

مقدار پخش دقیقاً چه کاری انجام می‌دهد؟

گستردگی، شکل سایه را پیش از اعمال محوشدگی بزرگ‌تر یا کوچک‌تر می‌کند. گستردگی مثبت سایه را از عنصر بزرگ‌تر می‌کند؛ گستردگی منفی (که برای سایه‌های نرم رایج است) آن را کوچک‌تر و فشرده‌تر می‌کند تا محوشدگی بیش از حد از لبه‌ها بیرون نزند.

سایه داخلی چه کاربردی دارد؟

گزینهٔ Inset سایه را به داخل عنصر منتقل می‌کند تا به‌جای بیرون، داخل حاشیهٔ آن نمایش داده شود — مناسب برای حالت دکمهٔ فشرده، فیلدهای ورودی و جلوه‌های نئومورفیک «تراشیده‌شده به داخل».

چرا سایه‌های نئومورفیک به دو لایه نیاز دارند؟

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

آیا خروجی با Tailwind سازگار است؟

بله — فیلد Tailwind یک کلاس مقدار دلخواه آماده مانند shadow-[0px_4px_12px_...] می‌توانید مستقیماً در نشانه‌گذاری خود جای‌گذاری کنید.