نکات کلیدی
- 01هر پارامتر box-shadow دارای لغزشگر خود و علاوه بر آن ورودی عددی برای تنظیم دقیق پیکسل است.
- 02toggle inset بین سایه قطره و سایه داخلی برای اثرات فشرده یا neumorphic تغییر میدهد.
- 03رنگ و تاریکی به طور جداگانه کنترل میشود، rgba() خروجی برای CSS خوانا.
- 04پیشنمایش از ویژگی CSS واقعی بر روی عنصر واقعی استفاده میکند — آنچه میبینید دقیقاً آنچه شیوه نامة شما تولید میکند.
چرا مولد Box-Shadow بصری استفاده کنید
CSS box-shadow تا شش مقدار برای — جبران افقی، جبران عمودی، شعاع مسدود، شعاع پخش، رنگ، و کلمة inset اختیاری. تایپ از حافظه برای سایههای ساده کار میکند، اما برای هر چیز دقیقتر — یک درخشش تنگ، سایة قطره عمیق، لایة تسهیل نرم — شما حدس میزنید و دوباره بارگیری میکنید تا چیزی به نظر درست برسد.
مولد بصری آن حلقة تکرار را فشرده میکند. لغزشگر را حرکت دهید، تغییر را فوری ببینید، و فقط زمانی کپی کنید که راضی هستید. مولد box-shadow از Handytool کاملاً در مرورگر شما اجرا میشود، بنابراین پیشنمایش ویژگی CSS واقعی است برای عنصر واقعی — بدون تفاوتهای رندر بین ابزار و صفحة واقعی شما.
نحوه طراحی Box Shadow
- 01
جبرانهای افقی و عمودی را تنظیم کنید
مقادیر مثبت سایه را به راست و پایین حرکت دهد. مقادیر منفی آن را به چپ و بالا حرکت دهد. سایة مرکز (0, 0) اثر درخشش ایجاد میکند.
- 02
شعاع مسدود را تنظیم کنید
مقادیر مسدود بالاتر سایههای نرمتر و پخششدهتر ایجاد میکند. مسدود صفر سایة سخت و جسمی ایجاد میکند.
- 03
شعاع پخش را تنظیم کنید
پخش مثبت سایه قبل از مسدود بزرگ میکند. پخش منفی آن را کوچک میکند، برای سایههای تنگ زیر عنصر مفید.
- 04
رنگ و تاریکی را انتخاب کنید
رنگ انتخاب کننده رنگ را برای انتخاب رنگ سایه استفاده کنید، سپس تاریکی را برای ظریفی پایین کنید. خروجی rgba() را برای نگاه داشتن مقادیر خوانا استفاده میکند.
- 05
در صورت لزوم inset را تغییر دهید
Inset از سایة قطره به سایة داخلی تغییر میدهد — برای دکمههای فشردهشده، ورودیهای نشسته، و سطوح neumorphic مفید.
- 06
اعلام CSS را کپی کنید
برای گرفتن مقدار box-shadow کامل کلیک کنید Copy و آن را در شیوه نامة خود بچسبانید.
بدون آپلود، بدون حساب کاربری
مولد کاملاً بر روی کلاینت است. انتخابهای رنگ، مقادیر عددی، و حالتهای پیشنمایش در مرورگر شما باقی میمانند — هیچ چیزی به سرویدهنده ارسال نمیشود. بدون حساب کاربری برای ایجاد و بدون محدودیت استفاده.
زیرا عنصر پیشنمایش ویژگی box-shadow CSS واقعی استفاده میکند، خروجی دقیق است از تعریف — هیچ رندر بوم یا تقریب لقطة وجود ندارد. مقادیر پیکسل شما کپی میکنید مقادیر پیکسلیای هستند که مرورگر اعمال میکند.
پرسشهای متداول مولد Box-Shadow
مقدار پخش چهکار میکند؟
پخش مثبت سایه را در تمام جهات قبل از اعمال مسدود بزرگ میکند؛ پخش منفی آن را کوچک میکند. برای درخششهای تنگ و تعریفشده هنگام جفتشدگی با مسدود پایین مفید.
آیا میتوانم چند box shadow اضافه کنم؟
این مولد یک سایة را در یک بار خروجی میکند. برای لایه کردن آنها، مقدار را کپی کنید و چند سایهای را با کاما در CSS جدا کنید — box-shadow فهرست جداشده با کاما میپذیرد.
چرا سایة inset من نامرئی است؟
سایههای Inset داخل عنصر کشیده میشوند، بنابراین نیاز دارند رنگ پسزمینه یا padding مرئی. برای عنصر شفاف یا اندازة صفر ظاهر نمیشود.
آیا پیشنمایش دقیق پیکسل است؟
بله — پیشنمایش از ویژگی CSS box-shadow واقعی بر روی عنصر DOM واقعی استفاده میکند، بنابراین آنچه میبینید دقیقاً آنچه شیوه نامة شما تولید میکند.
سایة neumorphic چیست؟
Neumorphism دو سایه استفاده میکند — یکی سبک و یکی تیره — جبرانشده در جهات مخالف تا عنصر را بالا یا فشردهشده نشان دهد. هر دو سایههای معمولاً برای نسخة فشرده inset میباشند.