سایه متن (Text Shadow)
«سایه متن (Text Shadow)» به نوشته ات عمق می دهد. با آن می توانی جهت افقی، عمودی، میزان محوشدگی و حتی رنگ سایه را بسازی. مثل برچسب سه بعدی روی دفترت، اما برای متن صفحه.
سایه ساده: افقی و عمودی
کمترین حالت «text-shadow» دو مقدار جابه جایی است: افقی و عمودی. هر دو به پیکسل هستند.
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
<h1>سلام سایه!</h1>
افزودن رنگ به سایه
می توانی رنگ بدهی تا سایه مشخص تر شود. نام رنگ یا کد هگز بگذار.
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
<h1>سایه قرمز</h1>
افزودن محوشدگی (Blur)
عدد سوم میزان محوشدگی است. هرچه بزرگ تر، نرم تر.
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
<h1>سایه محو</h1>
سایه روی متن سفید
برای متن روشن، سایه تیره کنتراست می سازد و خوانایی را زیاد می کند.
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
<h1>متن سفید با سایه</h1>
افکت نئون تک رنگ
با محوشدگی صفرِ جابه جایی، افکت درخشش نئونی می گیری.
<style>
h1 {
text-shadow: 0 0 3px #ff0000;
}
</style>
<h1>نئون قرمز</h1>
چند سایه همزمان
می توانی چند سایه را با ویرگول جدا کنی. هر کدام رنگ و محوشدگی خودش را دارد.
<style>
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
</style>
<h1>نئون قرمز و آبی</h1>
ترکیب حرفه ای روی متن سفید
با چند لایه رنگی، درخشش قوی تری می گیری. برای تیترها عالی است.
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}
</style>
<h1>نئون چندرنگ</h1>
گام های تمرینی سریع
- یک تیتر بساز و متنش را بنویس.
- text-shadow را با دو مقدار شروع کن.
- بعد رنگ و محوشدگی را اضافه و مقایسه کن.
نکته: برای خوانایی بهتر، کنتراست سایه و پس زمینه را چک کن.
هشدار: افراط در محوشدگی، متن را تار می کند و خسته کننده می شود.
برای هماهنگی با فاصله ها، بخش فاصله متن را ببین. همچنین صفحه تزئین متن و تراز متن مکمل سایه متن هستند.
جمع بندی سریع
- ترتیب مقادیر: افقی، عمودی، محوشدگی، رنگ.
- می توانی چند سایه با ویرگول بدهی.
- برای متن روشن، سایه تیره بگذار.
- زیادی محو، خوانایی را کم می کند.
- سایه متن در تیترها تاثیرگذار است.