همانطور که می توانیم برای یک عنصر پس زمینه ای با یک رنگ تخت داشته باشیم، می توانیم پس زمینه را بصورت یک طیف هم تعریف کنیم. این کار بوسیله گرادینت ها قابل انجام است.
برتری استفاده از گرادینت ها نسبت به تصاویر در کنترلی است که بر روی ساخت آن ها داریم و همینطور عملکرد بهتر آنها در زمان ترسیمات مرورگر.
در دنیای CSS چهار نوع گرادینت وجود دارند که در این فصل با آنها آشنا خواهیم شد.
قبل از هرچیز نوع داده ای گرادینت را بررسی می کنیم:
gradientسپس نحوه کار با گرادینت خطی را خواهیم آموخت:
linear-gradientگرادینت خطی تکرار شونده را نیز ملاقات می کنیم :) :
repeating-linear-gradientآموختن گرادینت شعاعی مرحله بعد خواهد بود:
radial-gradientو در نهایت کار با گرادینت شعاعی تکرار شونده را یاد می گیریم:
repeating-radial-gradient
سلام خسته نباشید
من میخوام به فونت ایکونم یا svg که در طراحیم به کار میبرم گرادینت و هاور بدم
گرادینت رو میخوام به عنوان رنگ اصلی به کار ببرم نه پس زمینه
یعنی فونت ایکونم از سفید شروع بشه و به قرمز برسه
هرچی گشتم چیز بدرد بخوری پیدا نکردم، لطفا راهنماییم کنید با تشکر
سلام، برای SVG که میتونید از گرادینت در خود SVG استفاده کنید، مثل این:
https://codepen.io/brenna/pen/mybQVx
برای فونت آیکون هم چون مثل متن هست میشه از CSS به این روش استفاده کرد که پشتیبانی بدی هم نداره این روزها:
https://dev.to/paramharrison/gradient-text-style-using-css-11ka