טבת

אפקט של כרטיסים שהופכים לערימה, יצרן אפקטי UI עדינים, עיצוב פסי גלילה, ועוד קישורי CSS

אפקט יפה של כרטיסים שהופכים לערימה: יש רשימה של כרטיסים אחד מתחת לשני, וכשגוללים, הכרטיסים הנמוכים יותר “עולים” ומכסים את הכרטיסים הקודמים, אבל לא עד הסוף, אלא יוצרים אפקט ערמה. CodyHouse מדריך איך לעשות את זה.

איך לעשות אנימציה של שינוי רוחב (רמז: לא לשנות את הרוחב אלא להשתמש ב-transform scale)

אנחנו מכירים סלקטורים מתקדמים, אבל הפוסט הזה בכל זאת חידש לי משהו: ב-nth-child, שימוש במספרים שליליים מאפשר להתחיל מהסוף.

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

הסבר מעמיק על יחידות viewport – מלבד vh ו-vw יש גם vmin ו-vmax. יש הסבר על מתי כדאי להשתמש ביחידות האלה, איך להשתמש בהם כדי ליצור sticky footer, איך לפרוץ את רוחב האלמנט המכיל ועוד הרבה מידע, כדרכו של אחמד שאדיד.

יצרן אפקטי UI עדינים: פינות עגולות, צל, וגרדיאנט.

קריס קויר כתב מדריך שלם ל-calc() – למה הוא נועד, למה הוא לא נועד (media-queries), ערבוב סוגי יחידות, השימוש באופרטורים (למשל כשמחלקים, הפרמטר הזה צריך להיות מספר חסר יחידות), חשיבות הרווח מסביב לאופרטור, calc מקונן, משחק עם צבעים, ובסוף יש מסיבת use-case.

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

עיצוב פסי גלילה: פוסט באנגלית ופוסט בעברית.

קודפן: איך ליצור רקע של נקודות רק עם אלמנט אחד וה-box-shadow שלו. וקודפן של יצרן רקעים כאלה.

יצרך קוד CSS די פשוט. רעיון חמוד.

כתבו תגובה

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