עיקרון ההחסרה – והאפקט שבעקבותיו
אחת העובדות אצלנו
דיברה בצוות
על יצירתיות בעבודה.
זה לא בא בכלל רק
לגבי עיצוב יצירתי
אלא גם למשל –
בפיתרון בעיות.
חשיבה מחוץ לקופסא
מביאה אותנו לתוצאה
הרבה יותר פורצת דרך.
בלוג
איך לייצר אפקט מילוי מעבר צבע בטקסטים של הכותרות?
(שווה לעקוב עד הסוף. אח”כ נדגים את האפקט עם הנפשה “מבריקה”!)
התוצאה יוצאת ככה:
כדי לייצר את האפקט –
לא נתקין תוסף חדש. תוסף נוסף מוסיף הכבדה נוספת לאתר, והרבה פעמים גם מאט אותו.
אנחנו נעשה משהו הרבה יותר יעיל –
נוסיף קוד 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 תגובות
Rivki
20 יונ 2022יש אפשרות לעשות את הקוד החמוד הזה, גם לכותרת בודדת בעמוד? ולא רק לכל האתר?
כי ניסיתי להוסיף אותו רק לכותרת אחת בcss מותאם שלה, וזה לא הצליח.
אשמח לדעת איך זה כן אפשרי.
תודה רבה!
appupgoco
20 יונ 2022כדי שהאפקט יעבוד רק על הכותרת הספציפית הזו
את צריכה ב CSS המותאם שלה
במקום h1 לרשום selector h2
הצלחות!
Rivki
23 יונ 2022תודה רבה!
הצלחתי,
appupgoco
31 יול 2022איזה כיף!
מוזמנת לשתף בקישור לתוצאה 🙂
שרי
31 יול 2022תודה על ההדרכה המדהימה! והאתר המחכים! נהנית להיכנס לכאן כל פעם…
לא הבנתי איך בכותרת עם האפקט המונפש, אני מחליפה את כל הגוונים לצבע שאני רוצה ולא רק גוון אחד?
יש אפשרות כזו?
תודה!
appupgoco
31 יול 2022הכיף שלי 🙂
תראי בקוד שלי –
מוגדרים שם 2 גוונים
(הם עם גרדיאנט, אז הם מתחלפים בהדרגה. אולי זה נותן הרגשה של יותר גוונים)
כל גוון מתחיל ב # – את מוצאת?
אפשר להחליף כל אחד מהגוונים,
וככה את מחליפה את כל הגוונים – ולא רק אחד.
הצלחות!
תשתפי איך יצא