وب مستران عزیز همانطور که میدانید در CSS3 این امکان در اختیار طراح وب قرار گرفته که سایه به متن یا دیگر المان ها اضافه کند.
در این فصل شما با خاصیت های زیر آشنا می گردید:
text-shadow
box-shadow
جدول زیر تمامی مرورگرهایی را که از خاصیت های فوق پشتیبانی می کنند به نمایش گذاشته است:
خاصیت/Property
IE
Chrome
Firefox
Safari
Opera
text-shadow
۱۰٫۰
۴٫۰
۳٫۵
۴٫۰
۹٫۵
box-shadow
۹٫۰
۱۰٫۰
۴٫۰ -webkit-
۴٫۰
۳٫۵ -moz-
۵٫۱
۳٫۱ -webkit-
۱۰٫۵
خاصیت text-shadow (سایه دار کردن نوشته) در CSS3
خاصیت text-shadow به متن مورد نظر سایه می دهد.
در ساده ترین نمونه ی کاربرد آن, تنها سایه ی افقی (horizontal shadow) به اندازه ی دو پیکسل و سایه عمودی (vertical shadow) را نیز دو پیکسل مقداردهی می کنید:
آموزش Shadow effect در css3
مثال:
h1 {
text-shadow: 2px 2px;
}
در مرحله ی بعد می توان رنگ به سایه افزود:
آموزش Shadow effect در css3
مثال:
h1 {
text-shadow: 2px 2px red;
}
سپس, می توان میزان محو بودن نوشته را تنظیم کرد (جلوه یا ایفکت blur را به متن اعمال کنید):
آموزش Shadow effect در css3
مثال:
h1 {
text-shadow: 2px 2px 5px red;
}
مثال زیر متن سفیدی را نمایش می دهد که سایه ی تیره به آن اعمال شده:
آموزش Shadow effect در css3
مثال:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
نمونه ی زیر نوشته ی با سایه ی قرمز درخشان را نمایش می دهد:
آموزش Shadow effect در css3
مثال:
h1 {
text-shadow: 0 0 3px #FF0000;
}
* اعمال چندین سایه به نوشته
به منظور افزودن چندین (بیش از یک) سایه به متن, کافی است لیستی از سایه ها تهیه کنید که با ویرگول از هم جدا شده باشند .
به عنوان مثال نمونه ی زیر متنی را نشان می دهد که سایه ی آن تلفیقی از رنگ آبی و قرمز درخشان می باشد:
آموزش Shadow effect در css3
مثال:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
نمونه ی دیگری را زیر مشاهده می کنید که نوشته ی سفید با رنگ های تیره, آبی تیره و آبی سایه زنی شده است:
آموزش Shadow effect در css3
مثال:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
خاصیت box-shadow
با بهره گیری از این خاصیت می توان به المان ها سایه افزود (برای مثال یک کادر را سایه دار کرد) .
در ساده ترین حالت ممکن, کافی است تنها یک سایه افقی و یک سایه ی عمودی مشخص کنید:
آموزش Shadow effect در css3
مثال:
در این مثال یک المان زرد رنگ div را مشاهده می کنید که با رنگ سیاه سایه زنی شده.
div {
box-shadow: 10px 10px;
}
در مرحله ی بعد یک رنگ به سایه ی خود اضافه کنید:
آموزش box shadow در css3
مثال:
در این مثال یک عنصر div زرد رنگ را مشاهده می کنید که رنگ سایه ی آن خاکستری مقدار دهی شده.
div {
box-shadow: 10px 10px grey;
}
اکنون رنگ سایه ی عنصر div را کمی محو سازی (کدر تر) می کنیم:
آموزش box shadow در css3
مثال:
این مثال یک عنصر زرد رنگ div است که سایه ی کادر آن نسبت به نمونه ی فوق کدرتر شده.
div {
box-shadow: 10px 10px 5px grey;
}
کلیه ی خاصیت های مربوط به سایه زنی متن درCSS3 با ذکر شرح ارائه گردیده:
Property / خاصیت
شرح
box-shadow
یک یا چند سایه به المان مربوطه اضافه می کنید
text-shadow
یک یا چند سایه به نوشته اضافه می کند
