آموزش سایه متن در css

یکی از مواردی که در CSS کمبود اون احساس می شد و امروزه برطرف شده، قابلیت سایه گذاری برای متن هاست. با استفاده از این قابلیت با ایجاد جلوه ای سه بعدی به عناوین، لیست ها، پاراگراف ها و ... ، نمای زیبایی به آنان می بخشیم. در این آموزش به نحوه ایجاد سایه برای متن می پردازیم.

فرم کلی دستور ایجاد سایه به صورت زیر است که هر کدام از بخش ها به اختصار توضیح داده می شود:

text-shadow: horizontal-offset vertical-offset blur-radius color

Horizontal-ofset : فاصله افقی سایه با متن

Vertical-ofset : فاصله عمودی سایه با متن

blur-radius : میزان مات شدن سایه

color : رنگ سایه

text-shadow: -4px 4px 3px #999999;

اگر می خواهید سایه حالت واقعی داشته باشد بهتر است در زمان اعمال سایه به یک متن به نکات زیر توجه داشته باشید:

• یک سایه هیچوقت نباید یک رنگ یکدست و سالید داشته باشد حتما باید کمی حالت شفافیت و پشت نمایی داشته باشد که بهتر است برای رنگ سایه از مقدار آلفا بهره برد: ()rgba() , hsla
• یک سایه هیچوقت لبه تیز ندارد پس بهتر چند پیکسل مات شود.

همچنین مى توان دو سایه به یک متن اعمال کرد، فقط کافى است آنها را با , از هم جدا کنیم.

;text-shadow: shadow1, shadow2, shadow3

در زیر نمونه های مختلفی از مقدار دادن به هر کدام از دستورات نمایش سایه نشان داده شده است:

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 24px 2px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);

text-shadow: -10px 10px 0px #00e6e6,
             -20px 20px 0px #01cccc,
             -30px 30px 0px #00bdbd;

color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
             0px -5px 35px rgba(255,255,255,0.3);