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

חותמת זמן: 20 בספטמבר 2022 9:19
תמונה

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

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

מסתבר שזה אפשרי! הנה ההוכחה.

נתחיל מהתבנית הבסיסית:

<div></div>
div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

מה שנותן לנו רקע חוזר של ריבועים שעוברים מורוד לכחול איתם 5px פערים לבנים ביניהם. כל ריבוע הוא ברוחב של חמישים פיקסלים ושקוף. זה נוצר באמצעות repeating-linear-gradient, היוצרת תמונת מעבר ליניארי שבה ההדרגה חוזרת בכל האזור המכיל.

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

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

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
      <foreignObject width='35px' height='35px'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
      </foreignObject>
    </svg>"
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

בואו נפרק את זה. מילת המפתח הראשונה, repeat, מציין שזו תמונת רקע שחוזרת על עצמה. ואחריו זה המיקום והגודל של כל יחידה חוזרת, בהתאמה (left -17px top -22px/55px 55px). מיקום היסט זה מבוסס על גודל הגליף והתבנית. תראה להלן כיצד ניתן גודל הגליף. ההיסט מתווסף כדי למקם מחדש את הגליף החוזר בדיוק מעל כל צומת בתבנית המשובצת.

ל-SVG יש HTML <div> נושא את הגליף. שימו לב שהצהרתי על א font-size על זה. זה קובע בסופו של דבר את רדיוס הגבול של הריבועים בתבנית השחמט - ככל שהגליף גדול יותר, הריבועים מעוגלים יותר. ה-SVG שגולל מכתובת האתר של הנתונים נראה כך:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
  <foreignObject width='35px' height='35px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
  </foreignObject>
</svg>

כעת, לאחר שהוקמה דפוס CSS, בואו נוסיף א :hover אפקט שבו הגליף מוסר והקווים הלבנים נעשים שקופים מעט באמצעות שימוש rgb() ערכי צבע עם שקיפות אלפא.

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

הנה! עכשיו, לא רק שיש לנו את הפינות המעוגלות שלנו, אלא שיש לנו גם שליטה רבה יותר על הדפוס עבור אפקטים כמו זה:

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

בול זמן:

עוד מ טריקים של CSS