מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים

מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים

במדריך זה נראה כיצד ניתן לשנות את הגדרות האובייקטים כך שלא יהיו נראים לעין, את השינויים נעשה ע"י הגדרת המאפיינים display או visibility.

בינוני 4,698 צפיות

מה תצטרך

  • CSS
  • עיצוב אתר
  • החבאת אלמנטים
  • hidden
  • visibility

שלבים

  1. 1

    שלב 1

    יש לנו 2 דרכים להפוך אובייקט מסוים לבלתי נראה, בעזרת שימוש בvisibility או בdisplay. בואו נתחיל משימוש בdisplay:
  2. 2

    שלב 2

    שלב 2
    h2.hide {display:none;} I can see this!

    I'm blind!

  3. 3

    שלב 3

    שלב 3
    הגדרנו שמאפיין הdisplay יקבל ערך none. ניתן לראות (או יותר נכון, לא לראות) שאלמנט הh2 (עם הקלאס hide) לא מופיע בדף האינטרנט שלנו. לעומתו, שימוש בvisibility הוא קצת אחר:
  4. 4

    שלב 4

    שלב 4
    h2.hide {visibility:hidden;} This is visible!

    Sssssshhhh, i'm hiding.

  5. 5

    שלב 5

    שלב 5
    פה, השתמשנו במאפיין הvisibility עם הערך hidden. בדומה לדוגמא הקודמת, גם כאן את הטקסט שבאלמנט הh2 עם הקלאס hide לא נוכל לראות, ההבדל היחיד הוא שבdisplay:none האלמנט לא תופס מקום.

מדריכים קשורים

מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)

מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)

המרווחים מפנים מקום סביב אלמנט מחוץ לגבולות אבל בתוך קו המתאר. המרווחים עוזרים לנו ליצור אזורים "נקיים" שבהם אין כלום. המרווח יכול להיות מעל, מתחת ומצידי האלמנט.

בינוני 5K צפיות
מדריך CSS מספר 13 - איך להשתמש בPadding

מדריך CSS מספר 13 - איך להשתמש בPadding

מאפיין הPadding "מרפד" את האלמנט ויוצר מרווח בין האלמנט לגבול שלו, בניגוד לmargins ממדריך מספר 12 שיוצר מרווח בין הגבול לקו מתאר שלו. הPadding נועד בכדי ליצור תבניות מסודרות עם מרווחים נקיים ומסודרים.

בינוני 5K צפיות
מדריך CSS מספר 15 - איך להשתמש בCSS float

מדריך CSS מספר 15 - איך להשתמש בCSS float

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

בינוני 5K צפיות
מדריך CSS מספר 16 - איך למקם אובייקטים בדף

מדריך CSS מספר 16 - איך למקם אובייקטים בדף

מדריך זה יסביר כיצד תוכלו למקם אלמנטים, בCSS אפשר למקם אלמנט ביחס למיקום המקורי שלו ,לשים אלמנטים אחד לפני השני, וכו'. במדריך זה נבין כיצד למקם אלמנטי HTML בקלות.

בינוני 8K צפיות
מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)

מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)

פסאודו קלאסים מאפשרים לנו להוסיף אפקטים מיוחדים לתגיות בלי להשתמש בשפת סקריפטים כמו Javascript. מדריך זה יסביר כיצד לעבוד עם פסאודו קלאסים (Pseudo-classes).

בינוני 6K צפיות

איך ליצור ציר זמן בפייזיקס (TIMELINE)

מדריך ליצירת ציר זמן בפייזיקס

קל 20K צפיות