CSS Nesting: מדריך מקיף עם דוגמאות
ניתן לומר ש- CSS Nesting הוא סוג של מהפכה באופן בו מפתחים כותבים CSS בכך שהוא מאפשר לכללי CSS לשקף ישירות את המבנה ההיררכי של HTML. לא רק שהשימוש ב CSS Nesting משפר את קריאות הקוד, אלא גם מאפשר תחזוקה [...]
פוסטים בנושא: CSS
בקטגוריה זו תמצאו פוסטים ומדריכים הקשורים אך ורק ל CSS. בין אם מדובר בעיצוב כפתורים או יצירת פריסות (layouts) מורכבות, כאן תמצאו את הכלים, הטיפים והטכניקות הדרושות לעיצוב רספונסיבי, יצירתי ויעיל יותר. תנו מבט!
התכונה text-wrap ב- CSS: הסבר על pretty ו balance
התכונה text-wrap ב- CSS מספקת דרך לשלוט באופן בו הטקסט נשבר בתוך קונטיינר. בעוד שבדרך כלל שבירת הטקסט מתבססת על חוקים בסיסיים, ערכים חדשים כמו pretty ו-balance מאפשרים אפשרויות מתקדמות יותר לטיפוגרפיה מאוזנת יותר. טקסט מרשימים ומאוזנים. בפוסט זה נבחן [...]
עבודה עם תכונות לוגיות (Logical Properties) ב- CSS
כאדם שמנהל אתר המספק תוכן בשפות הנכתבות משמאל לימין (LTR) ומימין לשמאל (RTL), אני לא יכול לתאר עד כמה התרגשתי כשגיליתי את תכונות ה-CSS הלוגיות (בלעז CSS Logical Properties). השימוש ב Logical Properties שינה את הדרך שבה אני ניגש לעיצוב [...]
מספר מילים על הפונקציה repeat ב CSS
CSS היא שפה עוצמתית המאפשרת למפתחים לשלוט בנראות של עמודי אינטרנט. מבין התכונות השונות ש CSS מציעה, הפונקציה repeat בולטת במיוחד ומאפשרת ניהול יעיל של "דפוסים חוזרים" (repetitive patterns) עבור עימוד (layout) ועבור אלמנטים עיצוביים (design elements). הבנת הפונקציה repeat [...]
מספר מילים על ה pseudo-element בשם ::marker
::marker הוא תכונה ב- CSS המאפשרת לעצב את הסימנים של פריטי רשימה (list-items). בין אם ברצונכם להתאים את המראה של כדורים ברשימה לא מסודרת (ul) או את המספור ברשימה מסודרת (ol), השימוש ב ::marker מעניק לכם את הגמישות לשפר את [...]
מספר מילים על התכונה has: ב-CSS
הפסאודו-קלאס :has ב-CSS הוא סלקטור מאד עוצמתי שהוצג ב CSS Selectors Level 4. סלקטור זה מאפשר למפתחים להחיל עיצוב (CSS) על אלמנט בהתבסס על ננוכחות של צאצאיו או של אלמנטים קשורים אחרים, תכונה שנדרשה זמן רב ב-CSS יש לציין. מהו [...]
הגדרת עיצוב שונה לקישורים יוצאים ב CSS
מנקודת מבטי, ייתכן כי עבור עמודי דוקומנטציה, בלוגים ומאמרים יהיה זה נכון להבדיל בין קישורים פנימיים ליוצאים, זאת מכיוון ויכול להיות זה מתיש לקרוא מאמר מסויים כשלחיצה על קישור מוציאה אותך מהאתר לאתר אחר ללא ידיעתך, בטח ובטח במאמרים בהם [...]
אז position:sticky לא עובד לכם? נסו את הפתרון הבא!
אם אתם חווים בעיות עם התכונה position:sticky ב CSS, כלומר אם התכונה אינה עובדת לכם אז הסיבה היא בדרך כלל אחת מאלו: 1. לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה נתמכת בדפדפן שלכם...
קסטומיזציה של underlines בעזרת text-decoration
המודול CSS Text Decoration Module Level 3 מספק לנו מספר דרכים חדשות לקִשּׁוּט ועִטּוּר טקסט בעמודים אינטרנטים, ותמיכת הדפדפנים לשמחתנו במודול זה היא די רחבה. תכונות ה CSS החדשות דוגמת text-decoration-thickness ו text-decoration-color יכולות לעזור בקִשּׁוּט ועִטּוּר טקסט וקווים תחתונים [...]
איך לבצע אנימציה (Transition) על Gradients?
ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה transition. במילים אחרות, ה transition הבא לא יעבוד: .gradient { min-height: 200px; background-image: linear-gradient( to right, hsl(49.68, 97.89%, 62.75%), hsl(200, 51.54%, 44.51%) ); transition: background-image 0.5s linear; [...]