سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبلی این دوره با ویژگی box-decoration-break آشنا شدیم؛ این ویژگی هنگام تکه تکه شدن یا fragmented عنصر مورد نظر،تعیین می کند که ویژگی های background, padding, border, border-image, box-shadow, margin و clip-path چگونه اعمال شوند.
در این جلسه می خواهیم به آموزش کار با ویژگی box-shadow در CSS بپردازیم.
آموزش کار با ویژگی box-shadow در CSS
به مثال زیر توجه نمایید. در این مثال به عناصر مختلف <div> سایه هایی را اضافه کرده ایم.
مثال :
| #example1 { box-shadow: 5px 10px; } #example2 { box-shadow: 5px 10px #888888; } |
تعریف و کاربرد
ویژگی box-shadow به یک عنصر یک یا چند سایه می چسباند.
| مقدار پیش فرض | none |
| به ارث بردن | خیر |
| متحرک بودن | بله |
| نسخه | CSS3 |
| سینتکس JavaScript | “object.style.boxShadow=”10px 20px 30px blue |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی box-shadow را در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
اعدادی که به دنبال -webkit- ، -moz- یا -o- آمده است اولین نسخه ای که با این پیشوند کار می کند را نشان می دهد.
| نام ویژگی |  |  |  |  |  |
| border-top-right-radius | ۱۰٫۰
۴٫۰ -webkit- | ۴٫۰
۳٫۵ -moz- | ۱۰٫۵ | ۵٫۱
۳٫۱ -webkit- | ۹٫۰ |
سینتکس CSS
مثال :
| box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; |
نکته
برای اتصال بیش از یک سایه به یک عنصر، لیستی از سایه ها را که جدا از کاما هستند اضافه کنید.
مقدار ویژگی
| مقدار | توضیحات |
| none | مقدار پیش فرض – سایه نمایش داده نمی شود |
| h-offset | ضروری است – سایه متمایل به جهت افقی سایه که یک مقدار مثبت را در سمت راست box اضافه کرده و یک مقدار منفی را در سمت چپ box می گذارد. |
| v-offset | ضروری است – سایه متمایل به جهت عمودی سایه که یک مقدار مثبت را در زیر box اضافه کرده و یک مقدار منفی را در بالای box می گذارد. |
| blur | اختیاری است – The blur radius – هر چه تعداد این مقدار بیشتر باشد سایه روشن تر خواهد بود. |
| spread | اختیاری است – The spread radius – می تواند مقدار مثبت سایه و نیز مقدار منفی سایه را کاهش و یا افزایش دهد. |
| color | اختیاری است – The color of the shadow – مقدار پیش فرض رنگ متن است. نکته : در سافاری – در PC – پارامتر رنگ یا color مورد نیاز است. اگر رنگ را مشخص نکردید، سایه به هیچ وجه نمایش داده نمی شود. |
| inset | اختیاری است – سایه را از سایه بیرونی (outset) به سایه داخلی تغییر می دهد. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
در ادامه آموزش کار با ویژگی box-shadow در CSS چندین مثال ارائه کرده ایم که می تواند در درک بیشتر این ویژگی مفید باشد.
مثال یک
افزودن یک اثر blur به سایه :
مثال :
| #example1 { box-shadow: 10px 10px 8px #888888; } |
مثال دو
تعریف یک شعاع spread برای سایه :
مثال :
| #example1 { box-shadow: 10px 10px 8px 10px #888888; } |
مثال سه
تعریف چندین سایه :
مثال :
| #example1 { box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green; } |
مثال چهار
افزودن کلمه کلیدی inset :
مثال :
| #example1 { box-shadow: 5px 10px inset; } |
مثال پنج
تصاویر قرار گرفته در جدول. مثال نحوه ایجاد تصاویر “polaroid” و چرخش تصاویر را نشان می دهد:
مثال :
| div.polaroid { width: 284px; padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; } |
کلام آخر
در این جلسه با آموزش کار با ویژگی box-shadow در CSS همراه شما بودیم. ویژگی box-shadow به یک عنصر یک یا چند سایه می چسباند.
در جلسه آینده شما را با ویژگی box-sizing و نحوه کار با آن آشنا خواهیم کرد.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
