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

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

شرح 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.5background-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 صور بداخل صورة واحدة وبالتالي نقوم باستدعاء هذه الصورة مره واحدة فقط ونضع كل صورة في مكانها

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


Do not waste your time and start with us, now 😍