این ابزار درست کار نمیکند؟
دربارهٔ ابزار «ساخت سایه (box-shadow) در CSS آنلاین»
این ابزار مقادیر CSS box-shadow را به صورت بصری با اسلایدرها برای آفست، تار، گستره، رنگ و شفافیت میسازد. شما سایه را در زمان واقعی بهروزرسانی میبینید و پس از رضایت، CSS متناظر را کپی میکنید.
سایههای جعبه عمق اضافه میکنند، عناصر را از پسزمینه جدا میکنند و تعاملی بودن را نشان میدهند (حالتهای hover، حالتهای فشرده شده، عناصر تمرکز). سایههای چندلایه میتوانند تنظیمات نورپردازی پیچیده مانند Material Design elevation یا جلوههای neumorphic را شبیهسازی کنند.
از آن برای کارتها، مودالها، popoverها، دکمهها و هر عنصر UI که نیاز به ارتفاع بصری دارد استفاده کنید. ژنراتور میتواند box-shadow کلاسیک، چندین لایه سایه و ترکیبهای آفست/تار مدرن را خروجی دهد.
چطور از این ابزار استفاده کنم؟
چطور دستور box-shadow CSS بسازم؟
Offsetها
«X offset (px)» و «Y offset (px)» سایه را افقی (مثبت = راست) و عمودی (مثبت = پایین) جابهجا میکنند. پیشفرض CSS عدم offset است؛ سایههای card رایج Y کوچک مثل `4` و X نزدیک به 0 استفاده میکنند.
Blur و رنگ
«Blur (px)» نرمی را کنترل میکند — 0 hard-edged، 10+ مهآلود. «Color» هر رنگ CSS شامل rgba/hex با alpha را میپذیرد. برای سایههای UI ظریف از `rgba(0,0,0,0.15)` و blur متوسط استفاده کنید.
«اجرا» را بزنید
خروجی یک فیلد `css` است — `<x>px <y>px <blur>px <color>`. بهعنوان مقدار `box-shadow:` بچسبانید. پارامتر spread یا inset emit نمیشود؛ syntax اجازه میدهد ولی این ابزار به فرم ۴-آرگومان میچسبد.
سایههای stacked متعدد
طرحهای واقعی اغلب ۲-۳ سایه را با کاما جدا میکنند (یکی طولانی نرم + یکی کوتاه فشرده) برای عمق. این ابزار را برای تولید هر کدام استفاده کنید، سپس بهصورت دستی با کاما داخل یک مقدار `box-shadow:` concat کنید.