לחברנו היקר רובין יש חיבור חדש בשם בשבח צללים. עכשיו, לפני שאתם קופצים לשם ומחפשים נאגטס על צללי קופסאות CSS, צללי טקסט ומסנני צללים... זה לא ש. זה מאמר על צילום ומה שרובין למד על מסירת צללים עם מצלמה.
אז למה לשתף את זה? כי זה מגניב לעזאזל שהוא עשה עמוד מכוון למאמר המוקדש למאמר אחד. ותלמד הרבה על CSS אם תפצח עליו DevTools:
- טכניקות מרכוז. שימו לב כיצד נעשה שימוש ברשת CSS ב-
<body>פשוט ל למרכז את החוברת. ואז רובין מגיע אליו שוב בכל אחד.frameשל החיבור לעשות את אותו הדבר עם התוכן. - תמונות רקע "מזוימות". רובין היה יכול לעשות הרבה עבודה עבור עצמו על ידי יצירת כיתת CSS עבור כל אחד מהם
.frameכדי לקבל את תמונות הרקע. במקום זאת, הוא משתמשobject-fit: coverעל HTML משולב<img>s כדי לשמור על יחס רוחב-גובה בזמן מילוי.frameמְכוֹלָה. (הוא בעצם נכתב על זה לפני.) זה בטוח חוסך הרבה CSS'ing, אבל זה גם מאפשר לו להשתמש בטקסט חלופי במידת הצורך. אני די תוהה אם א<figure>/<figcaption>המבנה יכול היה לעבוד כאן במקום, אבל אני בספק אם זה יספק יתרון נוסף למה שקורה. - ערימת הקשרים. הטבה נוספת של תמונות הרקע המזויפות האלה? הם משתמשים במיקום מוחלט שיוצר הקשר הערמה, המאפשר לרובין להגדיר א
z-index: 0על התמונות. בדרך זו, הטקסט נערם ישירות למעלה עםz-index: 1. שוב, CSS Grid מטפל בכל הריכוז כך שהדברים מיושרים יפה. - גלילה מצלמת. אני תמיד אהבה זה כשאני רואה גלילה של CSS מצפצפת בטבע. רובין בחרה יפה להשתמש בו כאן, מכיוון שהוא באמת נותן את כל חוויית הפיכת הדפים תוך כדי גלילה בין מסגרות. גלילה אופקית יכולה להיות מטריפה, אבל גם אלגנטית במיוחד כשהיא מבוצעת היטב כפי שהיא כאן, איך היא משפרת את עיצוב העמודים הצרים. אם אתה רוצה הסבר נחמד על איך הכל עובד, לרובין יש גם נכתב על הצמדת גלילה אופקית.
אם לא, רובין הוא סופר מצוין ושווה לקרוא כל דבר שהוא מפרסם, CSS ומעבר לכך.
