כיצד לשנות באופן דינמי צבע תוך כדי גלילה עם CSS

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

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

הורד את קוד המתחיל

כדי לעקוב אחר הדרכה זו, הורד את קוד ההתחלה שלו מאגר GitHub למכונה המקומית שלך.

לִפְתוֹחַ index.html בדפדפן שאמור להיראות כמו הדף המוצג כאן:

דף HTML מכיל לוגו וארבעה חלקים. לכל חלק יש כותרת דמה ושלוש פסקאות של טקסט דמה. הטקסט של הלוגו הוא בצבע שחור זהה לרקע של החלק השני והרביעי. השפעה זו מגיעה מה- ילד ראשון (אפילו) לחסום פנימה styles.css, שמחיל את הרקע השחור על חלקים אחידים.

הפיכת הלוגו לדביק

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

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

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

@כְּלֵי תִקְשׁוֹרֶת(רוחב > 980 פיקסלים) {
.סֵמֶל { 
עמדה: דָבִיק; 
חלק עליון: .5 רמ; 
 }
}

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

הוספת מצב ערבוב לכותרת הדביקה שלך

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

@כְּלֵי תִקְשׁוֹרֶת(רוחב > 980 פיקסלים) { 
.סֵמֶל { 
עמדה: דָבִיק; 
חלק עליון: .5 רמ; 
מצב ערבוב: הֶבדֵל
 }
}

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

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

.סֵמֶל { 
צֶבַע: לבן; 
/* מאפייני CSS אחרים */
}

עכשיו הגדרת הכל בהצלחה. גלול למטה בעמוד ואל הרקע השחור. אתה תראה את הלוגו משתנה משחור ללבן.

ניתן לעבוד גם עם צבעים אחרים מלבד שחור ולבן. לדוגמה, אם היית משנה את הצבע של טקסט הלוגו שלך לצבע צהבהב (#008080), תקבל את הצבע הוורוד על רקע לבן. התמונה הבאה ממחישה זאת.

ברוב המקרים, תרצה שהאלמנט שלך יהיה לבן כדי לקבל את התוצאות הטובות ביותר. כמו כן, אם תגללו לראש, ייתכן שתמצאו את הלוגו שלכם חתוך לשניים. זה קורה בגלל שהלוגו קיים מחוץ ל- אֵלֵמֶנט. כדי להציג את הלוגו במלואו, עליך להגדיר את צבע הרקע של אלמנט ללבן.

שימוש בתמונה בתור לוגו במקום טקסט

הטכניקה הזו לא עובדת רק עם טקסט, אלא גם עם תמונות. כמובן, אתה צריך לוודא שאתה משתמש בתמונה לבנה בתור הלוגו. הדוגמה הבאה משתמשת בלוגו לבן של lorem ipsum שנמצא באותה תיקייה של index.html קוֹבֶץ:

<imgsrc="loremipsum-297.svg"alt="לוגו לורם איפסום">

התמונה המשמשת כאן היא SVG (Scalable Vector Graphic), סוג של קובץ וקטור.

כעת הצבע של תמונת הלוגו שלך יהיה שחור על רקע לבן כפי שמוצג בתמונה למטה.

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

אתה יכול גם להגדיל את גודל הלוגו על ידי החלפה גודל גופן עם גוֹבַה ו רוֹחַב בגוש CSS המכוון ללוגו. אחרי הכל, אתה עוסק כעת בתמונה ולא בטקסט.

.סֵמֶל {
צֶבַע: לבן;
רוֹחַב: 10rem;
/* מאפייני CSS אחרים */
}

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

.סֵמֶל {
צֶבַע: לבן;
רוֹחַב: 10rem;
מצב ערבוב: הֶבדֵל;
/* מאפייני CSS אחרים */
}

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

למידע נוסף על טיפים וטריקים של CSS

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

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