בקטגוריה זו תמצאו פוסטים ומדריכים הקשורים אך ורק ל CSS. בין אם מדובר בעיצוב כפתורים או יצירת פריסות מורכבות, כאן תמצאו את הכלים, הטיפים והטכניקות הדרושות לעיצוב רספונסיבי, יצירתי ויעיל יותר. תנו מבט!
פוסט אש •
כאדם שמנהל אתר המספק תוכן בשפות הנכתבות משמאל לימין (LTR) ומימין לשמאל (RTL), אני לא יכול לתאר עד כמה התרגשתי כשגיליתי את תכונות ה-CSS הלוגיות (בלעז CSS Logical Properties). השימוש ב Logical Properties שינה את הדרך שבה אני ניגש לעיצוב [...]
CSS היא שפה עוצמתית המאפשרת למפתחים לשלוט בנראות של עמודי אינטרנט. מבין התכונות השונות ש CSS מציעה, הפונקציה repeat בולטת במיוחד ומאפשרת ניהול יעיל של "דפוסים חוזרים" (repetitive patterns) עבור עימוד (layout) ועבור אלמנטים עיצוביים (design elements). הבנת הפונקציה repeat [...]
::marker הוא תכונה ב- CSS המאפשרת לעצב את הסימנים של פריטי רשימה (list-items). בין אם ברצונכם להתאים את המראה של כדורים ברשימה לא מסודרת (ul) או את המספור ברשימה מסודרת (ol), השימוש ב ::marker מעניק לכם את הגמישות לשפר את [...]
הפסאודו-קלאס :has ב-CSS הוא סלקטור מאד עוצמתי שהוצג בCSS Selectors Level 4. סלקטור זה מאפשר למפתחים להחיל עיצוב (CSS) על אלמנט בהתבסס על ננוכחות של צאצאיו או של אלמנטים קשורים אחרים, תכונה שנדרשה זמן רב ב-CSS יש לציין. מהו מאפיין [...]
מנקודת מבטי, ייתכן כי עבור עמודי דוקומנטציה, בלוגים ומאמרים יהיה זה נכון להבדיל בין קישורים פנימיים ליוצאים, זאת מכיוון ויכול להיות זה מתיש לקרוא מאמר מסויים כשלחיצה על קישור מוציאה אותך מהאתר לאתר אחר ללא ידיעתך, בטח ובטח במאמרים בהם [...]
אם אתם חווים בעיות עם התכונה position:sticky ב CSS, כלומר אם התכונה אינה עובדת לכם אז הסיבה היא בדרך כלל אחת מאלו: 1. לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה נתמכת בדפדפן שלכם...
המודול CSS Text Decoration Module Level 3 מספק לנו מספר דרכים חדשות לקִשּׁוּט ועִטּוּר טקסט בעמודים אינטרנטים, ותמיכת הדפדפנים לשמחתנו במודול זה היא די רחבה. תכונות ה CSS החדשות דוגמת text-decoration-thickness ו text-decoration-color יכולות לעזור בקִשּׁוּט ועִטּוּר טקסט וקווים תחתונים [...]
ב 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; [...]
התכונה box-shadow ב CSS מוסיפה אפקט של צל סביב המסגרת של אלמנט מסויים. ניתן להשתמש ביותר מאפקט אחד על כל אלמנט וזאת על ידי הפרדה בין אפקטים באמצעות פסיק (comma). התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X [...]
פוסט אש •
לעיתים תכופות אנו מעוניינים להוסיף ריווח בין האלמנטים במתווה שלנו (ו margins הם כבר לא התשובה). בפוסט זה נראה כיצד להוסיף ריווח בין flex items תוך שימוש ב gap, הלא היא הקיצור של התכונות row-gap & column-gap.
