در پایین یک راه تر و تمیز برای گرادینت کردن متن با سی اس اس مشاهده می‌کنید که البته فقط در موتور وب کیت (webkit) کار خواهد کرد. یعنی مرورگرهایی چون کروم و سافاری.
1 |
h1 { |
2 |
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000)); |
3 |
-webkit-background-clip: text; |
4 |
-webkit-text-fill-color: transparent; |
5 |
} |
در این روش من ابتدا به المنت موردنظر یک بک‌گراند با گرادینت می‌دهم (خط ۲).
در پایین یک راه تر و تمیز برای گرادینت کردن متن با سی اس اس مشاهده می‌کنید که البته فقط در موتور وب کیت (webkit) کار خواهد کرد. یعنی مرورگرهایی چون کروم و سافاری.
1 |
h1 { |
2 |
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000)); |
3 |
-webkit-background-clip: text; |
4 |
-webkit-text-fill-color: transparent; |
5 |
} |
در این روش من ابتدا به المنت موردنظر یک بک‌گراند با گرادینت می‌دهم (خط ۲).
بعد با مشخصه‌ی -webkit-background-clip تعیین می‌کنم که بک‌گراند مورد نظر فقط در نواحی‌ای که متن وجود دارد دیده شود. واضح‌تر بگویم؛ حرف A را درنظر بگیرید. حالا بک‌گراند فقط در قسمت‌هایی که خطوط حرف A وجود دارد، دیده خواهد شد (خط ۳).
در آخر هم متن داخل المنت را به‌صورت شفاف در می‌آورم، یعنی عاری از هر رنگی که در این صورت فقط بک‌گراند متن دیده خواهد شد (خط ۴).
نتیجه را ببینید.
منبع: CSS-Tricks
.: RASEKHOON.NET:.
