آموزش CSS – سایه در CSS3

در جلسه قبل از آموزش CSS با ویژگی text-overflow در CSS3 آشنا شدید. در این بخش قصد داریم به سایه در CSS3 یپردازیم.

با CSS3 شما می توانید shadow یا سایه را روی متن یا هر المان دیگری در صفحه وب لحاظ کنید

استفاده از سایه در CSS3

CSS3 به شما امکان افزودن افکت سایه را به المان ها همانند آنچه در فتوشاپ است را بدون استفاده از تصاویر, می دهد.

قبل از CSS3 , تصاویر بریده شده برای ساخت سایه ها اطراف المان استفاده می شد که بسیار آزاردهنده بود.

خاصیت box-shadow به شما امکان افزودن سایه به المان های باکس مانند را می دهد.

شما همچنین می توانید چندین افکت shadow را با کاما جدا و قرار بدید.

box-shadow: offset-x offset-y blur-radius color;

1	box-shadow: offset-x offset-y blur-radius color;

مقادیر دریافتی ویژگی box-shadow بصورت زیر است:

offset-x – مقدار فاصله سایه با باکس را در راستای محور X – اگر این مقدار مثبت باشد سایه به سمت راست حرکت دارد و اگر منفی باشد سایه به سمت چپ حرکت می کند.
offset-y – مقدار فاصله سایه با باکس را در راستای محور y – اگر این مقدار مثبت باشد سایه به سمت پایین حرکت دارد و اگر منفی باشد سایه به سمت بالا حرکت می کند.
blur-radius (اختیاری) میزان مات شدن یا محو شدن سایه – اگر تعیین نشود مرورگر مقدار پیشفرض آن که صفر است را به سایه اعمال می کند. وقتی این مقدار صفر باشد لبه سایه کاملا واضح و تیز می شود و هر چه این مقدار بیشتر شود لبه سایه مات تر و محوتر می شود.
color – رنگ سایه که اگر مشخص نشود مقدار ویژگی color را دریافت می کند.

.box{
    width: 200px;
    height: 150px;
    background: #ccc;
    box-shadow: 5px 5px 10px #999;
}

.box{

width: 200px;

height: 150px;

background: #ccc;

box-shadow: 5px 5px 10px #999;

}

مشابه آن می توانید از box-shadow چندگانه به اینصورت استفاده کنید

.box{
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

.box{

width: 200px;

height: 150px;

background: #000;

box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;

}

با خاصیت text-shadow می توانید افکت سایه را روی متن لحاظ کنید. همچنین همانند مثال بالا اینجا هم می توانید از چندین سایه در یک دستور استفاده کنید.

h1 {
    text-shadow: 5px 5px 10px #666;
}
h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

h1 {

text-shadow: 5px 5px 10px #666;

}

h2 {

text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;

}

امیدوارم در این بخش آموزش CSS, از سایه در CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.