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

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

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

ניתן ללמוד על השימושים וכיצד לכתוב תכונות כמו filter ו-transform.

YouTube Video

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

css-effect.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-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(50px, 50px, 50px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156            </section>
157        </article>
158    </main>
159</body>
160</html>

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

תכונת filter 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

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

  • למחלקת filtered-image-sepia נוסף אפקט ספיה.
  • למחלקת filtered-image-opacity נוסף אפקט אטימות (opacity).
  • למחלקת filtered-image-multiple נוספו אפקטי בהירות, ניגודיות וספיה לתמונה.

תחביר בסיסי 

1filter: none | <filter-function> [<filter-function>]*;

בתכונת filter, ניתן לציין none או filter-function.

  • ציון הערך none לא יפעיל אפקטי פילטר.
  • יש לציין את הפונקציה הרצויה להחלה ב-<filter-function>. ניתן לציין מספר פילטרים על ידי הפרדתם עם רווחים.

סוגי פונקציות פילטר

blur() 
1filter: blur(5px);

הפונקציה blur() מוסיפה אפקט טשטוש.

  • הערך מצוין בפיקסלים (px), וככל שהערך גדול יותר כך דרגת הטשטוש חזקה יותר.
brightness() 
1filter: brightness(1.5);

הפונקציה brightness() משנה את הבהירות.

  • הערך מצוין בטווח שבין 0 (חשוך לחלוטין) לבין 1 (בהירות מקורית). ציון ערך הגבוה מ-1 יהפוך את האלמנט לבהיר יותר.
contrast() 
1filter: contrast(2);

הפונקציה contrast() משנה את הניגודיות.

  • הערך מצוין בטווח שבין 0 (גווני אפור) לבין 1 (ניגודיות מקורית), וערכים גבוהים מ-1 מגבירים את הניגודיות.
grayscale() 
1filter: grayscale(1);

הפונקציה grayscale() ממירה את האלמנט לגווני אפור.

  • הערך מוגדר בין 0 (צבע מקורי) ל-1 (מונו כרומטי מוחלט).
hue-rotate() 
1filter: hue-rotate(90deg);

הפונקציה hue-rotate() מסובבת את הגוון.

  • ערכים מוגדרים במעלות (deg) ומשנים את הצבע על ידי סיבוב הגוון. הגוון מסתובב בטווח שבין 0deg ל-360deg.
invert() 
1filter: invert(1);

הפונקציה invert() הופכת את הצבעים.

  • ערכים מוגדרים בין 0 (צבע מקורי) ל-1 (היפוך מוחלט).
opacity() 
1filter: opacity(0.5);

הפונקציה opacity() משנה את השקיפות של אלמנט.

  • ערכים מוגדרים בטווח שבין 0 (שקוף לחלוטין) ל-1 (אטום).
saturate() 
1filter: saturate(2);

הפונקציה saturate() מתאימה את הרוויה.

  • הערכים נעים בין 0 (מונוכרום) ל-1 (רוויה מקורית), וציון ערכים גבוהים מ-1 משפר את הרוויה.
sepia() 
1filter: sepia(1);

הפונקציה sepia() ממירה לטון ספיה.

  • ערכים מוגדרים בין 0 (צבע מקורי) ל-1 (גוון ספיה מלא).

יישום פילטרים מרובים 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

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

יתרונות השימוש במאפיין filter

מאפיין filter הוא כלי עוצמתי המאפשר ליצור אלמנטים מושכים מבחינה ויזואלית בקלות. יש לו את היתרונות הבאים:.

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

מאפיין transform 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

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

  • במחלקת transform-scale, ריחוף מעל האלמנט מגדיל את רוחבו פי 1.5 ואת גובהו פי 2.

  • במחלקת transform-skew, ריחוף מעל האלמנט מסובב אותו ב-30 מעלות בציר ה-X וב-20 מעלות בציר ה-Y.

  • במחלקת transform-rotate, ריחוף מעל האלמנט מסובב אותו ב-45 מעלות ומגדיל אותו פי 1.5.

תחביר בסיסי 

1transform: none | <transform-function> [<transform-function>]*;

תכונת transform מציינת או none או transform-function.

  • אם מצוין none, לא תתבצע שום טרנספורמציה.
  • ציינו את סוג הטרנספורמציה בעזרת <transform-function>. ניתן ליישם כמה טרנספורמציות על ידי הפרדתן ברווחים.

פונקציות הטרנספורמציה העיקריות

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • הפונקציה translate(x, y) מזיזה אלמנט לפי המרחקים שצוינו לאורך צירי ה-X וה-Y. ציינו את x ו-y באמצעות יחידות כמו px או %. ניתן גם לקבוע בנפרד באמצעות translateX() או translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • הפונקציה rotate(angle) מסובבת אלמנט לפי הזווית שצוינה במעלות (deg).
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • הפונקציה scale(x, y) משנה את קנה המידה של אלמנט לאורך צירי ה-X וה-Y. x ו-y הם גורמי קנה מידה יחסית לגודל המקורי. לדוגמה, scale(2, 2) יכפיל את הגודל. ניתן לציין בנפרד באמצעות scaleX() או scaleY().
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • הפונקציה skew(x-angle, y-angle) מטה אלמנט לפי הזוויות שצוינו לאורך צירי ה-X וה-Y. ניתן לציין בנפרד באמצעות skewX() או skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • הפונקציה matrix() מציינת מטריצה לשילוב מספר טרנספורמציות בבת אחת. בדרך כלל משתמשים בה בשילוב עם פונקציות טרנספורמציה אחרות.

פונקציות טרנספורמציה תלת-ממדיות

translate3d() 
1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;
  • הפונקציה translate3d() מבצעת העברה במרחב תלת-ממדי.
    • ניתן לציין אותה בשלושה ממדים: צירי X, Y ו-Z.
  • על ידי הגדרת המאפיין transform-style ל־preserve-3d והמאפיין perspective ל־600px, מוחל אפקט תנועה תלת־ממדי עם עומק על האלמנטים הצאצאים.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • הפונקציה rotate3d() מבצעת סיבוב במרחב תלת-ממדי.
    • היא מסובבת אלמנט ביחס לצירי X, Y ו-Z.

שילוב טרנספורמציות מרובות 

1transform: rotate(45deg) scale(1.5);

מאפיין ה-transform יכול להחיל מספר טרנספורמציות בו זמנית. לדוגמה, ניתן לשלב סיבוב ושינוי גודל.

נקודות מפתח לשימוש

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

  • מאפיין ה-transform מאפשר לבצע שינויים חזותיים באלמנטים ללא שינוי פריסת ה-DOM.
  • הוא מועיל במיוחד ליצירת אנימציות ואלמנטים אינטראקטיביים, ומאפשר עיצובים דינמיים כאשר הוא משולב עם transition או animation.

מאפיין transform-origin 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}

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

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

תחביר בסיסי 

1transform-origin: x y z;

בעבור מאפיין ה-transform-origin, מגדירים x, y, ו-z כך.

  • בעבור x, יש להגדיר את נקודת הייחוס על ציר ה-X (כיוון אופקי). ניתן להגדיר ערכים באמצעות מילות מפתח (left, center, right) או מידות (px, % וכדומה).
  • בעבור y, יש להגדיר את נקודת הייחוס על ציר ה-Y (כיוון אנכי). ניתן להגדיר ערכים באמצעות מילות מפתח (top, center, bottom) או מידות.
  • בעבור z, יש להגדיר את נקודת הייחוס על ציר ה-Z (כיוון עומק). ניתן להשתמש בו רק עם טרנספורמציות ב-3D. הוא אופציונלי, והברירת מחדל היא 0.

ערך ברירת מחדל 

1transform-origin: 50% 50%; /* Center of the element */

ערך ברירת המחדל למאפיין ה-transform-origin הוא מרכז האלמנט הן עבור ציר ה-X והן עבור ציר ה-Y. משמעות הדבר היא שהטרנספורמציות מתבצעות כברירת מחדל כאשר מרכז האלמנט הוא נקודת הייחוס.

איך לציין ערכים

ניתן להגדיר ערכים למאפיין ה-transform-origin באמצעות מילות מפתח, אחוזים, או מידות כמו px, em וכדומה.

  1. הגדרת מילות מפתח

    • left: קובע את נקודת ההתייחסות בציר ה-X לקצה השמאלי של האלמנט.
    • right: קובע את נקודת ההתייחסות בציר ה-X לקצה הימני של האלמנט.
    • top: קובע את נקודת ההתייחסות בציר ה-Y לקצה העליון של האלמנט.
    • bottom: קובע את נקודת ההתייחסות בציר ה-Y לקצה התחתון של האלמנט.
    • center: קובע את נקודת ההתייחסות בציר ה-X או ה-Y למרכז האלמנט.

  2. הגדרת אחוזים

    • 0%: מגדיר לקצה השמאלי או העליון.
    • 50%: מגדיר למרכז.
    • 100%: מגדיר לקצה הימני או התחתון.

  3. הגדרת אורך

    • ניתן לכוון את נקודת ההתייחסות בצורה מדויקת באמצעות יחידות אורך כמו px, em, וכו'.

transform-origin בהמרות תלת-ממד 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

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

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

YouTube Video

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