בואו ניצור את האפקט המונפש של טקסט הדרגתי עם מאפיינים מותאמים אישית בהיקף וקליפ ברקע
עוברים ל-CodePen ויוצרים עט חדש.
יוצרים את תגי העיצוב לטקסט. נשתמש בכותרת עם המילה "מהירות":
<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-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) מאת ולדיסלב קלפין ב-UnFlood