scroll

אפקט טקסט מדורג עם אלמנטור

מדריך מהיר וקצר, איך להפוך את צבע הכותרת שלך לצבע הדרגתי באלמנטור. רק קוד CSS והכותרת שלך משודרגת

איך זה נראה?

מקור התוכן בהדרכה זו הוא מערוץ היוטיוב של Farjana Rashid שחולקת עם הצופים הדרכות וטריקים בתחום עיצוב ופיתוח אתרים לחצו לקישור ישיר להדרכה

The source of the content in this tutorial is from Farjana Rashid's YouTube channel, which shares with viewers tutorials and tricks in the field of website design and development. Click for a direct link to the tutorial

אז איך יוצרים כותרת עם צבע מדורג?

  1. צרו כותרת (נראה טוב יותר עם כותרת במשקל עבה)
  2. תוסיפו את CSS הזה במתקדם > CSS מותאם (Custom CSS) אבל עדיין זה לא יעבוד😒😒.
  3. אל דאגה, תעברו לסגנון (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 של הצבע השני. והופ… יש לכם רק שני צבעים.

לינקים קשורים למדריך

שיתוף המדריך

0 0 votes
דירוג מאמר
Subscribe
Notify of
guest
0 הערות
Inline Feedbacks
View all comments

עוד מדריכים קשורים

Farjana Rashid

יצירת צבעים מרובים לרקע גרדיאנט תוך שימוש בטריק מעניין באלמנטור פרו ובהוספת שורת CSS אחת. רקע שמשדרג אתרים

SAVVY

אין מפתח אתרים שתוהה מדוע וורדפרס לא מוסיפים אפשרות שכפול לעמודים או פוסטים, הרי זה דבר נצרך באופן ברור. אז קחו שתי דרכים לעשות את זה בעצמכם

wicky design

איך תוסיפו סרטון וידאו שבמעבר עכבר מעליו הוא מתחיל לנגן (ללא שמע) ובהסרת העכבר הוידאו נעצר

תודה שאישרת את הצעת המחיר!

לא צויין כתובת מייל

סך תשלום ראשון (מקדמה) 30% מסכום העסקה הינו:

בפרוייקטים של עיצוב גרפי או/ו פרוייקטים שלא עולים מעל לסכום של 2000₪, התשלום לא יתחלק לפעימות אלא התשלום יושלם בפעימה ראשונה או יתחלק לשתי פעימות על פי הסיכום בטלפון או בהודעות

העברה בנקאית

בנק – ONE ZERO (18)
סניף – ראשי (001)
חשבון – 202003116
ע"ש – אליהו כהן

תשלום באפליקציות

bit/PayBox
במספר טלפון 0503528688