בילינו את שני המאמרים האחרונים בסדרה בת שלושה חלקים זו במשחק עם מעברי צבע כדי ליצור קישוטי תמונה ממש מסודרים באמצעות רק outline תכונה. זה אולי נשמע מוזר כי אנחנו בדרך כלל משתמשים outline לצייר קו פשוט סביב אלמנט - בערך כמו border אבל הוא יכול לצייר רק את כל ארבעת הצדדים בבת אחת ואינו חלק מדגם התיבה.
עם זאת, אנחנו יכולים לעשות עם זה יותר, וזה מה שאני רוצה להתנסות בו במאמר זה.
סדרת קישוטי תמונה מהודרים
נתחיל עם הדוגמה הראשונה שלנו - שכבת-על שנעלמת עם ריחוף עם אנימציה מגניבה:
נוכל להשיג זאת על ידי הוספת אלמנט נוסף על התמונה, אבל זה מה שאנחנו מאתגרים את עצמנו לֹא לעשות בסדרה הזו. במקום זאת, נוכל להגיע ל-CSS outline נכס ומינוף שיכול להיות לו קיזוז שלילי והוא מסוגל לחפוף את האלמנט שלו.
img {
--s: 250px; /* the size of the image */
--b: 8px; /* the border thickness*/
--g: 14px; /* the gap */
--c: #4ECDC4;
width: var(--s);
aspect-ratio: 1;
outline: calc(var(--s) / 2) solid #0009;
outline-offset: calc(var(--s) / -2);
cursor: pointer;
transition: 0.3s;
}
img:hover {
outline: var(--b) solid var(--c);
outline-offset: var(--g);
}החוכמה היא ליצור outline זה עובי כמו חצי מגודל התמונה, ואז קיזז אותו בחצי מגודל התמונה עם ערך שלילי. הוסף קצת שקיפות למחצה עם הצבע ויש לנו את הכיסוי שלנו!
השאר זה מה שקורה :hover. אנו מעדכנים את outline והמעבר בין שני קווי המתאר יוצר את אפקט הריחוף המגניב. ניתן להשתמש באותה טכניקה גם כדי ליצור אפקט דהייה שבו אנחנו לא מזיזים את outline אבל לעשות את זה שקוף.
במקום להשתמש במחצית מגודל התמונה בתמונה זו, אני משתמש בגודל גדול מאוד outline ערך עובי (100vmax) תוך החלת מסכת CSS. עם זה, אין יותר צורך לדעת את גודל התמונה - זה טריק עובד בכל הגדלים!
אתה עלול להתמודד עם בעיות בשימוש 100vmax כערך גדול בספארי. אם זה המקרה, שקול את הטריק הקודם שבו אתה מחליף את 100vmax עם חצי מגודל התמונה.
אנחנו יכולים לקחת דברים אפילו רחוק יותר! לדוגמה, במקום פשוט לחתוך את התוספת outline, נוכל ליצור צורות ולהחיל אנימציית חשיפה מהודרת.
מגניב נכון? ה outline הוא מה שיוצר את שכבת העל הצהובה. ה clip-path מצמיד את התוספת outline כדי לקבל את צורת הכוכב. לאחר מכן, על ריחוף, אנו הופכים את הצבע לשקוף.
אה, אתה רוצה לבבות במקום? אנחנו בהחלט יכולים לעשות את זה!
דמיינו את כל השילובים האפשריים שאנחנו יכולים ליצור. כל שעלינו לעשות הוא לצייר צורה עם מסיכת CSS ו/או clip-path ולשלב אותו עם outline טריק. פתרון אחד, אינסוף אפשרויות!
וכן, אנחנו בהחלט יכולים להנפיש את זה גם כן. בואו לא נשכח את זה clip-path ניתן להנפשה ו mask מסתמך על מעברי צבע - משהו שכיסינו בפירוט מעולה בשני המאמרים הראשונים של הסדרה הזו.
אני יודע, האנימציה קצת תקועה. זה יותר הדגמה כדי להמחיש את הרעיון ולא את "המוצר הסופי" לשימוש באתר ייצור. היינו רוצים לייעל דברים למעבר טבעי יותר.
הנה הדגמה שמשתמשת mask במקום זאת. זה האחד שהקניתי אותך איתו בסוף המאמר האחרון:
האם ידעת כי outline רכוש היה מסוגל לכל כך הרבה מדהים? הוסף אותו לארגז הכלים שלך לקישוט תמונות מפואר!
שלבו את כל הדברים!
כעת, לאחר שלמדנו טריקים רבים באמצעות מעברי צבע, מסכות, גזירה ומתאר, הגיע הזמן לגמר הגדול. בואו נסיים את הסדרה הזו על ידי שילוב כל מה שלמדנו בשבועות האחרונים כדי להציג לא רק את הטכניקות, אלא להדגים עד כמה הגישות הללו גמישות ומודולריות.
אם היית רואה את ההדגמות האלה בפעם הראשונה, אתה עשוי להניח שיש חבורה של עטיפות divs נוספות ופסאודו-אלמנטים המשמשים כדי להוציא אותן. אבל הכל קורה ישירות על
גלישה את
ובכן, בחיי, תודה שהסתובבת איתי בסדרה בת שלושה חלקים בשבועות האחרונים. חקרנו שלל טכניקות שונות שהופכות תמונות פשוטות למשהו מושך את העין ואינטראקטיבי. האם תשתמש בכל מה שכיסינו? בוודאי שלא! אבל התקווה שלי היא שזה היה תרגיל טוב בשבילך לחפור בשימושים מתקדמים בתכונות CSS, כמו מעברי צבע, mask, clip-path, ו outline.
ועשינו הכל רק עם אחד
