دروس دورة CSS : شرح خاصية background-clip CSS3 xml html
بسم الله , الحمد لله
في الدرس السابق شرحنا خاصية الخلفية او background على هذا الرابط ( هنا )اما الليلة إن شاء الله نقوم بشرح خواص أخرى من هذه الخاصية وهي تنتمي الى CSS3
تعلمنا ايضاً في الدرس السابق كيف نقوم بإنشاء صفحة جديدة ونعطيها امتداد html من خلال برنامج المفكرة المتطورة ولمن لم يرى هذا الشرح فعليه بالدخول للرابط في اول سطر , والآن فلنبدأ درسنا على بركة الله.
خاصية شرحنا اليوم كالتالي
خاصية background-clip يتفرع منها ثلاثة أكواد هُما كالتاليbackground-clip
حسناً ما هي هذه الأكواد ؟؟ هي كالتاليbackground-clip: padding-box;
background-clip: border-box;
background-clip: content-box;
بالنسبة لهذا الكود padding -box فهو يقوم بجعل الخلفية سواء كانت صورة أو لون تغطي كل الجزء المطلوب إلا الأطراف وهذا مثال علي ذلك
ضع هذا الكود السابق في صفحة html واحفظها وجرب فتحها على المتصفح لتجدها كالتالي..<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
padding: 50px;
background-color :yellow;
background-clip: padding-box;
border: 10px dotted #92b901;
}
</style>
</head>
<body>
<div>
Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,
</div>
</body>
</html>
 |
| لاحظنا ان الخلفية جميعها تلونت بالاصفر إلا الأطراف والمسئول عن اللون الاصفر كمان نعلم background-color |
وبعد التجربة على صفحة html نجد الشكل كالتالي<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
padding: 50px;
background-color :yellow;
background-clip: border-box;
border: 10px dotted #92b901;
}
</style>
</head>
<body>
<div>
Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,
</div>
</body>
</html>
 |
| لاحظنا هنا أن الخلفية جميعها تلونت بما في ذلك الأطراف |
بعد وضعه في صفحة html وتطبيقه على المتصفح نجد المثال كالتالي ..<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
padding: 50px;
background-color :yellow;
background-clip: content-box;
border: 10px dotted #92b901;
}
</style>
</head>
<body>
<div>
Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,
</div>
</body>
</html>
 |
| لاحظنا أن الجزء المظلل فقط هو المحتوى عن الإطار الابيض الكبير ما بين المحتوى والإطار الأخضر مسئول عنه padding:50px |
يجب أن تعرف أن هناك يجب فهمها بالعربية حتى يتنسى لك الفهم أكثر وهي كالتالي ..
المحتوى = content
الحشوة او الجسم الداخلي = padding
الحدود = border
وبهذا ينتهي درسنا لهذه الليلة ,, نترككم في رعاية الله
التعليقات