تولیدکننده CSS Box Shadow
CSS Box Shadow چیست؟
ویژگی CSS box-shadow افکتهای سایه را در اطراف قاب یک عنصر اضافه میکند. سایهها میتوانند افست شوند، بلور شوند، گسترش یابند، رنگآمیزی شوند و به عنوان inset (سایه داخلی) تنظیم شوند. چندین سایه جدا شده با کاما میتوانند برای افکتهای غنی لایهبندی شوند. این تولیدکننده به شما امکان میدهد سایههای پیچیده چند لایه را به صورت بصری بسازید و CSS آماده برای چسباندن را در کلیپبورد کپی کنید.
نحوه استفاده از تولیدکننده Box Shadow
-
لغزندههای Offset X/Y، Blur و Spread را برای موقعیتیابی و شکل دادن به سایه تنظیم کنید.
-
روی نمونه رنگ کلیک کنید تا رنگ سایه را انتخاب کنید، و از لغزنده Opacity برای شفافیت استفاده کنید.
-
'Inset' را فعال کنید تا درخشش داخلی یا افکت فشرده ایجاد شود.
-
روی '+ افزودن لایه' کلیک کنید تا چندین سایه روی هم قرار گیرند.
-
CSS تولید شده را کپی کرده و در فایل استایل خود پیست کنید.
سوالات متداول
تفاوت بین box-shadow و drop-shadow filter چیست؟ box-shadow سایههایی را دور جعبه مرز مستطیلی عنصر اضافه میکند و از سایههای درونی پشتیبانی میکند. CSS filter: drop-shadow() برای شکل بصری عنصر اعمال میشود (شامل شفافیت)، که به آن اجازه میدهد از طرحهای غیر مستطیلی مانند PNGهای با پسزمینه شفاف پیروی کند.
چگونه اثر بلندی کارت Material Design را ایجاد کنم؟ دو سایه box-shadow را روی هم بگذارید: یک سایه محیطی نرم (تار بزرگ، کدورت کم، کمی پخش) و یک سایه کلیدی (تار کوچکتر، کدورت بیشتر، جابهجایی جهتدار). برای مثال: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
آیا box-shadow بر طرحبندی صفحه تأثیر میگذارد؟ نه. box-shadow بر اندازه یا موقعیت عنصر در جریان سند تأثیر نمیگذارد. برخلاف outline، فضای طرحبندی را اشغال نمیکند و عناصر دیگر را جابهجا نخواهد کرد.
آیا میتوانم box-shadow را متحرک کنم؟ بله. box-shadow با CSS transitions و animations قابل انیمیشن است. برای عملکرد، تنها زمانی که ضروری است، box-shadow را متحرک کنید — مرورگرها نمیتوانند تغییرات box-shadow را با GPU بهطور موثریتری نسبت به transform یا opacity تسریع کنند.
Keywords: تولیدکننده CSS box shadow، box-shadow CSS، ابزار سایه CSS، CSS drop shadow، سایه داخلی، سایه چند لایه، CSS shadow آنلاین