ابزار ساخت سایه CSS و Box Shadow چندلایه
Box Shadow را به‌صورت بصری طراحی کنید، چند لایه سایه را ترکیب کنید، CSS موجود را وارد کنید و نتیجه نهایی را روی Preview واقعی تنظیم کنید.
پیش‌نمایش
ظاهر سطح و محیط را جداگانه تنظیم کن تا سایه را در شرایط واقعی ببینی.
لایه‌های سایه
تا ۸ لایه مستقل بساز؛ ترتیب لایه‌ها در خروجی CSS حفظ می‌شود.
Presetهای آماده
یک نقطه شروع انتخاب کن و بعد هر جزئیاتش را تغییر بده.
وارد کردن CSS موجود
مقدار box-shadow یا یک declaration کامل را Paste کن.
راهنمای سریع
- X / Y
- جابجایی افقی و عمودی سایه.
- Blur
- نرمی لبه سایه؛ مقدار بیشتر، سایه پخش‌تر.
- Spread
- بزرگ یا کوچک‌کردن محدوده سایه پیش از Blur.
- Inset
- سایه را به داخل عنصر منتقل می‌کند.
CSS نهایی
خروجی با هر تغییر به‌صورت زنده به‌روزرسانی می‌شود.
ابزار ساخت سایه CSS برای کنترل دقیق عمق و نور
با ترکیب چند سایه می‌توان از یک Shadow ساده تا Elevation نرم و افکت‌های پیچیده‌تر ساخت. این Builder هر لایه را مستقل کنترل می‌کند تا Offset، Blur، Spread، رنگ و Inset دقیقاً مطابق طراحی تنظیم شوند.
اگر از قبل box-shadow دارید، مقدار CSS را وارد کنید و همان استایل را به‌صورت بصری ویرایش کنید؛ سپس خروجی نهایی را مستقیم در کامپوننت یا stylesheet استفاده کنید.
راهنمای استفاده از Box Shadow Builder
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
Box Shadow Builder برای ساخت سایه‌های CSS تک‌لایه و چندلایه است. هر Layer کنترل مستقل Offset، Blur، Spread، Color و Inset دارد و Preview نتیجه ترکیب همه لایه‌ها را همان لحظه نشان می‌دهد.
قبل از شروع این موارد را بدانید
- اول رنگ و شکل سطح Preview را شبیه پروژه واقعی تنظیم کنید.
- برای سایه طبیعی‌تر معمولاً چند Layer ضعیف بهتر از یک Shadow بسیار شدید است.
- اگر Shadow آماده دارید می‌توانید آن را Import و ویرایش کنید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. سطح Preview را تنظیم کنیدرنگ، اندازه و گوشه‌های کارت نمونه را انتخاب کنید.
- ۲. لایه سایه بسازیدبرای هر لایه Offset، Blur، Spread، Color و Inset را تنظیم کنید.
- ۳. لایه‌های بیشتری اضافه کنیدبرای سایه‌های طبیعی‌تر چند لایه با شدت‌های متفاوت بسازید.
- ۴. CSS را کپی کنیدخروجی کامل یا فقط مقدار box-shadow را بردارید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- X/Y Offset
- فاصله افقی و عمودی سایه.
- Blur
- میزان پخش‌شدن لبه سایه.
- Spread
- اندازه کلی محدوده سایه را زیاد یا کم می‌کند.
- Inset
- سایه را به داخل عنصر منتقل می‌کند.
- Import CSS
- یک box-shadow موجود را برای ویرایش وارد می‌کند.
خروجی ابزار را چطور تفسیر کنید؟
در CSS نهایی، هر Layer با ویرگول از Layer بعدی جدا می‌شود. ترتیب و شدت Layerها را همراه Background واقعی ارزیابی کنید، نه فقط روی یک سطح سفید.
سوالات رایج
Blur و Spread چه تفاوتی دارند؟
Blur میزان نرمی لبه سایه را تغییر می‌دهد؛ Spread قبل از Blur اندازه ناحیه سایه را بزرگ یا کوچک می‌کند.
چطور چند سایه در CSS بنویسیم؟
چند مقدار box-shadow با ویرگول از هم جدا می‌شوند و مرورگر آن‌ها را به‌صورت لایه‌ای رندر می‌کند.
Inset چه کاری انجام می‌دهد؟
Inset سایه را به داخل Box می‌برد و برای فرورفتگی یا کنترل عمق داخلی استفاده می‌شود.