מסלול אלופות בCSS עכשיו ב 650 ₪ בלבד! בונות אתרים חוסכות בגדול

קו טקסט מחליף צבעים

CSS

השלבים ליצירת מסגרת עם צבע מעבר מתחלף לטקסט חי

  1. הוסיפי וידג’ט מסוג כותרת
  2. תני לכותרת צבע ניגודי לרקע (אם הרקע שחור – תני לטקסט רקע לבן)
  3. במתקדם > פריסה > רוחב > הגדירי “בתוך השורה
  4. במתקדם > CSS מותאם אישית > הדביקי את הקוד הבא
selector .elementor-heading-title{
    background-image: linear-gradient(270deg, #E73C6F, #2394D5, #2AF3B7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-stroke: 6px transparent !important;
}

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

  1. עכשיו תני לכותרת צבע זהה לצבע של הרקע בעמוד
  2. והנה – המסגרת מופיעה עם צבע מעבר מתחלף!

הוספת אנימציית מעבר “מוארת” לטקסט חי

במתקדם > CSS מותאם אישית > הדביקי את הקוד הבא

selector .elementor-heading-title{
    transition: all 0.3s ease !important;
}
selector .elementor-heading-title:hover{
    text-shadow: 0px 0px 20px #2AF3B7 !important;
}

וגם פה – את יכולה לשנות את הקוד כפי רצונך.

הקוד המלא לטקסט עם מסגרת מעברית + אנימציית מעבר מוארת

selector .elementor-heading-title{
    background-image: linear-gradient(270deg, #E73C6F, #2394D5, #2AF3B7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-stroke: 6px transparent !important;
    transition: all 0.3s ease !important;
}

selector .elementor-heading-title:hover{
    text-shadow: 0px 0px 20px #2AF3B7 !important;
}

תצליחי,
חגית

אשמח לקרוא תגובה ממך

2 תגובות

כתיבת תגובה

עוד הדרכות על CSS

דילוג לתוכן