צללים
איך לעצב צללים אמינים – המאמר עוסק בכל הדרכים השונות שבהן אפשר להשתמש ב-box shadow ב-CSS כדי ליצור אפקטים מעניינים וייחודיים. המחבר מתחיל במעבר על היסודות של box shadow, כולל התחביר ומאפיינים שונים. משם, המאמר צולל לנושאים מתקדמים יותר, כגון יצירת צללים עם מספר צבעים או זוויות, שימוש בצללים ליצירת עומק ופרספקטיבה, ואפילו שימוש בצללים ליצירת אפקטים מעניינים של טקסט. הכותב מספק גם עצות וטריקים שימושיים לעבודה עם box shadow, כולל שימוש במשתני CSS כדי להקל על שינוי מאפייני צל בכל האתר. המאמר מלווה בשפע של דוגמאות מעשיות וקטעי קוד
הסבר על יצירת צללים – מדריך ה-CSS הזה מלמד איך לעצב צללים יפים על ידי שימוש ביחסים עקביים ומקור אור גלובלי. שכבות של צללים מרובים והתאמת הצבעים שלהם עם צבע הרקע יכולים גם ליצור אפקט ריאליסטי יותר. המדריך מספק קוד לדוגמה וכלי תכנותי בשם Shadow Palette Generator ליצירת צללים מלוכדים. המדריך גם דן בשאלה כיצד להתאים צללים למערכת עיצוב באמצעות React, styled-components ומשתני CSS. המחבר ממליץ על הקורס האינטראקטיבי המקיף שלהם, CSS למפתחי JavaScript, וכולל קטע בונוס על מאפיין הצללים.
ובאותו נושא, הינה מג’נרט צללים מעודנים
מסתרי ה-box-shadow – מאמר זה מספק הסבר מקיף על box shadow עבור מעצבים, תוך שהוא מתאר את חמשת המאפיינים של צל תיבה (X offset, Y offset, Blur-Radius, Spread ו-Color) ואת חשיבותם. המאמר משתמש במישורים כדי להסביר את הקשר בין קיזוז X ו-Y ומספק דוגמאות שונות כדי להדגים כיצד ערכים שונים משפיעים על מיקומו ועוביו של הצל. בנוסף, המאמר מציע כללים לשימוש ב-box shadow, כולל כלל 10% ואי שימוש בצללים צבעוניים בפריסה בשחור-לבן. המאמר מסתיים בדוגמאות מעשיות של שימוש בצללי קופסה במצבי כפתור, פוקוס לאובייקטים ועיצוב נוימורפיזם (קונספט שמוסבר במאמר הזה).
*
עיצוב טפסים עם color-accelerater -המאפיין החדש color-accelerater של CSS מקל על החלת צבעי מותג על שדות טפסים מסוימים בלי צורך בעיצוב מותאם אישית נרחב. הדפדפן קובע אוטומטית את הצבע הטוב ביותר עבור צ’ק בוקס כדי להבטיח ניגודיות צבע מספקת, וסכמת הצבעים יכולה לסייע בעיצוב אלמנטים של טפסים בהתאם להעדפת המשתמש למצב בהיר או כהה. המאפיין נתמך כרגע ב-Chrome וב-Edge וניתן להפעיל אותו ב-Firefox עם דגל, אך אין תמיכה ב-Safari כרגע.
עיצוב כפתורי רדיו וצ’ק בוקסים – ב-2017/2018, פרסם המחבר אוסף של פקדי טפסים מעוצבים נגישים, כולל צ’ק בוקסים ספציפיים ליצירת לחצני בחירה ותיבות סימון בהתאמה אישית. באותה תקופה, הדרך העיקרית לעיצוב פקדי טפסים הייתה להסתיר באופן חזותי את לחצן הבחירה או תיבת הסימון, ולאחר מכן ליצור מחדש את הפקדים באמצעות תווית או טווח ורכיבי ה-psuedo שלהם. עם זאת, מאז נפסקה התמיכה ב-Internet Explorer, ו-Edge הפך להיות מבוסס על Chromium, והיעלמות המוזרויות של Firefox, המגבלות הללו הוסרו במידה רבה. בעקבות כך, המחבר מראה איך לעצב ישירות את פקדי הטפסים, תוך הבאה בחשבון של מצבים שונים של הפקדים – מצב שבו הפקד סומן זה עתה, מצב פוקוס מותאם אישית, סגנון פוקוס של מצב מסומן, מצב מושבת, סגנון משמאל לימין ומימין לשמאל, שאילתות מדיה וכד’.
קטע קוד שבודק תפקוד של CSS – הארי רוברטס, יועץ ביצועי אינטרנט ומהנדס פרונט אנד, מציג את ct.css, קטע אבחון שעוזר לזהות צווארי בקבוק נפוצים בביצועים. הפוסט הוא ממש קצר, שתי דקות, אז אני ממליצה ממש שתלכו לקרוא אותו
בואו נשחק עם אנימציות – המאמר דן כיצד להשתמש בהנפשות CSS keyframe כדי ליצור רכיבים מונפשים. הוא מתחיל מהסבר בסיסי אבל ממשיך לטכניקות מורכבות של אנימציות מתחלפות, פונקציית steps(), ומסיים בהפניות לקריאה נוספת
איך לעשות אנימציה לגרדיאנט – רועי יוסף מראה איך להתמודד עם העובדה שאנימציה על גרדיאנטים בדרך כלל גורמת לזה שהמעבר בין מצב אחד לשני לא יהיה חלק אלא חד. הדרך שהוא מראה היא שימוש ב-psuedo elements יחד עם קביעת התכונה transform על השקיפות. מוזמנים לקרוא אצלו בבלוג
:has() – מאפיין הורה חדש – מפתחים מבקשים תכונת parent selector ב-CSS כבר יותר מ-10 שנים, אך חששות ביצועים מנעו את יישומו. עם זאת, שיפורים אחרונים במנועי עיבוד של דפדפנים מאפשרים את שקילת הבקשה. הפוסט מנתח את ה-spec המוקדם ומראה דרכים עוקפות בינתיים.
ובאותו נושא, הפוסט הזה מתייחס לסלקטור הזה בתור יותר מרק מאפיין הורה – הוא מאפשר לבחור אלמנט אם אחד מהסלקטורים הועבר כפרמטרים תואמים לפחות אלמנט אחד. הוא יכול לבחור אלמנט אב שיש לו ילדים מסוימים, כמו גם להתאים אלמנטים על סמך רכיבי הצאצא שלהם או הקשר שלהם לאלמנטים אחרים. הפוסט מראה גם איך :has() דומה ל-:is()
ויש לו פוליפיל שפשוט עובד – קריס קויר מ-CSS Tricks מספר ש-Chrome הוציאה polyfill לשאילתות container, שקל לשימוש ומתנהג כמו שצריך. הוא גם מוכן לשלב שבו כבר לא יצטרכו אותו, ויידע לא להטעין את עצמו.
*
בכתיבת הפוסט נעזרתי הפעם לא רק ב-ChatGPT אלא גם ב-Bard וב-Bertha. לא מצאתי יתרון לאחד מהכלים. גם Google Translate נשא עימם בנטל.
