שבט

ללמוד מחדש CSS Layout, פוסט על Drop Caps, עיצוב קו תחתי, ועוד פוסטי CSS מרנינים

ללמוד מחדש CSS Layout – ספר על סוגים שונים של פריסה Layout ואיך ליצור אותם. הספר הוא בתשלום, אבל יש פרקים חינמיים, והם טובים ומעניינים ושווה להציץ בהם – למשל פרק על פריסה רב-עמודתית. ופפוסט קצר של עובדות מעניינות על מאחורי הקלעים של יצירת הספר.

פוסט מבית codyhouse על למה הם מעדיפים משתני CSS על פני SASS.

מי חשב שאפשר לכתוב פוסט ארוך על Drop Caps – מצב שבו מגדילים את האות הראשונה של פיסקה? אז הנה, מישהו עשה את זה, ואף עשה את זה מעניין. הפוסט מספר על בעיה עיצובית שהיתה בהגדרת Drop Caps בחברה – האותיות לא נראו אותו דבר בכל הדפדפנים. הפוסט מסביר מה נעשה כדי לתקן את זה, למה זה לא הספיק, ומה יכול לעזור בעתיד. הם גם מתמודדים עם בעיית נגישות שעולה בעיצוב כזה. קריאה מעניינת מאוד.

איך ליצור עימוד masonry (עימוד כמו של תמונות בפינטרסט) באמצעות פלקסבוקס, nth-child ו-order. מדריך מפורט איך לעשות את זה.

פוסט בסמשינג מגזין שמתאר את היחס בין משתני CSS ל-cascade של CSS. הוא מתחיל עם יסודות של CSS, ובדבר שאף פעם לא שמתי לב אליו – שמידת קרבה בין אלמנטים לא משפיעה על החלה של CSS. אני יודעת שהמשפט הזה לא ברור, אבל אין לי איך להסביר אותו בלי דוגמה, ואם כך – כדאי לכם כבר פשוט לקרוא את הפוסט עצמו. המחברת ממשיכה ומסבירה את ההשלכה של זה על משתנים, והכול עם הסברים ודוגמאות. מעניין מאוד.

עוד פוסט של סמשינג: אופטימיזציות מעניינות לגופני גוגל – למשל הסתמכות על הקש של הדפדפן, איחוד Request-ים, אפילו אחסון הגופן באופן מקומי.

ואחרון מבית סמשינג – מאמר ארוך, מפורט ומושקע על אלמנטי הפסקאות ה-HTML ומתי להשתמש בכל אחד מהם.

תצוגת תכלית חמודה של אלמנטים שנכנסים למסך אחד אחרי השני בצורה מדורגת. ההופעה עצמה נעשית עם אנימציה, והפיכת ההופעה למדורגת היא הנושא של הפוסט – איך לעשות את זה כשמספר האלמנטים לא ידוע, ובלי להשתמש ב-JS. יצא יפה מאוד.

הטבלה המחזורית, עם CSS בלבד.

זוכרים שפעם או פעמיים דיברנו על עיצוב של קו תחתון? כי פעם היו צריכים למצוא לזה פתרונות עוקפים. אבל עכשיו עומד להגיע פיצ’ר חדש ל-CSS שמאפשר לעצב את הקו התחתון ישירות: פה יש פוסט בטוויטר עם הדגמות, ופה אותה אישה בסרטון יוטיב בנושא.

פוסט מעניין ומורכב של אנה טיודור. הכותרת שלו היא איך להגביל פסאודו-אלמנט ל-border-box של ההורה שלו, אבל קורים שם כל מיני דברים מעניינים אחרים: למשל, לא ידעתי שאפשר לכוון גרדיאנט שיופיע בחלק מסוים של ה-box (כמו border-box, padding-box ו-content-box); או למשל מיספור נחמד עם counter-ים (דיברנו על זה פעם). אבל החלק הבאמת מאתגר הוא מה שכתוב בכותרת, והפתרון של אנה הוא מתוחכם ומלא בחישובים. אני אוהבת כש-CSS מצריך תחכום.

דרכים שונות לגרום למילים ארוכות להתעטף סביב השורות ולעבור לשורה הבאה.

פוסט עם סיכומי שיחות, רשמים, וקישורים למצגות ולסרטונים, מתוך כנס CSS Day 2019.

תמונת סולם נשען על ערימת ספרים – www.freepik.com

כתבו תגובה

כתובת הדוא"ל שלכם לא תוצג.