آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

box-shadow در CSS

CSS

فصل چهارم : Properties در CSS

جلسه دوازدهم : box-shadow در CSS3

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در این جلسه ی آموزشی Box-shadow رو براتون توضیح میدم . البته ابزارهای آنلاین و افزونه های مرورگرها کار و خیلی ساده کردند اما دستور نوشتن این خاصیت رو براتون توضیح میدم و بعد سایت های آنلاین و افزونه هایی که میتونید توسط اونها box-shadow ایجاد کنید رو بهتون معرفی می کنم .

 

box-shadow

توسط box-shadow میتونید برای باکس یا عنصرتون سایه ایجاد کنید . در واقع شما یک باکسی رو به شکل سایه با box-shadow ایجاد می کنید به همون ابعاد باکسی که دارید ، توسط مقادیری که وارد می کنید ، این باکس رو جابجا می کنید و با جابجا شدن باکس سایه اینطور به نظر میرسه که یه سایه برای باکس بوجود اومده . لازم به گفتنه که این باکس سایه پشت باکس اصلی قرار میگیره . حالا با مثال هایی که میزنیم متوجه میشید .

 

قاعده ی دستوری box-shadow

h-shadow : باکس رو بصورت افقی در عنصر جابجا می کنید .

v-shadow : باکس رو بصورت عمودی در عنصر جابجا می کنید .

Blur : سایه رو بصورت blur و مات درمیاره .

Spread : میتونید سایز باکس سایه رو بزرگ تر کنید ( یعنی بزرگ تر از سایز باکس اصلی ) ، اگر برابر با صفر باشه باکس سایه دقیقا هم سایز باکس اصلی خواهد بود .

Color : رنگ سایه رو تعیین می کنید .

Inset : اگر مقدار inset رو انتهای کد قرار بدید ، سایه رو در داخل باکس ایجاد میکنه .

 

حالا چند تا مثال میزنیم :

در ابتدا کد html رو لحاظ می کنیم :

یه استایل هم بهش میدیم :

خوب حالا یه مستطیل به شکل زیر داریم :

1

میریم که  box-shadow رو روی این مستطیل اعمال کنیم .

ما اینجا گفتیم ۱۰ پیکسل بصورت افقی از باکس اصلی فاصله بگیر و ۱۵ پیکسل بصورت عمودی از باکس اصلی فاصله بگیر ، رنگ سایه هم مشکی باشه . حالا نتیجه رو ببینید :

2

گفتیم که این باکسِ سایه کاملا سایز باکس اصلیه ، برای اینکه متوجه بشید ، من مقادیر h-shadow و  v-shadow رو برابر صفر قرار میدم :

حالا نتیجه رو ببینید :

1

چون باکسِ سایه اندازه ی باکس اصلیه ، وقتی پشت باکس اصلی قرار میگیره دیگه مشخص نیست . حالا با تغییر مقادیر h-shadow و  v-shadow میتونید باکسِ سایه رو جابجا کنید و ظاهرا یه سایه برای باکس اصلی ایجاد کنید .

خوب بیاید یکم با مقادیر بازی کنیم .

اینجا گفتیم فقط بصورت افقی جابجا شو و ۱۵ پیکسل از باکس فاصله بگیر . حالا نتیجه رو ببینید :

box-shadow

خوب حالا میخوایم باکسِ سایه رو blur کنیم و یکم ماتش کنیم ، وقتی شما باکسِ سایتون و blur می کنید به اندازه ی سایز blur از هر طرف بزرگ تر از باکس اصلی میشه . برای اینکه متوجه بشید من کد قبلی رو بهش blur میدم :

نتیجه رو ببینید :

box-shadow

حالا اگر بخواین باکسِ سایه رو بزرگ تر کنید مقدار  spread رو اعمال می کنید :

اینجا ۱۰ پیکسل باکسِ سایه رو بزرگ تر کردیم :

box-shadow

حالا ما h-shadow رو برمیداریم و فقط باکسِ سایه رو بزرگ تر می کنیم :

حالا میبینید که با وجود اینکه ما باکسِ سایه رو جابجا نکردیم ، از پشت باکس اصلی مشخصه ، چون بزرگترش کردیم اما همچنان خاصیت blur رو بهش دادیم .

box-shadow

حالا خاصیت blur رو برمیداریم :

اینجا فقط مقدار spread به باکسِ سایه دادیم ، یعنی فقط سایز باکس ِ سایه رو بزرگتر کردیم :

box-shadow

حالا میایم از inset استفاده می کنیم ، وقتی از inset استفاده می کنید سایه رو از داخل به باکس اصلی میده :

حالا نتیجه رو ببینید :

box-shadow

دقیقا همون سایه اومد داخل باکس اصلی قرار گرفت و چون دقیقا در لبه های باکس قرار گرفته درست مشخص نیست ، پس میایم بهش h-shadow و v-shadow هم میدیم .

اینجا ۵ پیکسل از بالای باکس اصلی (عمودی) و ۵ پیکسل هم از سمت چپ باکس اصلی (افقی) سایه ایجاد می کنه .

box-shadow

خوب فکر می کنم دیگه متوجه شده باشید جریان از چه قراره . حالا یه نکته ای رو خدمتتون بگم . تا اینجا از مقادیر مثبت استفاده کردیم و جابجایی باکسِ سایه از سمت راست انجام میشد . حالا اگر بخوایم سایه سمت چپ باکس اصلی ایجاد بشه باید چیکار کنیم؟ خوب برای اینکار از مقادیر منفی استفاده می کنیم . به مثال زیر دقت کنید ، ۱۰ پیکسل بصورت افقی و ۱۵ پیکسل بصورت عمودی فاصله ایجاد می کنیم اما اینبار سمت چپ باکس :

نتیجه رو ببینید :

box-shadow

خیلی راحت بود ، نه؟ حالا یه چیز جالب تر اینکه میتونید این استایل رو هم سمت چپ و هم سمت راست پیاده کنید :

دو مقدار رو با علامت , از هم جدا می کنیم :

box-shadow

پشتیبانی مرورگرها

ابزارهای آنلاین و افزونه ها

افزونه ی cssSir در فایرفاکس افزونه ی بسیار کاربردی برای کدنویسان عزیز هست ، میتونید css3 رو بصورت کامل توسط این افزونه پیاده کنید .  وقتی افزونه رو نصب کنید ، به قسمت box-shadow که برید ، استایل دلخواهتون رو ایجاد می کنید و کد استانداردی که بهتون میده رو میتونید تو پروژتون بکار ببرید .

سایت http://css3gen.com/box-shadow/ در این بخش هم میتونید بصورت آنلاین Box-shadow دلخواهتون رو ایجاد کنید .

سایت http://css3generator.com یه سایت کاربردی تو این زمینه هست که CSS3 رو ساپورت می کنه .

 

خوب دوستان امیدوارم از این آموزش لذت برده باشید . اگر سوالی یا ابهامی براتون بوجود اومد تو سامانه پرسش و پاسخ حتما مطرح کنید.

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

 

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • hassany

    ممنونم از آموزش خوبتون.

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟