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

איך לייצר אפקט מילוי מעבר צבע בטקסטים של הכותרות?
(שווה לעקוב עד הסוף. אח"כ נדגים את האפקט עם הנפשה "מבריקה"!
התוצאה יוצאת ככה:
 
 
כדי לייצר את האפקט – 
לא נתקין תוסף חדש. תוסף נוסף מוסיף הכבדה נוספת לאתר, והרבה פעמים גם מאט אותו.
אנחנו נעשה משהו הרבה יותר יעיל – 
נוסיף קוד 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

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

    1. appupgoco

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

      1. Rivki

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

        1. appupgoco

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

  2. שרי

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

    1. appupgoco

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

כתיבת תגובה

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

הוא מלווה אותך בכל נתיבי הדיגיטל | הדרכה סופר יצירתית

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

הלו? אני שיחה אוטומטית מהאתר שלך!

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

גנבו לי ת'עכבר! ככה תעשי את זה מושלם

הפעם נדבר קצרצר ולעניין. עכבר שובר שגרה שגונב ת'הצגה.