Articles
מבוא ל-CSS
מאפייני CSS הקשורים לעיצוב מודל התיבה

מאפייני CSS הקשורים לעיצוב מודל התיבה

מאמר זה מסביר את מאפייני ה-CSS הקשורים לעיצוב מודל התיבה.

תוכלו ללמוד כיצד לכתוב מאפיינים כמו גבולות וצללים.

YouTube Video

HTML לתצוגה מקדימה

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

עיצוב

מאפיין border 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

מאפיין ה-border משמש ב-CSS כדי לקבוע את המסגרת של אלמנט. border מורכב משלושה אלמנטים: רוחב, סגנון וצבע, והם משולבים כדי לקבוע את המסגרת של האלמנט.

מבנה בסיסי של ה-border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • השתמשו ב-border-width כדי לציין את עובי המסגרת. יחידות נמדדות ב-px, em, %, וכדומה.

  • ציינו את סוג המסגרת באמצעות border-style. ניתן לציין את הערכים הבאים.

    • ערכי סגנון:
      • none (ללא מסגרת)
      • solid (קו רציף)
      • dotted (קו מנוקד)
      • dashed (קו מקווקו)
      • double (קו כפול)
      • groove (קו מחורץ)
      • ridge (קו מובלט)
      • inset (קו צל פנימי)
      • outset (קו צל חיצוני)

ציינו את צבע המסגרת באמצעות border-color. ניתן לציין צבע באמצעות שמות צבעים, rgb(), rgba(), hex, וכדומה.

הגדרות נפרדות לכל צד 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

אתה יכול גם להגדיר סגנונות שונים לכל צד כך.

הגדרות נפרדות עבור רוחב, סגנון וצבע 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

תוכל גם להגדיר כל מאפיין בנפרד באמצעות border-width, border-style, ו-border-color.

שילוב עם border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

על ידי שימוש במאפיין border-radius, ניתן לעגל את פינות המסגרת.

מאפיין border-radius 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

מאפיין ה-border-radius משמש לעיגול הפינות של אלמנט. ניתן לעגל בצורה חלקה את ארבעת הפינות של אלמנט HTML, ולהפוך מלבנים או ריבועים לעיצוב מעוגל.

הסבר:

  • המחלקה border-radius-all-rounded מעגלת את כל הפינות ב-20 פיקסלים, ויוצרת תיבה מעוגלת בצורה חלקה.
  • המחלקה border-radius-top-left-rounded מעגלת רק את הפינה השמאלית העליונה ב-20 פיקסלים, ושומרת על הפינות האחרות כמלבניות.
  • המחלקה border-radius-ellipse-corners יוצרת פינות אליפטיות, מה שמוביל לתיבה עם צורה מעוגלת שמתוחה אופקית.

הפורמט של מאפיין ה-border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • ערך מאפיין ה-border-radius בדרך כלל נקבע בפיקסלים או באחוזים. כמו כן, ניתן להגדיר ערכים מ-1 עד 4.
    • הגדרת ערך אחד מעגלת את כל הפינות באופן אחיד.
    • הגדרת שני ערכים מחילה את הערך הראשון על הפינות השמאלית העליונה והתחתונה הימנית, ואת הערך השני על הפינות הימנית העליונה והשמאלית התחתונה.
    • על ידי הגדרת ארבעה ערכים, ניתן לקבוע רדיוסים שונים עבור כל פינה. הערכים מוחלים בכיוון השעון מפינה שמאלית עליונה.
  • ניתן גם להגדיר בנפרד כמו border-top-left-radius.
1border-radius: 50px / 25px;
  • מאפיין ה-border-radius יכול גם להגדיר רדיוסים אנכיים ואופקיים בנפרד כדי ליצור פינות אליפטיות. במקרה זה, יש להפריד עם /.
    • לדוגמה, הגדרת 50px / 25px יוצרת רדיוס אופקי של 50 פיקסלים ורדיוס אנכי של 25 פיקסלים.

סיכום

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

מאפיין outline 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

מאפיין ה-outline הוא מאפיין CSS המשמש לקביעת הקו הנמשך סביב אלמנט.

ה-outline דומה ל-border, אך ישנם הבדלים בנקודות הבאות:.

  • ה-outline אינו משפיע על מודל התיבה של האלמנט, ולכן אינו משפיע על עיצוב האלמנט.
  • מכיוון שה-outline נמשך מחוץ לאלמנט, הוא מופיע מחוץ ל-border.
  • ה-border נמשך בתוך האלמנט ולכן הוא עשוי להשפיע על גודל ועיצוב האלמנט.

בדוגמה זו, מאפיין ה-outline מוגדר באופן הבא:.

  • המחלקה outline-solid קובעת מסגרת מלאה בעובי 2px בצבע אדום.
  • המחלקה outline-dashed קובעת מסגרת מקווקו בעובי 3px בצבע כחול.
  • המחלקה outline-double קובעת מסגרת כפולה בעובי 4px בצבע ירוק.
  • המחלקה outline-offset קובעת רווח של 10px בין המסגרת לאלמנט.

תחביר בסיסי 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • המאפיין outline-width מציין את עובי המסגרת.
  • ניתן לציין ערכים ספציפיים כמו thin, medium, thick, או ביחידות כמו px, em.
outline-style
  • המאפיין outline-style מציין את הסגנון של המסגרת.
  • ניתן לציין סגנונות כמו solid, dotted, dashed, double, groove, ridge, inset, outset, none וכו׳.
outline-color
  • המאפיין outline-color מציין את הצבע של המסגרת.
  • ניתן לציין כל צבע באמצעות שמות, HEX, RGB, וכו׳.
outline-offset
  • המאפיין outline-offset מציין את המרחק בין המסגרת לאלמנט.
  • ניתן לציין ערכים מדויקים ביחידות כמו px, em וכו׳.

מאפיין box-shadow 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

מאפיין ה-box-shadow משמש להוספת צללים לאלמנטים. באמצעות מאפיין זה, ניתן ליצור צללים סביב אלמנטים כדי להעניק תחושת ממדיות ועומק.

הסבר:

  • במחלקה box-shadow-basic-shadow, צל שחור מטושטש מוצג בפינה הימנית התחתונה של האלמנט.

  • במחלקה box-shadow-inset-shadow, צל מטושטש מוצג בתוך האלמנט. עם הצל שנכנס פנימה, ניתן להשיג עיצוב שקוע.

  • במחלקה box-shadow-multiple-shadow, שני צללים, שחור ואדום, מוחלים על האלמנט. מאחר שהם מוצגים במיקומים שונים, נוצר אפקט תלת-ממדי.

פורמט של מאפיין box-shadow 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
משמעות של כל ערך

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

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

הערך השלישי blur radius מגדיר את מידת הטשטוש וקובע עד כמה הצל מטושטש. ככל שהערך גדול יותר, הצל מתפשט יותר ונעשה מטושטש יותר. הגדרת ערך חיובי ממקמת את הצל מתחת, וערך שלילי ממקם אותו מעל. ערך זה הוא אופציונלי, והברירת מחדל היא 0, כלומר ללא טשטוש לצל.

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

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

ניתן גם להגדיר תחילה את מילת המפתח inset. הגדרת מילת המפתח inset מציירת את הצל בתוך האלמנט ולא מחוצה לו. ניתן גם להגדיר מספר צללים מופרדים באמצעות פסיקים.

דוגמה של box-shadow

דוגמה לצל בסיסי 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • ההיסט האופקי הוא 10px, מה שיוצר צל 10 פיקסלים ימינה.
  • ההיסט האנכי הוא 10px, מה שיוצר צל 10 פיקסלים למטה.
  • רדיוס הטשטוש הוא 5px, מה שמייצר טשטוש צל של 5 פיקסלים.
  • הצבע הוא rgba(0, 0, 0, 0.5), מה שיוצר שחור חצי-שקוף.
דוגמה לצל פנימי 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • שימוש ב-inset מצייר את הצל בתוך האלמנט.
דוגמה לצללים מרובים 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • אפשר גם להגדיר צללים מרובים המופרדים בפסיקים. בדוגמה זו, מוחלים שני צללים: צל שחור וצל אדום.

סיכום

  • box-shadow היא תכונה המשמשת להוספת צללים לאלמנטים כדי ליצור תחושת עומק.
  • על ידי שילוב של היסטים אופקיים ואנכיים, טשטוש, רדיוס התפשטות וצבע, ניתן להשיג מגוון אפקטים.
  • ניתן לצייר צללים פנימיים עם inset, וגם להגדיר צללים מרובים בו זמנית.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

מאפייני CSS הקשורים לרקעמאפייני CSS הקשורים לרשימות