يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢
شرح CSS background
سيتم شرح جميع الأكواد بالتفصيل في الفيديو الخاص بهذا الدرس لأن الأكواد الخاصة بتنسيق خلفية العنصر تحتاج الي تطبيق اكثر من الشرح النظري 😊
- 1
background-color: ***;
- وهنا تجد جميع القيم الخاصة بهذا الكود
- 2
background-image: url( );
- يُستخدم هذا الكود لعمل صورة خلفية لأي عنصر من عناصر ال HTML
وهنا يوجد سؤال مهم جداً وهو:ما الفرق بين<img />
وCSS background-image
؟؟
بص يا صاحبي 😃 لو انت عارف وظيفة ال HTML و وظيفة ال CSS ف انت اكيد عارف الإجابة 😊 صح ؟ 😊 بس انا هقولك عشان لو مش فاكر يا صديقى 🧡- هو ان الصورة بداخل عنصر ال
<img />
عبارة عن جزء من المُحتوي بمعني إنك لو حذفت هذه الصورة من الموقع فسوف يكون هناك جزء مفقود من المعلومات داخل الصفحة... مثال علي ذلك هذه الصورة المهمة - اما بالنسبة ل
CSS background-image
فهي تضيف شكل جمالي للصفحة فقط وبالتالي عند حذف هذه الصورة من الموقع فلن يكون هناك جزء مفقود من المعلومات التي بداخل الصفحة - تتميز خاصية ال
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 website Example
⚠ وهنا يجب التحدث عن موضوع مهم جدا وهو الــ CSS Image Sprites
CSS Image Sprites
أولاً هي الطريقة تستخدم لزيادة السرعة في الموقع اذا كان الموقع يحتوي على العديد من الصور
بإختصار الـــ Image Sprites هي عبارة عن طريقة لدمج مجموعة من الصور في صورة واحده.
مثال علي ذلك:
تخيل معي صفحة ويب تحتوي 5 صور وكل صورة تستغرق وقت للتحميل وبالتالي هذه الصفحة تستغرق وقتًا أطول للتحميل صح ؟ صح طبعا 😂
والحل: نقوم بدمج ال 5 صور بداخل صورة واحدة وبالتالي نقوم باستدعاء هذه الصورة مره واحدة فقط ونضع كل صورة في مكانها
وسيتم شرح ذلك بالتفصيل في الفيديو الخاص بهذا الدرس لأنه هذه الخاصية تحتاج الي شرح عملي أكثر من الكلام النظري 😉
وهذا الموقع سوف يساعدنا كثيرا علي ذلك