خاصية opacity

شرح خاصية الشفافية Opacity في لغة css

خاصية opacity

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

خاصية اليوم والتي تسمي خاصية opacity هي خاصية تحدد شفافية العناصر والنصوص ودرجة ظهور المحتوي او النص وللتوضيح اكثر هذا المثال :-

شرح خاصية opacity

هذه الصورة التي ترونها في الأعلي طبيعية تماما وهي صور المقالات في ويب تايمز بشكل عادي ، انظر أخيرا الي هذه الصورة :-

في الصورة التالية ستجد أن الصور ليس علي طبيعتها يبدو وكأنها تميل الي أنها تختفي مثلا , وهذا هو مافلعلناه ، القيمة الابتدائية لـ خاصية opacity هي 1.0 ولكن في الصورة الثانية قمنا بجعلها 0.5 ، وللتبسيط أكثر قمنا بوضع هذا الكود في الصور :-

opacity: 0.5;

كما قلنا في الأعلي القيمة الافتراضية للخاصيةopacity هي 1.0 ونحن قمنا بتقليل هذه القيمة الي النصف ، ماذا يحدث اذا جعلنا كود الشفافية او خاصية opacity صفر ؟ جرب وقم بوضع هذا الكود داخل عنصر معين :-

opacity:0;

بعد وضع هذا الكود ستجد أن العنصر اختفي نهائيا من الصفحة ، العنصر لم يحذف اطلاقا ولكنه فقط اختفي لانك جعلت الشفافية الخاصة به صفر فــــ بالتالي العنصر سيختفي .

/* غير شفاف */
opacity: 1;
opacity: 1.0;

/* نصف شفاف */
opacity: 0.5;

/* شفاف تمامًا */
opacity: 0;

هذه القيم العامة لـ خاصية الشفافية Opacity وللعلم ان خاصية الشفافية تطبق علي كل العناصر حتي المحتوي النصي

وايضا يمكنك وضع خاصية opacity في ال hover اي في مرور الماوس علي العناصر مثل هذا الكود :-

img.opacity {
  opacity: 1;
}
 
img.opacity:hover {
  opacity: 0.5;
}

الأمر بسيطا جدا في هذه الخاصية وتساعدك هذه الخاصية في وضع تاثيرات جيدا للعناصر وايضا اذا كنت تريد اخفاء شي معين فستساعد هذه الخاصية في ذلك .

اتمني ان يعجبكم مقال اليوم ولاتنسي الاطلاع علي شهادات الموقع واذا كان لديك اي سؤال نحن موجودين في أي وقت فقط ارسل تعليقك في صفحة اسألنا وسنقوم بالرد عليك فورا.

الصورة الافتراضية
ايهاب زين
مبرمج ومدون مصري حاصل علي شهادة المليون مبرمج عربي في تطوير المواقع وشهادة جوجل للتسويق الالكتروني , وحاصل علي شهادة في ال SEO من SEMRUSH ومنBlue Array Academy , احب التدوين في مجال التقنية و محركات البحث والبرمجة.
المقالات: 131

اترك ردّاً

خمسة × خمسة =