خصائص CSS المتعلقة بتأثيرات الفلتر

Articles

تشرح هذه المقالة خصائص 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(100px, 50px, 30px)</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-left-top">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                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</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 تحتوي على تأثير شفافية مطبق۔
فئة 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 مرة وارتفاعه بمقدار مرتين۔
في فئة 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/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
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}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

تُستخدم خاصية 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 (اتجاه العمق)۔ يمكن استخدامها فقط مع التحولات ثلاثية الأبعاد۔ إنها اختيارية، والقيمة الافتراضية هي 0۔

القيمة الافتراضية

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

القيمة الافتراضية لخاصية transform-origin هي مركز العنصر لكل من المحورين X و Y۔ هذا يعني أنه بشكل افتراضي، يتم تنفيذ التحولات مع اعتبار مركز العنصر كنقطة مرجعية۔

كيفية تحديد القيم

يمكن تحديد القيم لخاصية transform-origin باستخدام الكلمات المفتاحية، النسب المئوية، الأطوال مثل px، em، إلخ۔

تحديد الكلمات المفتاحية
- left: يحدد مرجع المحور X إلى الحافة اليسرى للعنصر۔
- right: يحدد مرجع المحور X إلى الحافة اليمنى للعنصر۔
- top: يحدد مرجع المحور Y إلى الحافة العليا للعنصر۔
- bottom: يحدد مرجع المحور Y إلى الحافة السفلية للعنصر۔
- center: يحدد المرجع سواء لمحور X أو Y ليكون في مركز العنصر۔
تحديد بالنسبة المئوية
- 0%: يعينه إلى الحافة اليسرى أو العليا۔
- 50%: يعينه في المركز۔
- 100%: يعينه إلى الحافة اليمنى أو السفلية۔
تحديد الطول
- يمكنك ضبط نقطة المرجع بدقة باستخدام أطوال محددة مثل 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.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بالشفافية خصائص CSS المتعلقة بالرسوم المتحركة

خصائص CSS المتعلقة بتأثيرات الفلتر

YouTube Video

HTML للمعاينة

تأثيرات التصفية

خاصية filter

الصياغة الأساسية

أنواع وظائف الفلتر

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

تطبيق الفلاتر المتعددة

مزايا استخدام خاصية filter

خاصية transform

الصياغة الأساسية

وظائف التحويل الرئيسية

translate()

rotate()

scale()

skew()

matrix()

وظائف التحويل ثلاثية الأبعاد

translate3d()

rotate3d()

دمج تحولات متعددة

النقاط الرئيسية للاستخدام

خاصية transform-origin

الصياغة الأساسية

القيمة الافتراضية

كيفية تحديد القيم

transform-origin في التحويلات ثلاثية الأبعاد

YouTube Video

خاصية `filter`

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

مزايا استخدام خاصية `filter`

خاصية `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

خاصية `transform-origin`

`transform-origin` في التحويلات ثلاثية الأبعاد