Articles
מבוא ל-CSS
תכונות CSS הקשורות לשקיפות

תכונות CSS הקשורות לשקיפות

מאמר זה מסביר את תכונות ה-CSS הקשורות לשקיפות.

ניתן ללמוד על השימוש והתחביר של תכונות opacity, z-index ו-clip-path.

YouTube Video

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

css-opacity.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-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

אפקטים של סינון

תכונת opacity 

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

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

תכונת opacity משפיעה לא רק על האלמנט עליו היא הוגדרה אלא גם על האלמנטים הצאצאים שלו. משמעות הדבר היא שאם אלמנט אב מוגדר להיות חצי-שקוף, האלמנטים הצאצאים שלו יירשו את השקיפות הזו.

בדוגמה זו, ההגדרות מוגדרות כך:.

  • כאשר הערך של תכונת opacity הוא 1, הפריט אטום לחלוטין, כמו כל אלמנט רגיל.

  • כאשר הערך של תכונת opacity הוא 0.5, הפריט הופך לחצי שקוף.

  • כאשר הערך של תכונת opacity הוא 0, הפריט הופך לשקוף לגמרי ואינו נראה בכלל.

  • תכונת transition מוגדרת כ־opacity, לכן כאשר סמן העכבר עובר מעל האלמנט, הוא נעלם בהדרגה והופך שקוף לחלוטין לאחר שתי שניות.

  • אם לאלמנט האב יש תכונת opacity בערך של 0.5, גם אלמנטים הבן יהפכו לחצי שקופים.

תכונת z-index 

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

תכונת z-index משמשת ב-CSS לשליטה על סדר הערימה של האלמנטים. תכונה זו קובעת האם אלמנט מסוים יופיע לפני או מאחורי אלמנטים אחרים.

  • בקופסה האדומה, הערך של z-index הוא 1, ולכן האלמנט מופיע לפני כל שאר האלמנטים.
  • בקופסה הכחולה, הערך של z-index הוא 0, ולכן האלמנט מופיע מאחורי הקופסה האדומה.
  • בקופסה הירוקה, הערך של z-index הוא 2, והיא מופיעה במיקום הקדמי ביותר.
  • בקופסה התכלת, מוקצה ערך z-index הגבוה ביותר - 4, אך מכיוון שלאלמנט האב יש ערך של 0, היא אינה מופיעה במיקום הקדמי ביותר.

מנגנון בסיסי

מאפיין z-index מקבל ערך מספרי, כאשר אלמנטים עם מספרים גבוהים יותר מוצגים לפני אלה עם מספרים קטנים יותר. כברירת מחדל, אלמנטים ללא z-index מוגדר נערמים לפי הסדר בו הם מופיעים ב-HTML.

עם זאת, כדי שמאפיין z-index יפעל, יש להגדיר את מאפיין position של האלמנט ל-relative, absolute, fixed, או sticky. אם המאפיין position הוא static, אז ל-z-index אין השפעה.

ערכים

  • אם הוגדר מספר שלם חיובי ל-z-index, האלמנט יוצג יותר קדימה. ככל שהמספר גדול יותר, כך האלמנט יוצג יותר לפני אלמנטים אחרים.

    • אם z-index מוגדר כ-0, הוא שומר על סדר הערימה המוגדר כברירת מחדל.
    • אם z-index מוגדר ל-1, האלמנט יוצג שכבה אחת לפני אלמנטים אחרים.

  • אם הוגדר מספר שלם שלילי ל-z-index, האלמנט יוצג יותר אחורה. ככל שהמספר קטן יותר, כך האלמנט יוצג יותר מאחורי אלמנטים אחרים.

    • אם z-index מוגדר ל--1, האלמנט יוצג שכבה אחת מאחורי אלמנטים אחרים.

הערות

  • הערך של z-index תלוי בערך z-index של אלמנט האב. כאשר לאלמנט האב יש z-index מוגדר, סדר הערימה היחסי בתוך אותו אלמנט אב מיושם. זה נקרא 'הקשר ערימה' או 'stacking context'. לכן, גם אם אלמנט ילד יש לו z-index גבוה, אם הערך של z-index של אלמנט האב נמוך, הוא לא יופיע לפני אלמנטים אחרים.

מאפיין clip-path

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

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

צורות חיתוך עיקריות

circle() 
1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() חותך אלמנט לצורה מעגלית. באפשרותך לשלוט בצורה על ידי ציון המרכז והרדיוס של המעגל.

  • ה-50% הראשון הוא רדיוס המעגל (כאחוז מרוחב או גובה האלמנט).
  • ה-at 50% 50% לאחר מכן הוא מיקום המרכז של המעגל (כאחוז מרוחב וגובה האלמנט).

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

ellipse() 
1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

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

  • ה-50% 30% הראשונים הם הרדיוסים של הרוחב והגובה.
  • ה-at 50% 50% לאחר מכן הוא מיקום המרכז של האליפסה.

בדוגמה זו, מוגדרת אליפסה שממוקמת במרכז האלמנט, עם רוחב של 50% וגובה של 30%.

polygon() 
1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() יוצר מצולע על ידי חיבור קבוצת קודקודים שנקבעה. כל קודקוד מוגדר עם קואורדינטות יחסיות בתוך האלמנט.

  • בדוגמה זו, נקבעו שלושה קודקודים (מרכז עליון, ימין תחתון, שמאל תחתון) והצורה נגזרת למשולש. polygon() הוא מאוד גמיש ויכול ליצור כל צורה.
inset() 
1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset() גוזר פנימה מהקצוות החיצוניים של אלמנט. יש להגדיר מלבן על ידי ציון המרחק מכל אחד מארבעת הצדדים.

  • ה-10% הוא המרחק מהקצה העליון.
  • ה-20% הוא המרחק מהקצה הימני.
  • ה-30% הוא המרחק מהקצה התחתון.
  • ה-40% הוא המרחק מהקצה השמאלי.

מפרט זה יוצר מלבן שמצטמצם בתוך האלמנט.

clip-path באמצעות SVG 

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

ה-clip-path של CSS יכול לשמש לא רק לצורות פרימיטיביות אלא גם לגזירת צורות מורכבות באמצעות אלמנט <clipPath> של SVG.

  • בדוגמה זו, מסלול חיתוך עגול שהוגדר ב־SVG עם מזהה myClip, מוחל על אלמנט HTML.

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

YouTube Video

תכונות `object-fit` ו-`object-position`תכונות CSS הקשורות לאפקטי פילטר