טיפ שירות CSS מהיר! טקסט הדרגתי עם אנימציה

נלמד איך ליצור את אפקט הטקסט המנופח עם שינוי הדרגתי באמצעות מאפיינים מותאמים אישית ברמת ההיקף ו-background-clip.

Jhey Tompkins

עוברים אל CodePen ויוצרים עט חדש.

יוצרים את הרכיבים של ה-Markup לטקסט. נשתמש בכותרת עם המילה 'מהיר':

<h1 class="boujee-text">Hello!</h1>

לאחר מכן, נוסיף ל-body background-color כהה יותר:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

מגדילים את font-size בטקסט שלנו. משתמשים ב-clamp כדי להפוך אותו לרספונסיבי:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

יוצרים שני מאפיינים מותאמים אישית לצבעים שבהם נשתמש. מחילים linear-gradient על background באמצעות הצבעים האלה וסובבים אותו ב-90 מעלות:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

יוצרים מאפיין מותאם אישית שאפשר להשתמש בו לגודל הרקע האופקי. אפשר להשתמש בה כדי background-size-x:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

כדי לחתוך את הרקע לטקסט, מגדירים את color כ-transparent ומגדירים את background-clip: text:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

הערה: בדפדפנים מסוימים, צריך להוסיף למאפיין background-clip את הקידומת -webkit-background-clip.

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

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

לאחר מכן מחילים את האנימציה באמצעות animation:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

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

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

סיימתי! 🎉 יצרתם טקסט עם שיפוע מונפש באמצעות CSS, באמצעות מאפיינים מותאמים אישית ברמת ההיקף ו-background-clip.

הנה הסרטון הקצר עם הטיפים האלה! ⚡️

רוצים לקבל את זה בפורמט של ציוץ? 🐦

המשך יום מצוין! ʕ •ᴥ•ʔ

התמונה הראשית (Hero) של Vladislav Klapin ב-Unsplash