ساخت سایه box-shadow
جابهجایی، محوشدگی و گسترش را با اسلایدر تنظیم کنید و خط box-shadow را کپی کنید.
CSS
ساخت آنلاین سایه box-shadow در CSS
سایه‌ها کارت‌ها، دکمه‌ها و منوها را از سطح صفحه بالا می‌آورند. این صفحه مولد CSS را روی زبانه سایه جعبه باز میکند تا سایه را روی پیش‌نمایش تنظیم کنید، به‌جای اینکه مدام عددها را عوض کنید و صفحه را دوباره بارگذاری کنید.
سایه‌های رایج
| CSS | کاربرد |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | سایه باریک برای کارت‌ها و فیلدهای ورودی |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | کارت معلق با سایه نرم |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | سایه تیز و جابه‌جاشده، سبک فلت |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | فیلد یا دکمه فرورفته |
کارایی
سایه‌های بزرگ و محو زمان رسم می‌گیرند، به‌خصوص وقتی انیمیشن دارند. برای متحرک کردن سایه هنگام hover، ترفند رایج این است که سایه را روی یک شبه‌عنصر (pseudo-element) بگذارید و به‌جای خود سایه، opacity آن را متحرک کنید.
ابزارهای مرتبط
برای گرد کردن همان عنصر، ساخت گوشه گرد border-radius را ببینید؛ سایه از گوشههای گرد پیروی میکند. برای پس‌زمینه، ساخت گرادیانت CSS را ببینید.