חיפוש ]

פוסטים בנושא: CSS | עמוד 2

91 דוגמאות יפות של התכונה box-shadow ב CSS

התכונה box-shadow ב CSS מוסיפה אפקט של צל סביב המסגרת של אלמנט מסויים. ניתן להשתמש ביותר מאפקט אחד על כל אלמנט וזאת על ידי הפרדה בין אפקטים באמצעות פסיק (comma). התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X [...]

שימוש ב CSS Gap עם Flexbox

לעיתים תכופות אנו מעוניינים להוסיף ריווח בין האלמנטים במתווה שלנו (ו margins הם כבר לא התשובה). בפוסט זה נראה כיצד להוסיף ריווח בין flex items תוך שימוש ב gap, הלא היא הקיצור של התכונות row-gap & column-gap.

היחידה Fr ב CSS Grid

CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי.

עיצוב האות הראשונה ב CSS בעזרת first-letter::

::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות [...]

יצירת טבלה רספונסיבית באמצעות CSS

אני בטוח כי תמצאו המון שיטות ומקורות המראים כיצד ליצור טבלה רספונסיבית, חלקן טובות וחלקן פחות. בין שיטות אלו תמצאו טבלאות מתוחכמות הבנויות באמצעות CSS Grid, ואף טבלאות מאד פשוטות, שאינן יכולות להקרא טבלאות רספונסיביות מכיוון ואלו מציגות טבלה עם [...]

על CSS Containment ודרכים לאופטימיזציה ושיפור ביצועי רינדור

CSS Containment הוא מודול המתאר תכונת CSS יחידה הנקראית contain . תכונה זו מאפשרת לנו כמפתחים לבודד Subtree של אלמנט מסויים ב DOM ולהגדירו כעצמאי ונפרד משאר האלמנטים ב DOM. המטרה העיקרית של CSS Containment היא שיפור ביצועי הרינדור (rendering) [...]

מספר מילים על התכונה flex-wrap

flex-wrap היא תכונה ספציפית הקיימת במודול CSS flexbox. באמצעות תכונה זו ניתן לקבוע כיצד flex items יוצגו ויתנהגו ב flex container כשאין לרשותם מספיק מקום. התכונה flex-wrap אף מספקת לנו דרך מהירה להפוך flex container לרספונסיבי יותר, ולעיתים אף מסירה [...]

Scroll Snapping – שליטה בחווית הגלילה בעזרת CSS

עם כניסת הספסיפיקציות CSS Scroll Snap, קיימת עבורינו המפתחים האפשרות לשלוט על התנהגות הגלילה של עמוד אינטרנטי (עד דרגה מסויימת בכל אופן), וזאת על ידי שימוש בסטנדרטים של הרשת וללא צורך להסתמך על ספריות חיצוניות כבדות.

מבט על Blend Modes (מיזוג) ב- CSS

לפי ויקיפדיה,  מיזוג (או ״מצבי ערבוב״) בעריכת תמונות דיגיטליות וגרפיקה ממוחשבת משמש בכדי לקבוע כיצד שתי שכבות משתלבות זו בזו. במרבית היישומים מצב ברירת המחדל של מיזוג הוא פשוט להסתיר את השכבה התחתונה על ידי כיסוי של זו עם השכבה [...]

הוספת אנימציות CSS בגלילה באמצעות AOS

לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות. הרעיון מאחורי AOS הוא [...]

Savvy WordPress Development