گرادیان ها جلوه هایی هستند که از یک رنگ شروع میشن و کم کم متمایل میشن به یک رنگ دیگه. مثلا در زیر یک گرادیان از رنگ آبی کم رنگ به آبی پر رنگ رو میبینید.
این افکت ها رو میشه جاهای مختلف سایت و برای طرح پس زمینه و… استفاده کرد ولی من امروز میخوام بهتون یاد بدم که چطور میتونید رنگ متن رو گرادیان دار کنید. یعنی متن با یه رنگ شروع بشه و با یه رنگ دیگه تموم بشه. برای این کار کافیه از قطعه کد زیر استفاده کنید.
h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
همون‌طور که میبینید رنگ پس‌زمینه متن رو گرادیان دادیم و پس زمینه متن رو که پرش میکنه رو گفتیم شفاف باشه. به همین راحتی میتونید متنی به شکل زیر تولید کنید که البته با ارسال مقدار چرخش گرادیان میتونید جهت گرادیان رو هم عوض کنید. در واقع برای چرخش گرادیان به صورت افقی میتونید این کار رو انجام بدید:
background: -webkit-linear-gradient(45deg, #eee, #333);
اگه تک تک در مورد خطوط بالا جستجو کنید اطلاعات عمیق تری نسبت به هر کدوم از کدهای css بالا میتونید بدست بیارید و نهایتا خروجی باید یچی مثل عکس زیر باشه.
موفق باشید...
