✨ دليلك الشامل لخاصية Opacity في CSS: اجعل عناصر موقعك شفافة!

اليوم سنتعلم معاً واحدة من الخواص البصرية المميزة في CSS والتي يمكنها إضافة لمسات جمالية وتفاعلية رائعة لتصميماتك، وهي خاصية opacity أو الشفافية. تخيل أنك تريد جعل صورة باهتة قليلاً، أو إنشاء تأثير تغيير عند مرور الماوس فوق زر معين، كل هذا وأكثر أصبح سهلاً بفضل هذه الخاصية البسيطة والقوية.

ما هي خاصية Opacity؟ 🤔

ببساطة شديدة، خاصية opacity تتحكم في مدى شفافية أو وضوح عنصر HTML. تقبل الخاصية قيمة رقمية بين 0.0 و 1.0.

  • القيمة 1.0: تعني أن العنصر معتم تماماً (غير شفاف إطلاقاً). هذه هي القيمة الافتراضية لكل العناصر.
  • القيمة 0.0: تعني أن العنصر شفاف تماماً (غير مرئي).
  • القيمة 0.5: تعني أن العنصر نصف شفاف، حيث يمكنك رؤية الخلفية أو العناصر التي خلفه من خلاله.

فكر فيها مثل مؤشر الصوت أو السطوع على هاتفك، كلما قللت الرقم، قل الوضوح وزادت الشفافية! 📉

📝 كيفية استخدام خاصية Opacity: الشكل الأساسي

صيغة كتابة الخاصية بسيطة جداً. نحدد العنصر الذي نريد تطبيق الشفافية عليه، ثم نكتب الخاصية والقيمة المناسبة.

selector {
  opacity: value;
}

حيث selector هو مُحدد العنصر (مثل اسم الفئة أو المعرف)، و value هي القيمة الرقمية بين 0 و 1.

💡 أمثلة عملية مبسطة على خاصية Opacity

لنطبق ما تعلمناه على أمثلة واقعية وبسيطة.

المثال 1: جعل صورة شفافة جزئياً

لنفترض أن لدينا صورة ونريد جعلها شبه شفافة لخلق تأثير جمالي.

<!-- كود HTML -->
<img src="nature.jpg" class="transparent-img" alt="صورة طبيعة">

/* كود CSS */
.transparent-img {
  opacity: 0.7; /* تجعل الصورة شفافة بنسبة 30% */
}

النتيجة: ستظهر الصورة باهتة قليلاً، حيث يمكنك إدراك الخلفية من خلفها.

المثال 2: إنشاء تأثير عند مرور الماوس (Hover Effect)

من أكثر الاستخدامات شيوعاً لـ opacity هو إنشاء تأثير تفاعلي عند مرور مؤشر الماوس فوق الأزرار أو الروابط.

<button class="cool-btn">اضغط عليّ!</button>

.cool-btn {
  background-color: #4CAF50; /* لون أخضر */
  color: white;
  padding: 15px 30px;
  border: none;
  opacity: 1; /* غير شفاف في الحالة الطبيعية */
  transition: opacity 0.3s; /* لإضافة حركة سلسة للتغير */
}

.cool-btn:hover {
  opacity: 0.8; /* يصبح الزر شفافاً قليلاً عند المرور فوقه */
}

النتيجة: عندما تضع مؤشر الماوس فوق الزر، سيتلاشى قليلاً (يصبح شفافاً بنسبة 20%)، مما يعطي المستخدم إشارة بصرية تفاعلية أن الزر قابل للنقر. ✨

المثال 3: إخفاء عنصر تماماً (وليس حذفه!)

يمكننا استخدام القيمة 0 لإخفاء عنصر مع الاحتفاظ بمكانه في تخطيط الصفحة.

.hidden-message {
  opacity: 0; /* العنصر موجود ولكن غير مرئي */
}

ملاحظة مهمة: العنصر المخفي بـ opacity: 0; لا يزال موجوداً ومأخوذاً في الحسبان في تخطيط الصفحة، ويمكن التفاعل معه (مثل النقر) إذا لم نمنع ذلك بخواص أخرى.

⚠️ نقطة هامة يجب أن تنتبه لها!

عندما تطبق خاصية opacity على عنصر أب (مثل <div> يحتوي على نصوص وأزرار)، فإن خاصية الشفافية تتوارث وتطبق على جميع العناصر الأبناء الموجودة داخله. لا يمكنك جعل العنصر الأب شفافاً مع إبقاء أبنائه معتمين باستخدام opacity وحدها.

<div class="parent-box">
  <h3>عنوان داخل الصندوق</h3>
  <p>هذا النص سيكون شفافاً أيضاً!</p>
</div>

.parent-box {
  background-color: lightblue;
  opacity: 0.5; /* الشفافية ستطبق على الخلفية والنص معاً */
}