בלוג

איך ליצור
מעבר צבע?

איך לייצר אפקט מילוי מעבר צבע בטקסטים של הכותרות?
(שווה לעקוב עד הסוף. אח"כ נדגים את האפקט עם הנפשה "מבריקה"!) 
התוצאה יוצאת ככה:
 
 
כדי לייצר את האפקט – 
לא נתקין תוסף חדש. תוסף נוסף מוסיף הכבדה נוספת לאתר, והרבה פעמים גם מאט אותו.
אנחנו נעשה משהו הרבה יותר יעיל – 
נוסיף קוד CSS!
 
ההדרכה הזו מתאימה לכל אתרי האינטרנט, לא דווקא לאתרי וורדפרס.
בכל אתר יש את המקום שבו ניתן להוסיף קוד CSS.
אני אדגים על אתר וורדפרס, באתרים אחרים מוסיפים את הקוד במיקום של קוד ה CSS שלהם.
 
בפאנל ניהול של וורדפרס נכנס ל"עיצוב" -> "התאמה אישית":
 
 
 
 
 
נחפש את תפריט ה "CSS מותאם" (אצלי זה נמצא בתוך "General Settings"):
 
 
 
 
נקבל חלון שלתוכו ניתן להכניס קוד CSS:
 
 
 
 לתוך החלון הזה נקליד את קוד ה CSS הבא:
 
h1 {
 background: -webkit-linear-gradient(#eee, #333)!important;
 -webkit-background-clip: text!important;
 -webkit-text-fill-color: transparent!important;
}
 
 ככה זה נראה אצלי אחרי שהוספתי את קוד ה CSS:
 
 
 
 
נלחץ על  "פרסום".
 
זהו 🙂
אפשר לצפות בהנאה בתוצאה.
כותרות הדפים באתר מוצגים עם אפקט מעבר הצבע.
 
 
אם נרצה להחליט על הגוונים שיוצגו באפקט –
ניתן  להחליף את הגוונים שרשומים בקוד, בגוונים הרצויים:
 
 
 
אפשר לדגום מתוכנות גרפיות שונות (כמו למשל פוטושופ) את קוד הגוון הרצוי, ולהחליף בגוון שאני רשמתי בקוד.
 
 
הוספנו אפקט מעבר צבע לכותרות שבאתר.
מוצלח 🙂 אפשר להסתפק בזה.
אם נרצה משהו יותר "וואו" – אפשר גם להנפיש את האפקט!
בשביל להנפיש את האפקט, במקום קוד ה CSS שהזנו – נכניס את הקוד הבא:
 
h1 {
   background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-animation: hue 10s infinite linear;
}
@-webkit-keyframes hue {
 from {
   -webkit-filter: hue-rotate(0deg);
 }
 to {
   -webkit-filter: hue-rotate(-360deg);
 }
}
 
ככה הקוד נראה אצלי:
 
 
 
גם  כאן כמובן אפשר לשנות את הגוונים, במקום הגוונים שאני רשמתי:
 
 
נשמור (נפרסם) ונרוץ לצפות בתוצאה המרהיבה 🙂
אין מה לאמר – אפקט מבריק!
 
 
 

לפוסט הזה יש 6 תגובות

  1. Rivki הגב 20 יונ 2022

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

    1. appupgoco הגב 20 יונ 2022

      כדי שהאפקט יעבוד רק על הכותרת הספציפית הזו
      את צריכה ב CSS המותאם שלה
      במקום h1 לרשום selector h2
      הצלחות!

      1. Rivki הגב 23 יונ 2022

        תודה רבה!
        הצלחתי,

        1. appupgoco הגב 31 יול 2022

          איזה כיף!
          מוזמנת לשתף בקישור לתוצאה 🙂

  2. שרי הגב 31 יול 2022

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

    1. appupgoco הגב 31 יול 2022

      הכיף שלי 🙂
      תראי בקוד שלי –
      מוגדרים שם 2 גוונים
      (הם עם גרדיאנט, אז הם מתחלפים בהדרגה. אולי זה נותן הרגשה של יותר גוונים)
      כל גוון מתחיל ב # – את מוצאת?
      אפשר להחליף כל אחד מהגוונים,
      וככה את מחליפה את כל הגוונים – ולא רק אחד.
      הצלחות!
      תשתפי איך יצא

כתיבת תגובה

אולי תאהבי גם:

אם הדשא של השני ירוק יותר – אולי הגיע הזמן לעבוד גם על הגינה שלך?

אם הדשא של השני ירוק יותר – אולי הגיע הזמן לעבוד גם על הגינה שלך? קראתי את המשפט הזה אהבתי והוא הלך איתי כשזרמתי עם הצבעוניות המדברת הזו

קראי עוד

קבלי – מזכירה אוטומטית לשירותך!

קבלי ת'גימיק: המזכירה האוטומטית – לשירות הלקוח שלך! הלקוח מדבר לעצמו והטקסט נכתב אוטומטית ישירות לטופס!

קראי עוד

ירושלים ב 360 מעלות, גאולה בקרוב אמן!! ככה תעשי את זה גם אצלך —

הטלטלות שאנחנו חווים כאן זה משהו שנראה לי קיים רק בדור משיח. ברוח השעה - הדרכה מדהימה וקלה ליישום

קראי עוד