ב 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.
CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי.
::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות [...]
אני בטוח כי תמצאו המון שיטות ומקורות המראים כיצד ליצור טבלה רספונסיבית, חלקן טובות וחלקן פחות. בין שיטות אלו תמצאו טבלאות מתוחכמות הבנויות באמצעות CSS Grid, ואף טבלאות מאד פשוטות, שאינן יכולות להקרא טבלאות רספונסיביות מכיוון ואלו מציגות טבלה עם [...]
CSS Containment הוא מודול המתאר תכונת CSS יחידה הנקראית contain . תכונה זו מאפשרת לנו כמפתחים לבודד Subtree של אלמנט מסויים ב DOM ולהגדירו כעצמאי ונפרד משאר האלמנטים ב DOM. המטרה העיקרית של CSS Containment היא שיפור ביצועי הרינדור (rendering) [...]
flex-wrap היא תכונה ספציפית הקיימת במודול CSS flexbox. באמצעות תכונה זו ניתן לקבוע כיצד flex items יוצגו ויתנהגו ב flex container כשאין לרשותם מספיק מקום. התכונה flex-wrap אף מספקת לנו דרך מהירה להפוך flex container לרספונסיבי יותר, ולעיתים אף מסירה [...]
עם כניסת הספסיפיקציות CSS Scroll Snap, קיימת עבורינו המפתחים האפשרות לשלוט על התנהגות הגלילה של עמוד אינטרנטי (עד דרגה מסויימת בכל אופן), וזאת על ידי שימוש בסטנדרטים של הרשת וללא צורך להסתמך על ספריות חיצוניות כבדות.
לפי ויקיפדיה, מיזוג (או ״מצבי ערבוב״) בעריכת תמונות דיגיטליות וגרפיקה ממוחשבת משמש בכדי לקבוע כיצד שתי שכבות משתלבות זו בזו. במרבית היישומים מצב ברירת המחדל של מיזוג הוא פשוט להסתיר את השכבה התחתונה על ידי כיסוי של זו עם השכבה [...]
לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות. הרעיון מאחורי AOS הוא [...]
עיצוב פסי הגלילה (Scrollbars) של הדפדפן נראה כפופולרי לאחרונה ואני נתקל בלא מעט אתרים המעצבים זה בצורה שונה, כזו המתאימה לעיצוב הכללי ולמיתוג האתר שלהם. ישנם מספר דרכים לעצב פסי גלילה אלו, ובפוסט זה נראה כיצד לעשות זאת באמצעות CSS3. [...]