- ערוץ יוטיוב של איש בשם היידון פיקרינג עם סרטונים על יצירת ממשקים עתידיים. יש סרטונים על צורות מיוחדות, פריסה אלגורתימית, ועוד. מה שנחמד הוא שלכל סרטון יש תמלול, כך שמי שרק רוצה לרפרף ולא לראות סרטון שלם (אם כי רובם נמשכים באזור ה-6 דקות), יכול.
- קצת למתחילים אבל עדיין חמוד: codepen של רשימת הגדרות, ומתחת לכל הגדרה ציור של אלמנטים וסימון של האלמנטים שעליהם חלה ההגדרה. ואם אתם כבר יודעים הגדרות ורק רוצים לבחון את עצמכם, יש את אותו דבר פה, רק ש*אתם* צריכים לסמן.
- כתיבת אלגוריתמי CSS – המחבר מגדיר אלגוריתם CSS כ-“A well-defined declaration or set of declarations that produces a specific styling output.”. מדריך מפורט איך לבנות כזה. כתב גדול, דוגמאות, איורים – קריאה מעניינת מאוד.
- ישנו הפוסט המעולה של קריס קויר על מירכוז אלמנטים: לאן רוצים ליישר (אופקי או אנכי); האם האלמנט שאנחנו רוצים ליישר הוא inline או block; האם אנחנו יכולים ורוצים להשתמש בפלקסבוקס – ואז מקבלים קוד. לאחרונה פרסמה רייצ’ל אנדרו פוסט על יישורים באופן כללי. הפוסט הזה, בניגוד לזה של קריס, הוא לא רק קוד במתנה אלא הסברים מעמיקים, בעיקר על מאפייני ה-flex הרלוונטיים. הפוסט מסתיים ברשימת טיפים שעוזרים לזכור מתי להשתמש באיזו שיטה. לגזור ולשמור (את שני הפוסטים).
- אפקטים יפים של פרלקס ועומק בקלפים ב-codepen הזה.
- משתנים ב-CSS: המאמר הבא מדבר על הגדרת המשתנים ב-
:root, והעובדה שאולי לא תמיד כדאי לעשות את זה. המאמר מחולק ל-3: 1) למה מלכתחילה נהוג להגדיר את המשתנים ב-:root; 2) למה ה-scope הגלובלי לא מתאים לכל מצב; 3) איך להתגבר על התנגשות קלאסים עם משתנים מקומיים. המאמר מדגים את כל העניינים האלה ומלווה אותם בהסברים. מעניין מאוד. - Flexulator, מדמה פלקסבוקס – מכניסים ערכים למאפיינים שונים, ורואים את התוצאות מיד.
- נפלאות ה-display: בהתחלה היו לנו
display: blockו-dispaly: inline, אבל לאחרונה נוספו גםgridו-flex. איך הם משתלבים עםinlineו-block? רייצ’ל אנדרו מרחיבה בנושא בסמשינג מגזין. - עוד מסמשינג: מאמר מעניין ומקורי של אנדי קלארק על צורות ב-CSS. מעניין מאוד לראות מאיפה הוא מקבל את ההשראה, ואיך מיישמים את הדברים. ופוסט אחר על העמקה בצורות CSS. ועוד פוסט על צורות: צורות CSS – לא מה שציפיתן.
- האישה הזאת יוצרת אמנות באמצעות CSS בלבד, ואלה 5 המאפיינים שהיא הכי משתמשת בהם.
איזה אוסף מעולה!! תודה רבה לאה.
החכמתי מאוד – למדתי יותר על FLEX ו-GRID, הכרתי את nth-of-type שלא ידעתי עליו, ובמיוחד נפלה לי הלסת מעניין העימוד החדש בCSS בעזרת shape-outside. (רק שנזלה לי דמעה אחרי שהבנתי שאין תמיכה בIE11 עדיין. https://caniuse.com/#search=shape-outside )
איזה כיף, שמחתי לשמוע שיכולת ללמוד עוד דברים מהפוסט.
כן, nth-of-type הוא לא כזה נפוץ, אז שמחה שכעת הכרת אותו. ו-shape outside הוא ממש בשורה. מעניין אם הדורות הבאים יוכלו לדמיין את המצב שלנו לפני שהוא היה קיים, או שזה יהיה כמו שקשה לנו בימינו להיזכר איך הסתדרנו בלי דברים אחרים שיש לנו היום…
באמת מעניין…
האמת שnth-of-type חמוד מאוד, השאלה באיזה מצבים הוא יכול להיות שימושי באמת. יצא לך להשתמש בו בצורה שעזרה?
לי קצת קשה לדמיין איך האנושות חיה בלי חשמל. אבל בלי shape outside אני אצליח לחיות… בלי מחשב? לא יודע אם אצליח לשרוד.
יש מצב שהשתמשתי ב-nth-of-type, אבל בקושי זוכרת. זה בטח קרה כשלא היו קלאסים ב-html ולא היתה לי דרך אחרת לגשת לאלמנט כלשהו. אבל יכול להיות שאני ממציאה :-d.
ואתה צודק ש-shape outside הוא בהחלט לא כמו מחשב. אולי הוא יותר כמו flex…
נשמע הגיוני. עכשיו כשאת אומרת את זה נתת לי רעיון שימושי לאיך יכלתי להשתמש בזה כשלא היה לי גישה לDom בצורה נוחה באיזה פרוייקט… תודה.