אז איך יוצרים כותרת עם צבע מדורג?
- צרו כותרת (נראה טוב יותר עם כותרת במשקל עבה)
- תוסיפו את CSS הזה במתקדם > CSS מותאם (Custom CSS) אבל עדיין זה לא יעבוד😒😒.
- אל דאגה, תעברו לסגנון (style) > צבע טקסט (Text color) ותתנו שקיפות מלאה לצבע הכותרת והופ… הקסם קורה.
קוד CSS
:root{
--color1: #1C99FE;
--color2: #7644FF;
--color3: #fd4766;
/*זווית צבע*/
--angle: 90deg;
}
selector h2{
background: linear-gradient(var(--angle),
var(--color1) 20.69%,
var(--color2) 50.19%,
var(--color3) 79.69%);
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
}
הסבר קצר על הקוד! בשורות 2,3,4 אלו הקודים של הצבעים, תוכלו לשנות כרצונכם.
בשורה 6 תוכלו לשלוט בזווית הצבע, תשנו את המעלות.
שורות 11,12,13 אלו הוראות לצבעים מאיזה אחוז של הכותרת להתחיל. אם תרצו לוותר על צבע אחד ולהשתמש רק בשני צבעים, פשוט תמחקו את שורה 12 של הצבע השני. והופ… יש לכם רק שני צבעים.