خصائص 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، ولكن بما أن العنصر الأب لهz-indexبقيمة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محدد، يتم تطبيق ترتيب التكديس النسبي داخل ذلك العنصر الرئيسي.۔ يسمى هذا سياق التكديس.۔ لذلك، حتى إذا كان للعنصر الفرعي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%هي نصف قطر الدائرة (كنسبة مئوية من عرض أو ارتفاع العنصر)۔ - النسبة التالية
عند 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%هي أنصاف أقطار العرض والارتفاع۔ - النسبة التالية
عند 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}يمكن لـ CSS clip-path استخدام الأشكال الأولية وكذلك قص الأشكال المعقدة باستخدام عنصر SVG <clipPath>۔
- في هذا المثال، تم تطبيق مسار قص دائري معرف في SVG بمعرف
myClipعلى عنصر HTML۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔