مولد CSS Box Shadow
سایههای CSS box-shadow لایهای را با اسلایدرهای زنده برای offset، blur، spread، رنگ، opacity و inset بسازید — پیشنمایش روی یک المان واقعی و کپی فوری CSS آماده برای چسباندن.
box-shadow: —;
همه چیز به صورت زنده در مرورگر شما بهروز میشود — بدون آپلود، بدون ثبتنام، کاملاً رایگان.
درباره مولد CSS Box Shadow
مولد سایه جعبه CSS به شما امکان میدهد بهجای حدسزدن مقادیر در کد، سایههای جعبه را بهصورت بصری طراحی کنید. اسلایدرهای انحراف افقی و عمودی، شعاع تاری، شعاع گسترش، رنگ و شفافیت را بکشید، همراه با یک سوییچ برای حالت داخلی، و ببینید یک عنصر واقعی بهصورت زنده بهروز میشود. وقتی درست به نظر رسید، CSS آماده چسباندن را با یک کلیک کپی کنید.
سایههای رابط کاربری مدرن بهندرت یک لایهاند. این مولد از لایههای سایه چیدهشده پشتیبانی میکند: لایهها را اضافه، تکثیر، پنهان یا حذف کنید، و پیشنمایش لایه انتخابشده بهتنهایی یا همه لایهها را با هم مشاهده کنید. چیدن یک سایه تیره و فشرده زیر یک سایه نرم و پهن، همان روشی است که کارتها و دکمههای شیک عمق خود را میگیرند.
میتوانید خودِ عنصر پیشنمایش را نیز استایلدهی کنید: رنگ جعبه، شعاع حاشیه و پسزمینه بوم، تا سایه در برابر یک زمینه واقعی، از جمله سطوح تیره، سنجیده شود. از یک پیشتنظیم شروع کنید، برای الهامگیری روی «تصادفیسازی لایه» بزنید و هر وقت به یک شروع تازه نیاز داشتید ریست کنید. همه چیز در مرورگر شما اجرا میشود.
نحوه استفاده از مولد CSS Box Shadow
- اسلایدرهای انحراف افقی، انحراف عمودی، تاری، گسترش، رنگ و شفافیت را تنظیم کنید، و اگر سایهای داخلی میخواهید سوییچ «سایه داخلی» را فعال کنید.
- برای چیدن سایهها روی «افزودن لایه» یا «تکثیر لایه» کلیک کنید، و برای تنظیم دقیق هرکدام حالت پیشنمایش را بین «این لایه» و «همه لایهها» جابهجا کنید.
- عنصر و بوم را تنظیم کنید: رنگ جعبه، شعاع حاشیه و پسزمینه، تا پیشنمایش با طراحی واقعی شما مطابقت داشته باشد.
- اگر بهجای مجموعه اسلایدر خالی به یک نقطه شروع نیاز دارید، یک پیشتنظیم اعمال کنید یا از «تصادفیسازی لایه» استفاده کنید.
- قاعده کامل CSS (یا فقط مقدار) را کپی کنید و در برگه استایل خود بچسبانید.