דברים מפתיעים שאפשר לעשות ב-CSS: להשתמש בתכני מאפייני האלמנט; לעשות גרדיאנטים לטקסט; ועוד.
יצרן גריד – אמנם בסיסי מאוד, אבל דווקא לשם כך הוא נועד – למי שמפחד להתחיל עם גריד.
קודם פגשתי את התרגיל החמוד הזה ב-codepen: בצד ימין מקבלים הגדרה של סלקטור, ובצד שמאל נמצא ה-HTML וצריך לסמן בו אילו אלמנטים יושפעו מההגדרה. אחרי כמה שבועות נתקלתי בפוסט הזה, שהמחברת שלו מלמדת CSS, ובפוסט היא מספרת שהלמידה אצלה מורכבת בעיקר מתרגילים ו”מגרשי שעשועים” (palygrounds) ומסבירה מה עומד מאחוריהם. היא משתפת כמה codepen-ים שהיא כתבה כתרגילים, והפלא ופלא – אחד מהם הוא התרגיל ההוא. עולם קטן.
סיפורו של כפתור – מתי כפתור הוא לא כפתור, ולמה. מאמר מעמיק ומשעשע מבית סמשינג מגזין. ופה מאמר מעמיק של CSS Tricks שמשווה בין כפתורים לקישורים – מתי להשתמש בכל אחד מהם, איך לעצב אותם, ענייני נגישות, ועוד אספקטים. ופוסט של אחמד שאדיד על עיצוב כפתור.
גלילה שמחליפה תוכן. codepen מקורי ומהמם.
אמנם אנחנו מכירים את :before ו-:after מימים ימימה, ובכל זאת אני מקשרת לפוסט שמסביר עליהם. קודם כל, מפני שהדימוי שהוא נותן להם הוא חמוד: הם כמו שני משרתים שמתלווים לכל הרפתקת עיצוב. ושנית, מפני שההסברים שלו יפים וברורים ומתאימים לכל רמה: הוא מתחיל מיישום פשוט מאוד, ומתקדם ליישומים יותר מורכבים ומעניינים.
אפקט חמוד במעבר עכבר: הפיכת גבולות לקו תחתון.
יש דרכים שונות להסתיר אלמנטים באמצעות css. הפוסט הזה עובר על הטכניקות השונות ומראה אילו מהן, וכיצד, יכולות להיות נגישות. מעניין מאוד!
איך לעשות fade-out על אלמנטים סמוכים במעבר עכבר.
איך לגרום לאלמנט לצאת מגבולות ההורה שלו, גם כשכמעט אין לנו שליטה על ההורה. פוסט ב-CSS-Tricks עם מגוון מתודות לשלל סיטואציות.
ועוד אחד מבית CSS Tricks איך להשתמש ב-grid כדי לסדר מידע.