cssblog.ir logo
P

box-shadow

تعیین سایه زیر عناصر

با استفاده از این مشخصه بسیار کاربردی می توان برای تمام عناصر سایه تعیین نمود و این امکان وجود دارد که هر نوع سایه‌ای را بوسیله این مشخصه بوجود آورد.

با استفاده از این مشخصه می توان برای عناصر سایه (مانند Drop Shadow در فتوشاپ) تعیین نمود. این مشخصه ۴ مقدار اصلی و یک مقدار اختیاری قبول می کند که این مقادیر هرکدام به شکل های مختلفی در سایه ایجاد شده تاثیر گذارند. 

این مقادیر به شرح زیر است:

۱- فاصله افقی X

۲- فاصله عمودی Y

۳- میزان افکت Blur - B

۴- میزان پخش شدن (Spread) - S

۵- رنگ - C

که این مقادیر به این ترتیب پشت سرهم قرار می گیرند:

box-shadow: X Y B S C

مثلا

box-shadow: 2px 4px 1px 1px #000

معنی هریک از مقادیر

فاصله افقی (اجباری): مقادیر مثبت باعث حرکت سایه به سمت راست و مقادیر منفی باعث حرکت آن به سمت چپ خواهند شد. 

فاصله عمودی (اجباری):‌ مقادیر مثبت باعث حرکت سایه به سمت پایین و منفی ها باعث حرکت به سمت بالا خواهند شد. 

میزان افکت Blur (اجباری): هرچه این مقدار بزرگتر باشد سایه بیشتر نامفهوم (افکت blur) خواهد بود. 

میزان پخش شدن (اختیاری): مانند سایز سایه عمل می کند و با بزرگتر شدن عدد آن، سایه بزرگتر خواهد بود. 

رنگ (اجباری): تمام مقادیر رنگ ها در این قسمت قابل استفاده هستند. رنگ سایه است که می تواند rgba نیز باشد. 

سایه های درونی 

یک مقدار اختیاری نیز وجود دراد که استفاده از آن باعث خواهد شد تا سایه بجای بیرون جسم، در داخل آن قرار بگیرد. اگر ما قبل یا بعد از مقادیر ذکر شده در بالا، کلمه inset را نیز قرار دهیم، می توانیم سایه را به داخل جسم بیاوریم. این مقدار در برخی مواقع بسیار کارآمد است.

box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.31) inset;

مثال: 

استفاده از چند سایه

قابلیت فوق العاده ای که در اینجا نیز به کمک ما می آید استفاده از کاما (,) برای جداسازی سایه ها و انجام دادن کارهای بسیار زیبایی با آن است. مثلا: 

در مثال فوق جعبه دارای ۲ سایه می‌باشد که یکی سفید رنگ است و باعث بوجود آمدن فاصله بین سایه دوم و خود جعبه شده است. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند