صفت box-shadow در CSS

صفت box-shadow در CSS

توسط / CSS / پنج شنبه, 26 مرداد 1396 ساعت 10:20

با استفاده از این صفت شما میتوانید به قسمت مورد نظرتون سایه بدهید.

.nameclass{
    box-shadow: 10px 10px 5px #888888;
}

همان طور که می بینید جلوی صفت box-shadow شما 4 ویژگی را می توانید بنویسید. با دو ویژگی اول می توانید مختصات محل سایه را مشخص کنید، عدد اول تغییر سایه روی محور X ها ، عدد دوم تغییر روی محور Y  ها عدد سوم میزان پخش شدن سایه را مشخص می کند. مثلا زمانی که 5px نوشته شود یعنی به اندازه ی 5px سایه پخش می شود به نحوی که در ابتدا (نزدیک حروف یا جعبه ها) پررنگ و به تدریج کم رنگ و در آخر (پیکسل ششم در این مثال) رنگی وجود ندارد.

این نکته را هم خوب است بدانید که شما ملزم به وارد کردن هر چهار عدد نیستید. گاهی نمی خواهید رنگتون پخش بشه یا می خواهید فقط روی محور  X یا Y تغییر کند. شما اگر رنگی را هم انتخاب نکنید این رنگ پیش فرض مشکی می باشد.

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

<div class="classname"></div>

.classname{
width:100px;
height:100px;
box-shadow:0px 0px 50px #a1ab11;
}
ایران آکادمی

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

ایران آکادمی
برچسب

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.