ב-CSS Tricks יש אפקט חמוד של גרדיאנטים של טקסט בקישורים. הפוסט הזה מראה איך לעשות את זה, ומלבד זה הוא גם מתייחס לקו התחתון שאמור להיות לקישורים, האם ואיך אפשר לעשות גם אותו גרדיאנט. וכאן פוסט על ארבע דרכים לעשות את השינוי הזה עם אנימציה. וכאן דרך לצבוע את ה-background של פיסקה שורה אחרי שורה.
כרטיסים שבמעבר עכבר מתהפכים (מראים את הצד האחורי שלהם) כבר קיימים, אבל מה עושים כשכל צד מכיל כמות שונה של טקסט? הפוסט הזה מסמשינג מגזין נותן פתרון.
איך ליצור משולש משתבלל בלי הרבה אלמנטי HTML אלא רק עם CSS.
עיצוב אלכסונים ב-2020 – הפוסט מראה דרכים מודרניות ליצור אלכסונים: להשתמש ב-skew, להשתמש בפסאודו-אלמנט, לעשות padding, ולהשתמש במשתני CSS לשם כך.
עם התוסף הזה לדפדפן, מעבר עכבר על אלמנט מראה את תכונות ה-CSS שלו.
ווהו! סוף סוף פסאודו אלמנטים לפקדי טפסים!
לפתח קורות חיים אינטראקטיביים עם HTML ו-CSS.
שוליים שליליים פיטר-פול קוך כותב ספר על CSS והוא הגיע לפרק על שוליים (margin) וגילה שאין התייחסות מסודרת לשוליים שליליים, אז הוא כתב על זה פוסט.
ועדיין בעניין שוליים: פוסט שמסביר את חוקי השוליים המתמוטטים (collapsing margin).
סרטון קצר (10 דקות) שמדריך על עיצוב ניווט צדדי נפתח באנימציה ועוד אפקטים חביבים.
רעיון מדליק: אתר שמסביר סלקטורים! למשל, הכנסתי את הסלקטור הזה, .details-progress .details-name .fullPercentMipuy:before
וזה ההסבר שקיבלתי:
The before pseudo-element
… of an element with class fullPercentMipuy somewhere
… within an element with class details-name
… itself somewhere
… within an element with class details-progress.
כולל מד Specificity של 0.3.1.