דפים עפים, צ’ק בוקס מעוצב ללא ספריה, חשיבות עיצוב מצב focus ועוד קישורי CSS

והפעם בפוסט קישורי ה-CSS יש גם משחקים שמלמדים וגם אפקטים יפים; גם סרטונים חביבים שמסבירים קונספים וגם דיונים עקרוניים. תהנו!

צ’ק בוקס מעוצב? מתברר שאפשר בלי ספריות ובלי כלום. פשוט עם מאפיין שבאופן מפתיע כל הדפדפנים תומכים (חוץ מ-IE11) בו למרות שהוא עם קידומת -webkit! באמת, ככה כתוב. ואמנם ב-caniuse כתוב שפיירפוקס צריך קידומת -moz, אבל מתברר שפיירפוקס תומך יופי בקידומת -webkit. וגר זאב עם כבש.

codepen שמראה layout-ים שונים.ה-layout-ים הם מגזיניים באופנים שונים, וממומשים באמצעות גריד.

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

אפקט חמוד של ביצה שבוקעת במעבר עכבר על איור של ביצה.

מי חשב שמצב של ::focus הוא כל כך חשוב? פתאום נהייתה לו עדנה עם הפוסטים והסרטון האלה: לפעמים לא חושבים על מצב פוקוס, ולפעמים אפילו מבטלים את העיצוב שלו, ובדיוק לשם כך נועד הפוסט הזה. הוא מתחיל מהסבר מדוע הפוקוס הוא מצב חשוב באינטרנט (לא רק למאותגרי נגישות), עובר לבעיות שיש בעיצוב הפוקוס, וממשיך בעיון בהתמודדות של אתרים גדולים עם המצב והעיצוב.המון מידע ותובנות על דבר שהוא אפילו לא ממש אלמנט: עיצוב מצב ה-focus וחשיבותו. סרטון של קצת יותר מ-10 דקות על החשיבות של עיצוב מצב ה-:focus, למה לא לעצב אותו כמו :hover, ואיך לעצב אותו כך שיועיל. אני לא יודעת מה הושפע ממה, אבל ב-CSS Tricks כתבו גם כן פוסט על פוקוס. וקריס פרננדי הפנה להרצאה של אריק ביילי בנושא. והנה גם סרטון קצר על עיצוב מצב יפה לפוקוס.

כמה אתרים שמלמדים מאפייני CSS בכיף: CSS Diner מלמד דברים בסיסיים כמו סלקטורים, CSS Animations מלמד אנימציות, CSS Grid Garden מלמד גריד.

דברים מעניינים ומגניבים שאפשר לעשות עם clip-path – אנימציות עם צורות, תפריט מעוגל, כפתור כיבוי/הדלקה. מה שנחמד פה זה שלכל אפקט יש גם סרטון של פחות מדקה שמסביר איך הוא עובד (זה בנוסף ל-codepen כמובן). ויש בפוסט קישורים לשני פוסטים קודמים בנושא.

קודפן שמראה איך לגרום לתמונת רקע להתפרס על פני כמה div-ים.

לכל דפדפן יש ערכי בררת מחדל משלו למאפייני CSS, ולא תמיד אנחנו זוכרים מה הם, ובטח שלא מה שייך לכל דפדפן. האתר הזה מראה את ערכי ברירות המחדל של דפדפנים שונים לאיזה אלמנט שנרצה. עם הפוסט הזה כדאי לקרוא גם את המאמר המכונן של אלעד שכטר על המילים השמורות Initial, Inherit, Revert ו-Unset. במאמר הזה הוא מזכיר שימוש בערכי בררת מחדל של דפדפנים, ולעומתם ערכי ההתחלה לפי הספציפיקציות (שזה שונה מהדפדפנים! הידעתם, למשל, שערך בררת המחדל של מאפיין ה-display של ה-div – לפי הדפדפנים הוא block ולפי הספציפיקציות הוא inline?!).