تولیدکننده CSS Box Shadow

تولیدکننده CSS box-shadow

این ابزار برای ساخت و تنظیم زنده سایه CSS طراحی شده است. می توانید چند لایه سایه اضافه کنید، مقدار جابه جایی افقی و عمودی، blur، spread، رنگ، شفافیت و حالت inset را تغییر دهید و نتیجه را هم زمان روی یک کارت پیش نمایش ببینید. خروجی نهایی به صورت قانون box-shadow در کادر CSS نمایش داده می شود و با یک دکمه قابل کپی است. رنگ پس زمینه پیش نمایش نیز قابل تغییر است تا سایه روی محیط های مختلف بررسی شود.

هر مقدار box-shadow چه معنی دارد؟

مقدار x سایه را به چپ یا راست می برد و مقدار y آن را بالا یا پایین می برد. blur تعیین می کند لبه سایه چقدر نرم شود. spread اندازه کلی سایه را بزرگ تر یا کوچک تر می کند. رنگ و opacity شدت بصری را کنترل می کنند. اگر inset فعال باشد، سایه به داخل عنصر می رود و برای حالت فشرده، input داخلی یا افکت فرورفته مناسب است. چند سایه با کاما از هم جدا می شوند و می توانند عمق طبیعی تری بسازند.

Preset ها چه کاربردی دارند؟

حالت subtle برای کارت های سبک، medium و large برای عمق معمول، dramatic برای تاکید قوی، inset برای سایه داخلی، colored برای سایه رنگی، material برای ترکیب چند سایه شبیه طراحی متریال و neon برای جلوه نورانی آماده شده است. این preset ها نقطه شروع هستند؛ بعد از انتخاب می توانید اعداد را دقیق تر کنید. برای طراحی حرفه ای معمولا سایه های ملایم و یکنواخت بهتر از سایه های خیلی تیره و بزرگ عمل می کنند.

نکات طراحی و عملکرد

سایه باید به فهم سلسله مراتب کمک کند، نه اینکه توجه را بی دلیل بگیرد. برای کارت های تکراری، blur و opacity پایین تر استفاده کنید تا صفحه شلوغ نشود. سایه های بزرگ روی عناصر زیاد می توانند در مرورگرهای ضعیف هزینه رندر داشته باشند، مخصوصا اگر همراه با انیمیشن باشند. در سیستم طراحی بهتر است چند سطح ثابت سایه تعریف کنید و همه اجزا از همان سطح ها استفاده کنند. خروجی این ابزار برای ساخت سریع، تست بصری و مستندسازی مقدارهای CSS مناسب است.

چند لایه سایه چه زمانی مفید است؟

یک سایه تکی برای کارت های ساده کافی است، اما دو لایه می تواند عمق طبیعی تری بسازد: یکی کوتاه و تیره برای تماس نزدیک با سطح، و دیگری نرم تر و بزرگ تر برای پخش نور. با این حال تعداد لایه ها را بی دلیل زیاد نکنید؛ خروجی خواناتر و نگهداری CSS ساده تر می ماند.