loading...

سه نفری | بزرگترین سایت تفریحی آموزشی ایران

با سلام و درود خدمت کاربران سایت 3نفری دات آی آر؛در این بخش می خوام شما رو با یکی دیگه از اجزای css آشنا کنم که با استفاده از اون میتونین به باکس ها یا تصاویر خودتون حالت سایه دار بودن بدین (برای متن

آموزش خاصیت box-shadow در css

admin بازدید : 1690 چهارشنبه 03 ارديبهشت 1393 نظرات (2)

با سلام و درود خدمت کاربران سایت 3نفری دات آی آر؛

در این بخش می خوام شما رو با یکی دیگه از اجزای css آشنا کنم که با استفاده از اون میتونین به باکس ها یا تصاویر خودتون حالت سایه دار بودن بدین (برای متن از این خاصیت استفاده نمی شود،به زودی این بخش نیز اضافه خواهد شد) خوب بریم سر موضوع اصلی آموزشهامون،تو ادامه مطلب می بینمتون...!

خوب برای شروع کار یک تگ style ایجاد می کنیم،به این شکل:

<style>


</style>

بعد از این کار یک کلاس با نام دلخواه ایجاد می کنیم(من یه کلاس با نام smaeal ایجاد می کنم):

<style>

.smaeal{background:#9C0; width:200px; height:200px; border-radius:5px; border:1px solid #444;}

</style>

بعدش شروع می کنیم به نوشت خاصیت box-shadow :

<style>

.smaeal{background:#9C0; width:200px; height:200px; border-radius:5px; border:1px solid #444; box-shadow:1px 2px 5px #777;}

</style>

همونطور که می بینید این خاصیت از 4 بخش تشکیل شده که به شکل زیز تقسیم بندی می شن:

1px : با تغییر این عدد سایه باکس شما به سمت راست یا چپ حرکت می کنه.

2px : با تغییر این عدد سایه باکس شما به سمت بالا و پایین جابجا میشه.

5px : این عدد هم مربوط به گستردگی میزان سایه مربوط میشه.

#777 : با تغییر این کد می توانید سایه ای با رنگ دلخواه ایجاد کنید.


و در آخر می بایست این کلاس را فراخوانی کنید،به این صورت:

<div class="smaeal"></div>


برای مشاهده نتیجه کار به این پست مراجعه نمایید : پست25


مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط بدو بوسه دات کام در تاریخ 7 سال پیش و 11:27 دقیقه ارسال شده است

اقا بسیار عالی بود
پاسخ : خواهش میکنم...
با تشکر

این نظر توسط محمد در تاریخ 8 سال پیش و 18:13 دقیقه ارسال شده است

سلام خداقوت!
جالب بود ولی من که بازم نفهمیدددددددددددد ...شکلک
شکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلکشکلک
پاسخ : دقیقا کدوم قسمتو متوجه نشدین....؟


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • آمار سایت
  • کل مطالب : 182
  • کل نظرات : 544
  • افراد آنلاین : 3
  • تعداد اعضا : 1165
  • آی پی امروز : 95
  • آی پی دیروز : 136
  • بازدید امروز : 452
  • باردید دیروز : 301
  • گوگل امروز : 0
  • گوگل دیروز : 3
  • بازدید هفته : 452
  • بازدید ماه : 5,363
  • بازدید سال : 58,631
  • بازدید کلی : 9,883,365