ساخت سایه باکس و جعبه css

یک سایه واقع‌گرایانه تقریباً هیچ‌وقت فقط یک box-shadow نیست. سیستم ارتفاع متریال دیزاین و بیشتر کیت‌های رابط کاربری حرفه‌ای، دو یا سه سایه با بلور و شفافیت متفاوت را روی هم می‌گذارند تا افت نور طبیعی شبیه‌سازی شود. این ابزار رایگان اجازه می‌دهد سایه را همان‌طور که رابط‌های واقعی می‌سازند بسازی: لایه‌لایه، با پیش‌نمایش زنده و خروجی آماده CSS یا Tailwind.

چطور کار می‌کند؟

1. با اسلایدرها مقادیر یک لایه را تنظیم کن: جابه‌جایی افقی (X)، جابه‌جایی عمودی (Y)، میزان بلور، گستردگی، رنگ و شفافیت.
2. اگر می‌خواهی سایه به جای بیرون، داخل عنصر بیفتد، گزینه inset را فعال کن.
3. روی «افزودن لایه سایه» بزن تا لایه دیگری روی آن بگذاری — عمق نرم و واقعی دقیقاً همین‌طور ساخته می‌شود.
4. رنگ پس‌زمینه پیش‌نمایش را عوض کن تا ببینی سایه روی سطح روشن و تیره چطور دیده می‌شود.
5. یکی از پیش‌تنظیم‌ها را به‌عنوان نقطه شروع بردار، بعد تنظیمش کن.
6. کد box-shadow یا کلاس Tailwind را با یک کلیک کپی کن.

هر مقدار چه کار می‌کند؟

• جابه‌جایی X و Y: تعیین می‌کنند سایه چقدر به راست/چپ و پایین/بالا جابه‌جا شود. برای حس نور از بالا، معمولاً X را صفر و Y را مثبت می‌گذارند.
• بلور: هرچه بیشتر باشد، لبه سایه نرم‌تر و پخش‌تر می‌شود.
• گستردگی: قبل از اعمال بلور، خود شکل سایه را بزرگ یا کوچک می‌کند. مقدار منفی — که در سایه‌های نرم خیلی رایج است — سایه را جمع‌تر می‌کند تا بلور از لبه‌ها بیرون نزند.
• inset: سایه را به داخل عنصر می‌برد. مناسب حالت دکمه فشرده‌شده، فیلدهای ورودی و افکت‌های فرورفته.

چرا چند لایه سایه؟

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

نئومورفیسم چطور ساخته می‌شود؟

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

کجا به کار می‌آید؟

• کارت و مودال: دادن عمق نرم و لایه‌ای به‌جای یک سایه تخت.
• بازسازی سطوح متریال: رسیدن به ارتفاع‌های ۱ تا ۵ بدون حفظ کردن مقادیر دقیق.
• افکت درخشش: ساخت هاله رنگی دور فیلد فوکوس‌شده یا دکمه اصلی.
• سایه سخت و تخت: برای سبک‌های استیکری و نئوبروتالیست.

خروجی Tailwind چطور است؟

فیلد Tailwind یک کلاس با مقدار دلخواه به تو می‌دهد، چیزی شبیه shadow-[0px_4px_12px_rgba(0,0,0,0.15)]، که مستقیم داخل کلاس عنصر قابل استفاده است. اگر سایه چند لایه دارد، همه لایه‌ها داخل همان یک کلاس قرار می‌گیرند.