سازنده‌ی سایه CSS

تنظیم سایه با پیش‌نمایش زنده و کپی مستقیم کد.

رایگان
همه‌ی این ابزارها داخل مرورگر شما اجرا می‌شوند؛ هیچ داده‌ای به سرور ما ارسال نمی‌شود.

درباره‌ی سازنده‌ی سایه CSS

سایه چیزی است که به عناصر رابط کاربری حس ارتفاع می‌دهد. رازِ سایه‌های حرفه‌ای این است که به جای یک سایه‌ی تیره و بزرگ، دو یا سه سایه‌ی نرم و کم‌رنگ روی هم گذاشته می‌شوند — دقیقاً کاری که نور واقعی می‌کند.

راهنمای استفاده از سازنده‌ی سایه CSS

  1. 1

    جابه‌جایی افقی و عمودی را تنظیم کنید؛ معمولاً فقط عمودی مقدار می‌گیرد چون نور از بالا می‌تابد.

  2. 2

    میزان محو‌شدگی و گسترش را تغییر دهید تا نرمی دلخواه به دست آید.

  3. 3

    رنگ و شفافیت سایه را انتخاب کنید؛ شفافیت پایین طبیعی‌تر است.

  4. 4

    کد CSS را کپی کنید.

پرسش‌های متداول

چطور سایه‌ی طبیعی‌تری بسازم؟

شفافیت را پایین نگه دارید، حدود ده تا بیست درصد، و محو‌شدگی را زیاد. سایه‌ی سیاه صددرصد تقریباً همیشه مصنوعی به نظر می‌رسد.

سایه‌ی داخلی به چه درد می‌خورد؟

برای فرورفتگی؛ مثلاً کادر ورودی یا دکمه‌ی فشرده‌شده. حس می‌دهد که عنصر داخل صفحه فرو رفته نه بیرون آمده.

سایه روی کارایی اثر می‌گذارد؟

تعداد کم مشکلی ندارد. اما سایه‌های بسیار محو روی ده‌ها عنصر متحرک می‌تواند در دستگاه‌های ضعیف باعث افت نرمی انیمیشن شود.