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