css

صفت box-shadow در CSS – آموزش CSS

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


.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 استفاده کنید. این کلمه باعث میشود این سایه ای که در بیرون جعبه قرار داده شده در داخل ایجاد شود.

ایران آکادمی

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close