شرح خاصية الشفافية Opacity في CSS 8
خاصية opacity البسيطة جداً تسمح لنا بالإشارة إلى مستوى الشفافية أو التعتيم للصفحة أو عنصر ما في صفحة الويب أي عندما نقوم بإستعمال القيمة 1 سوف يكون العنصر غير شفاف و بحالته الطبيعية, و هذا هو السلوك الإفتراضي, و عندما نقوم بإستعمال القيمة 0 سوف يكون العنصر شفاف, لذلك يتوجب إختيار القيمة بين 0 و 1 و بالتالي حينما نُعطي القيمة 0.6 سوف يكون العنصر معتم حتى المستوى 60٪ و هذا يمكننا الرؤية من خلاله.
يمكن استخدام خاصية opacity في CSS لتحكم في شفافية الصورة (أو أي عنصر آخر). تأخذ هذه الخاصية قيمة بين 0 و 1، حيث 0 يعني عدم الرؤية للعنصر و 1 يعني أن العنصر غير شفاف بأي شكل من الأشكال.
مثال
<body>
<article id="articleId">
<h2>موقع المبرمج التقني لتعليم البرمجة</h2>
<img src="prtech.png" />
</article>
</body>النتيجة ستكون بالشكل الآتي في المتصفح بدون إستخدام CSS.
و في ملف css يكون الكود بالشكل قبل البدء بكتابة اكواد الـ CSS نقوم بوضع id للوسم article مثلاً articleId و نبدأ بكتابة الأكواد
#articleId{
opacity: 0.4; /* يمكن تغيير القيمة بين 0 و 1 حسب الحاجة */
}ونتيجة المتصفح سوف تكون
كما نلاحظ أن الشفافية تعمل و إنخفضت, و كانت 0.4 هي نسبة الغموض يعني 40% و إذا كتبنا 0.9 يعني الغموض يكون 90% و إذا كتبناها 1 ستبقى كما هي أي 100% و إذا وضعناها 0 سوف يختفي كل شي لأن نسبة الغموض ستكون 0 أي لا يظهر شيئ. فإذا أردنا فقط على الصورة يحدث شفافية و لا يتم الغموض على الوسم article بالكامل, بنفس الطريقة نقوم بوضع id للصورة فقط و نقوم بالتحكم بالشفافية.
مثال
Add an image with your Focus Keyword as alt text.Add an image with your Focus Keyword as alt text.Add an image with your Focus Keyword as alt text.
سنقوم بوضع أيدي للصورة فقط مثلاً imageId و نكتب الأكواد بالشكل.
#imageId{
opacity: 0.3;
}عندما نقوم بفتحه في المتصفح سيكون.
كما نلاحظ أن الشفافية حصلت على الصورة فقط أم الكتابة في الوسم h لم تتأثر بشيئ.
ملاحظة
في حال قمت بتطبيق الخاصية opacity على عنصر ما من صفحة الويب فسوف تصبح جميع محتويات العنصر شفافة مثل الصور و عناصر أخرى في داخل هذا الوسم, و إURL is 76 characters long. Consider shortening it.
ذا كنت تريد تطبيق الخاصية opacity فقط جعل لون الخلفية شفاف فإستخدم تدوين RGBa بدلاً من ذلك.
استخدام خاصية الشفافية Opacity لتحكم في شفافية النصوص
نعم، يمكن استخدام خاصية opacity في CSS لتحكم في شفافية النصوص أيضًا، بالإضافة إلى الصور وأي عنصر آخر في صفحة الويب. يمكن تطبيق هذه الخاصية على عنصر النص عن طريق تحديد اسم العنصر في CSS وتعيين القيمة المناسبة لـ opacity.
الكود في html
<body>
<p>موقع المبرمج التقني لتعلم لغات البرمجة و امن المعلومات والشبكات <br>
حيث يتم شرح اساسيات لغة دارت و لغة جافا و لغات الويب و بايثون</p>
</body>على سبيل المثال، يمكن تطبيق شفافية على عنصر النص من خلال الكود التالي:
p {
opacity: 0.5; /* يمكن تغيير القيمة بين 0 و 1 حسب الحاجة */
}في هذا المثال، سيتم تطبيق شفافية بنسبة 50% على النص الموجود في عنصر الفقرة p. يمكن استخدام هذه الخاصية لتحقيق تأثيرات بصرية مختلفة، مثل تطبيق شفافية على خلفية الصفحة لإنشاء تأثيرات متداخلة ورائعة.
استخدام خاصية الشفافية Opacity لتحكم في أي عنصر في صفحة الويب
نعم، يمكن استخدام خاصية opacity في CSS لتحكم في شفافية أي عنصر آخر في صفحة الويب، بما في ذلك العناصر النصية والصور والأشكال وغيرها. يُمكن تحديد العنصر عن طريق استخدام محددات CSS المناسبة، مثل العنصر div أو span أو ul أو li، ومن ثم تعيين القيمة المناسبة لـ opacity.
على سبيل المثال، يمكن تطبيق شفافية على عنصر div بالكود التالي:
div {URL is 76 characters long. Consider shortening it.<br />
opacity: 0.5; /* يمكن تغيير القيمة بين 0 و 1 حسب الحاجة */
}في هذا المثال، سيتم تطبيق شفافية بنسبة 50% على جميع العناصر div في الصفحة. يمكن استخدام هذه الخاصية لإنشاء تأثيرات بصرية مختلفة، مثل تطبيق شفافية على خلفية الصفحة لإنشاء تأثيرات متداخلة ورائعة.
استخدام خاصية الشفافية Opacity لتطبيق شفافية على الأشكال
نعم، يمكن استخدام خاصية opacity في CSS لتطبيق شفافية على الأشكال، بما في ذلك الأشكال الهندسية مثل المربعات والدوائر والمستطيلات، وكذلك الخطوط والحواجز وغيرها من الأشكال.
يمكن تحديد الأشكال باستخدام محددات CSS المناسبة، مثل العنصر div أو span أو ul أو li، ومن ثم تعيين القيمة المناسبة لـ opacity.
على سبيل المثال، يمكن تطبيق شفافية على مستطيل بالكود التالي:
.rectangle {
opacity: 0.5; /* يمكن تغيير القيمة بين 0 و 1 حسب الحاجة */
background-color: blue;
width: 200px;
height: 100px;
}في هذا المثال، سيتم تطبيق شفافية بنسبة 50% على المستطيل الأزرق. يمكن استخدام هذه الخاصية لإنشاء تأثيرات بصرية مختلفة، مثل تطبيق شفافية على الأشكال لإنشاء تأثيرات متداخلة ورائعة.
