פסי רקע מונפשים שעוברים על ריחוף

באיזו תדירות להגיע ל-CSS background-size תכונה? אם אתה כמוני - וכנראה להרבה אנשים קדמיים אחרים - אז זה בדרך כלל כשאתה background-size: cover תמונה שתמלא את החלל של אלמנט שלם.

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

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

בואו נתחיל עם הגדרה בסיסית מאוד כדי שהדברים יהיו פשוטים. אני מדבר על סינגל

ב-HTML המעוצב כריבוע ירוק:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

הגדרת פסי הרקע

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

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

אז, --gt הערך הוא השיפוע ו --n הוא קבוע שבו אנו משתמשים כדי לדחוף את הפסים כלפי מטה כך שהם מוסטים אנכית. ואולי שמתם לב שלא הגדרתי שיפוע אמיתי, אלא פסים שחורים מוצקים ב- linear-gradient() פונקציה - זה בכוונה ונגיע למה שעשיתי את זה עוד מעט.

דבר נוסף שעלינו לעשות לפני שנמשיך הלאה הוא למנוע מהרקע שלנו לחזור על עצמו; אחרת, הם ירצפו וימלאו את כל החלל:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

יכולנו להגדיר background-repeat ב background קיצור, אבל החלטתי לפרק את זה כאן כדי שהדברים יהיו קלים לקריאה.

קיזוז הפסים

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

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

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

אם אתה משתמש באותם ערכים כמוני, תקבל את זה:

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

אה, הרבה יותר טוב!

הוספת מרווחים בין הפסים

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

אנחנו יכולים להמשיך להשתמש שלנו --n משתנה, אבל להפחית כמות קטנה, למשל 5pxבאמצעות calc() להשיג את מה שאנחנו רוצים.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

זה הרבה חזרות שאנחנו יכולים לבטל עם משתנה אחר:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

מיסוך ומיזוג

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

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

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

במיכל הורה חדש והצג שני

מתחת לזה:

אנחנו הולכים לעשות קצת מחדש CSS כאן. עכשיו, כשיש לנו מיכל הורה חדש, אנחנו יכולים להעביר את התיקון width ו height מאפיינים שהשתמשנו בהם

שם:

section {
  width: 500px;
  height: 500px;
} 

אני גם הולך להשתמש ב-CSS Grid כדי למקם את השניים

אלמנטים זה על גבי זה. זה אותו טריק שתמני עפיף משתמש כדי ליצור את שלו גלריות תמונות סופר מגניבות. הרעיון הוא שאנו מניחים את שני ה-divs על המיכל המלא באמצעות ה- grid-area נכס ויישר הכל לכיוון המרכז:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

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

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

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

תוך יישום כללי הסגנון מהראשון שלנו

על החדש, באמצעות :nth-child() בורר פסאודו:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

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

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

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

אפקט הריחוף

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

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

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

אנחנו נרצה לשנות את background-size של הפסים לכל רוחב המיכל תוך שמירה על אותו גובה:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

זה "מצמיד" את הרקע לרוחב מלא. אם נוסיף קצת transition לשם כך, אנו רואים את הפסים מתרחבים ברחף:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

הנה שוב ההדגמה האחרונה:

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

סיימנו!

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

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