⚠ تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

شرح CSS background

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

1 background-color: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
2 background-image: url( );
يُستخدم هذا الكود لعمل صورة خلفية لأي عنصر من عناصر ال HTML



وهنا يوجد سؤال مهم جداً وهو:

ما الفرق بين <img />   و   CSS background-image ؟؟

بص يا صاحبي 😃 لو انت عارف وظيفة ال HTML و وظيفة ال CSS ف انت اكيد عارف الإجابة 😊 صح ؟ 😊 بس انا هقولك عشان لو مش فاكر يا صديقى 🧡
  1. هو ان الصورة بداخل عنصر ال <img /> عبارة عن جزء من المُحتوي بمعني إنك لو حذفت هذه الصورة من الموقع فسوف يكون هناك جزء مفقود من المعلومات داخل الصفحة... مثال علي ذلك هذه الصورة المهمة
  2. اما بالنسبة ل CSS background-image فهي تضيف شكل جمالي للصفحة فقط وبالتالي عند حذف هذه الصورة من الموقع فلن يكون هناك جزء مفقود من المعلومات التي بداخل الصفحة
  3. تتميز خاصية ال CSS background-image بأنه يُمكن تغيير الصورة لصورة أخري بسلاسة و نعومة عند عمل hover عليها عن طريق خاصية ال transition
    مثال علي ذلك:
 
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  
    div{
    border: 5px solid red;
    height: 500px;
    background-image: url(/images/img1.png);
    transition: all 1s;
    background-repeat: no-repeat;
    }
 
    div:hover{ background-image: url(img1.png); }
 
</style>
</head>
 
<body>
  <div>      </div>
</body>
 
</html>
2.5 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
يُستخدم هذا الكود لعمل تدرج لوني للخلفية وتم شرح الــ linear-gradient بالتفصيل في الدرس رقم 3
3 background-repeat: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
4 background-position: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
5 background-size: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود

⚠ وهنا تجد مثال مُحترم علي جميع الأكواد التي بالأعلي 👆

⚠ وهنا يجب التحدث عن موضوع مهم جدا وهو الــ CSS Image Sprites

CSS Image Sprites

أولاً هي الطريقة تستخدم لزيادة السرعة في الموقع اذا كان الموقع يحتوي على العديد من الصور

بإختصار الـــ Image Sprites هي عبارة عن طريقة لدمج مجموعة من الصور في صورة واحده.


مثال علي ذلك:
تخيل معي صفحة ويب تحتوي 5 صور وكل صورة تستغرق وقت للتحميل وبالتالي هذه الصفحة تستغرق وقتًا أطول للتحميل صح ؟ صح طبعا 😂

والحل: نقوم بدمج ال 5 صور بداخل صورة واحدة وبالتالي نقوم باستدعاء هذه الصورة مره واحدة فقط ونضع كل صورة في مكانها

وسيتم شرح ذلك بالتفصيل في الفيديو الخاص بهذا الدرس لأنه هذه الخاصية تحتاج الي شرح عملي أكثر من الكلام النظري 😉
وهذا الموقع سوف يساعدنا كثيرا علي ذلك

😡
انت مشغل الـ AdBlock !!

خلى بالك يامعلم ✋ انا هكر جامد جداً وعرفت انك مشغل ال AdBlock ف ياريت تقفله بدل ما اولع فى ام الجهاز بتاعك ده 😡 😡