sevida arabic

دروس دورة CSS : شرح الخاصية background-color

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator tr_bq" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_5ZzwbhbJ-6dtCfl6fjZKsoYanTrRNNAzsf5g2a2KSM3mLAftqcaqwCHbaPe6ksXkEXT8tGHUzBaFjvjxdJejnGzLMrS-FDRBKmG966FVtsWCu76WhDgUzTSZlm6HEwfdHB9G4v2-73r/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_5ZzwbhbJ-6dtCfl6fjZKsoYanTrRNNAzsf5g2a2KSM3mLAftqcaqwCHbaPe6ksXkEXT8tGHUzBaFjvjxdJejnGzLMrS-FDRBKmG966FVtsWCu76WhDgUzTSZlm6HEwfdHB9G4v2-73r/s1600/MiniSoft.png" /></a></div><div dir="ltr" style="text-align: left;"><br /></div><div style="text-align: right;">بسم الله , الحمد لله </div><div style="text-align: right;">معنا اليوم خاصية من اسهل خواص تقنية CSS وهي background-color او لون الخلفية وهي تستخدم الألوان بأكثر من طريقة من خلال اسم اللون بالانجليزية مثل wihte يعني ابيض او FFFFFF# يعني ابيض او (rgb(255.255 يعني ابيض ايضاً.</div><div style="text-align: right;">وهذا مثال فقط ليس اكثر على امكانية كتابة الألوان بأكثر من طريقة. </div><div style="text-align: right;">- كتابة اسم اللون لا يعمل إلا إذا كُتب بالانجليزية مثال : wihte مع العلم أن هناك درجات من الألوان ليس لها اسماء فقط تكون ارقام واحرف او rgb.</div><div style="text-align: right;">- كتابة اللون على شكل احرف و ارقام يسمى hex او هكس و تكون هكذا :C0C0C0 #</div><div style="text-align: right;">- كتابة اللون من خلال الألوان الثلاثة RGB وهذه الثلاثة احرف هما اختصار للون الأحمر red و اللون الأخضر green و اللون الأزرق blue ودائماً يكتب هكذا : (rgb(0.0.0  داخل القوسين ثلاثة ارقام تفصلهم نقطة وكل نقطة يمكن تغييرها لتعطيك اللون المطلوب .</div><div style="text-align: right;">وتعتبر طريقة hex من افضل الطرق في الحصول على الألوان .</div><div style="text-align: right;">وهنا سوف نقوم باستخدام موقع رائع جداً وهو ( <a href="http://www.color-hex.com/" rel="nofollow" target="_blank">Color Hex</a> )  من خلاله تستطيع الحصول على اي لون واللون الواحد ستجد له معلومات كثيرة .. </div><div dir="ltr" style="text-align: left;"><br /></div><div style="text-align: right;">الآن بقى لنا أن نأخذ مثالاً حول استخدام هذه الخاصية .. افتح صفحة تكست فارغة اعطها الإمتداد html ثم الصق فيها هذا الكود</div><div dir="ltr" style="text-align: left;"><br /></div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br /><span style="color: #38761d;">background-color: rgb(0,128,0);</span><br />height:200px;<br />width:300px;<br />}<br /><span style="color: blue;">h1{</span><span style="color: blue;">background-color: #0000ff;</span>}<br /><span style="color: red;">p</span>{<span style="color: red;">background-color: red;</span>}<br /></style><br /></head><br /><body><br /><span style="color: #38761d;"><div></span><br /><span style="color: blue;"><h1>Mnin Software</h1></span><br /><span style="color: red;"><p>Programs & Web develober.</p></span><br /></div><br /></body><br /></html></blockquote><div style="text-align: right;">دعونا نقوم بتطبيق هذا الكود على المتصفح و سوف نفهم لماذا قُمت بتلوين هذه الأسطر</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" dir="ltr" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9VoFzvNC3Rq5eyKIT9QxxwJcmeWxwpPbzxwZldMEof0x0oZ08qDLgY_RA9v7RVgZRh74XoCOv6p4fdEAOOAnlpKI2ng9dQFZRrH5sBTJcfstv_bZqdEKMko8kLiLNmOGtLPdcIK0vdfQ/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9VoFzvNC3Rq5eyKIT9QxxwJcmeWxwpPbzxwZldMEof0x0oZ08qDLgY_RA9v7RVgZRh74XoCOv6p4fdEAOOAnlpKI2ng9dQFZRrH5sBTJcfstv_bZqdEKMko8kLiLNmOGtLPdcIK0vdfQ/s1600/1.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">هذا هو الكود بعد تطبيقه على المتصفح </td></tr></tbody></table><div style="text-align: right;">انظر للصورة بها نفس الألوان التي قُمت بتلوينها في الكود السابق وهذا يعني أن الكود هو ..</div><blockquote dir="ltr" style="text-align: left;"><span style="color: #38761d;">background-color: rgb(0,128,0);   لون خلفية الصندوق كاملاً</span><br /><span style="color: blue;">background-color: #0000ff;             لون خلفية العنوان</span><br /><span style="color: red;">background-color: red;                   لون خلفية الوصف</span></blockquote> انظر كيف تمت كتابة الألوان , وبهذا قد تعرفت على المزيد حول خاصية background-color<br /><br /><div style="text-align: center;">انتهى موضوعنا لهذا اليوم والى لقاءاً آخر إن شاء الله</div><div style="text-align: center;"><br /></div></div>

دروس دورة CSS : شرح الخاصية background-color

بسم الله , الحمد لله معنا اليوم خاصية من اسهل خواص تقنية CSS وهي background-color او لون الخلفية وهي تستخدم الألوان بأكثر من طريقة من خلال ...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background-repeat

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoylz1aNUdzziUH7b0QKO8pbUaAHAyzFFpwvBG3nzYMotXVIlws1xxGziCYmoc0KwS2JfMvbkqyV0aPDzrf5KBITM-wpGWAWvXxLiPO_sv_MduRrvNrJHCFbdiv_m1dTELPynkebMwvnP/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoylz1aNUdzziUH7b0QKO8pbUaAHAyzFFpwvBG3nzYMotXVIlws1xxGziCYmoc0KwS2JfMvbkqyV0aPDzrf5KBITM-wpGWAWvXxLiPO_sv_MduRrvNrJHCFbdiv_m1dTELPynkebMwvnP/s1600/MiniSoft.png" /></a></div><br /><br />اسعد الله اوقاتكم بكل خير<br />في دروسنا السابقة شرحنا الكثير حول خاصية background و اليوم معنا خاصية جديدة من هذه الخواص وهي بعنوان<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #bf9000;">background</span>-<span style="color: red;">repeat</span> </blockquote>تلك الخاصية التي تجعلنا نتحكم في تكرار الصورة التي نضعها في الخلفية سواء رأسياً او افقياً او حتى ملئ الصفحة كلها , بالاضافة<br />وهذا ما سوف نتناوله اليوم في درسنا هذا فكونوا معنا واعطونا انتباهكم ..<br />كود background-repeat ينقسم منه اربعة خواص وهما كالتالي..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat:<span style="color: red;"> repeat;      تكرار الصورة</span><br />background-repeat: <span style="color: orange;">no-repeat;   عدم تكرار الصورة</span><br />background-repeat: <span style="color: blue;">repeat-x;    تكرار الصورة افقياً</span><br />background-repeat:<span style="color: magenta;"> repeat-y;    تكرار الصورة رأسياً</span></blockquote><br />افتح صفحة text اعطيها الإمتداد html ثم ضع فيها هذا الكود :<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br /><span style="color: blue;">background-image:url(http://im31.gulfup.com/KCsoG.png);</span><br /><span style="color: red;">background-repeat:repeat;</span><br />border:2px solid #ccc;<br />width:260px;<br />padding:20px;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: #38761d;">div</span>><br />MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><br /><BR /><BR /><BR /><BR /><BR /><BR /><br /></div><br /></body><br /></html></blockquote>السطر الآزرق رابط الصورة , السطر الأحمر الخاصية التي نشرحها.<br />الآن قُم بحفظ الصفحة وافتحها على اي متصفح وسوف تجد التالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LAAtQ-OEtajzBnOGz_pOUx7kvi1utn-9RAe-jVguVu1XXxGbfFrfEjp7xzqH_Kv4KAu9qLxGsyla7oei7mACwZ3bj9OsciYou4pxoOqvxNZwsIaluEhy5JPQRyL0s70JjLdNuNRSorCP/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LAAtQ-OEtajzBnOGz_pOUx7kvi1utn-9RAe-jVguVu1XXxGbfFrfEjp7xzqH_Kv4KAu9qLxGsyla7oei7mACwZ3bj9OsciYou4pxoOqvxNZwsIaluEhy5JPQRyL0s70JjLdNuNRSorCP/s1600/1.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تكرار الصورة repeat</td></tr></tbody></table> هكذا تم تكرار الصورة بواسطة الكود background-repeat: repeat<br />وإذا أردنا أن نجعلها صورة واحدة فقط فاستبدل السطر الأحمر من الكود السابق بهذا الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat: <span style="color: red;">no-repeat</span>;</blockquote>لتبقى في المتصفح هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguI6yiEbXyyxxIbyDwFCr50FbrOW30k1vepUNg3yxxlPVHxXcSfhzRC_X187iL6vdhLCdepoTFw3jJlN64bzeOVXBX7nVs3cfqnEUygiOnCIx-zAZMZu-wyxJtsBvPJW4fSpk640_8lSMx/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguI6yiEbXyyxxIbyDwFCr50FbrOW30k1vepUNg3yxxlPVHxXcSfhzRC_X187iL6vdhLCdepoTFw3jJlN64bzeOVXBX7nVs3cfqnEUygiOnCIx-zAZMZu-wyxJtsBvPJW4fSpk640_8lSMx/s1600/2.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">عدم تكرار الصورة no-repeat</td></tr></tbody></table>اما إذا أحببنا أن نجعل الصورة متكررة افقياً فقط فسوف نستبدل السطر الأحمر من الكود السابق بهذا الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat:<span style="color: red;"> repeat-x</span>;</blockquote>لتبقى في المتصفح هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2f-T9-CZxiNmd8fNenVP3HWyBAwXrrV3Iv2rivY-e4Bx66f8ZKubA3DJqxWpGlLzljAxbJzI8IAS__-YBbHxv01ZKM_amCDHqP8Y_IlELmA2_x2xnSgXSwU-RUjwvoGY4HRUu02H9o259/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2f-T9-CZxiNmd8fNenVP3HWyBAwXrrV3Iv2rivY-e4Bx66f8ZKubA3DJqxWpGlLzljAxbJzI8IAS__-YBbHxv01ZKM_amCDHqP8Y_IlELmA2_x2xnSgXSwU-RUjwvoGY4HRUu02H9o259/s1600/3.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تكرار الصورة افقياً repeat-x</td></tr></tbody></table> و إذا أحببنا ان يتم التكرار رأسياً فسوف نستبدل السطر الأحمر من الكود السابق بهذا الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat: <span style="color: red;">repeat-y</span>;</blockquote> لتبقى في المتصفح هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbTvA_TXr8y0XTTi1InhRAEnnQgj-IpAUQyYtwNcBlsMEfeJs4IpZ_eHYjwnf3fp94QbOD2Ss6TYv1DNY-fb9zjkjEstuMnUzPs0h3kmz6aVeLDIzDaRz1wmNw5GDzUwtyE6vOEb1jUDPI/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbTvA_TXr8y0XTTi1InhRAEnnQgj-IpAUQyYtwNcBlsMEfeJs4IpZ_eHYjwnf3fp94QbOD2Ss6TYv1DNY-fb9zjkjEstuMnUzPs0h3kmz6aVeLDIzDaRz1wmNw5GDzUwtyE6vOEb1jUDPI/s1600/4.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تكرار الصورة رأسياً repeat-y</td></tr></tbody></table>وبهذا تتضح لنا امكانيات هذه الخاصية الجميلة ولكن مع كل هذا يمكنك التخصيص اكثر , فيمكنك جعل الصورة متكررة رأسياً في المنتصف تماماً او جعلها واحدة فقط في المنتصف تماماً او على اليمين او الشمال بواسطة الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-position: <span style="color: red;">center</span>;</blockquote> هذا الكود مشروح من ضمن دروس الدورة , فيمكنك استبدال <span style="color: red;">centet </span>بـ <span style="color: red;">left </span>او <span style="color: red;">right </span>كما الصورة التالية مثلاً<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3zLGF8sJf-NFkeC-Skn4wxOGd85SZOQLQQx0wMRomtBEoW6xhTt4L-UA7273BMsPcFloadta3_mZQtnkHsHbJBVBi5EhPb303dO5iTKebeIMeYabb2j9xz40uxVDR5pEmEnmtjsYfpat/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3zLGF8sJf-NFkeC-Skn4wxOGd85SZOQLQQx0wMRomtBEoW6xhTt4L-UA7273BMsPcFloadta3_mZQtnkHsHbJBVBi5EhPb303dO5iTKebeIMeYabb2j9xz40uxVDR5pEmEnmtjsYfpat/s1600/5.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">center & no-repeat</td></tr></tbody></table><br />وعليك أن تدرك ايضاً ان في لغة CSS الأكواد تكمل بعضها البعض وهذا ما سوف تدركه جيداً عندما تتعمق أكثر في هذه التقنية الأكثر من جميلة..<br /><br /><div style="text-align: center;">بهذا تم موضوعنا لهذا اليوم ,, في حفظ الله</div></div>

دروس دورة CSS : شرح الخاصية background-repeat

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

اقرأ المزيد

دروس دورة CSS : شرح خاصية background-size في CSS3

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixOd9c-AGZFESFqaxMKVS10a7MZhXPYM59Cy-_XedjV_Urx6z66O897xpASDJT-px9H-Miy3Hvoc2Yt9fXSAglxHASDdkyotHXZv2TEE9kz3mQ8KymxiB8iPaxDkV1A3hmcZd81oI2NC7y/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixOd9c-AGZFESFqaxMKVS10a7MZhXPYM59Cy-_XedjV_Urx6z66O897xpASDJT-px9H-Miy3Hvoc2Yt9fXSAglxHASDdkyotHXZv2TEE9kz3mQ8KymxiB8iPaxDkV1A3hmcZd81oI2NC7y/s1600/MiniSoft.png" title="دروس دورة CSS : شرح خاصية background-size في CSS3" /></a></div><br />السلام عليكم ..<br />اليوم إن شاء الله سوف نقوم بشرح خاصية جميلة جداً من خواص تقنية CSS3 وهي backgroungd-size او مقاس الخلفية .<br />في اولى دروسنا شرحنا كيفية عمل صفحة html تجريبية لنقوم بتطبيق ما نفعله على المتصفح ولمن لم يقوم بإنشاءها فليشاهد هذا الموضوع من ( <a href="http://minisoftwre.blogspot.com/2013/11/css-background.html" target="_blank">هنا </a>)<br /><br />كما ذكرنا شرحنا حول الخاصية ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #b45f06;">background</span>-<span style="color: red;">size</span></blockquote> وهي خاصبة من خلالها تستطيع التحكم في ابعاد اي صورة في الخلفية او في خلفية صفحة معينة ودعونا نقوم بمثال على ذلك.<br />افتح صفحة html و ضع فيها هذا الكود:<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br /><span style="color: blue;">background:url("http://im40.gulfup.com/gRLLH.png");</span><br /><span style="color: red;">background-size:200px 120px;</span><br /><span style="color: magenta;">background-repeat:no-repeat;</span><br /><span style="color: #bf9000;">background-position:center;</span><br />background-color:#D1FFFF;<br />border:5px dotted #0000FF;<br />width:267px;<br />padding:20px;<br />color:#111;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: #38761d;">div</span>><br />MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><BR /><BR /><BR /><BR /><br /></div><br /></body><br /></html></blockquote><span style="color: blue;">الصورة</span> , <span style="color: red;">الخاصية التي نشرحها </span>, <span style="color: magenta;">عدم تكرار الصورة </span>, <span style="color: #bf9000;">جعل الصورة في المنتصف تماماً</span><br /><span style="background-color: black; color: white;">ملاحظة هامة جداً </span>:<span style="color: #bf9000;"> </span><span style="color: red;">حتى يعمل كود قياس الصورة background-size لابد أن يكون وراء الصورة مباشرتاً كما بالكود السابق</span><br /> ثم احفظ الصفحة وافتحها على المتصفح لتجد التالي :<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzaSYE6Va1iHSODZEtyByWgXPLxFBZVVpukFo1evmTMkmnAcie6XIZvOxRbfJHvOcnSe0iiXP9cRdjDmxW5HXqBwFXp5taG_8hraxh5-I4gdM6F1j76EYzjkcEgKoZpAIJUzUCxdjkBU0/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzaSYE6Va1iHSODZEtyByWgXPLxFBZVVpukFo1evmTMkmnAcie6XIZvOxRbfJHvOcnSe0iiXP9cRdjDmxW5HXqBwFXp5taG_8hraxh5-I4gdM6F1j76EYzjkcEgKoZpAIJUzUCxdjkBU0/s1600/1.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">انظر الصورة !!<br />هذا هو حجمها الطبيعي والذي قُمت بتحديده من خلال الخاصية background-size</td></tr></tbody></table>جيد جداً , دعونا نقوم بتصغير الصورة قليلاً , ضع هذا الكود في الصفحة html و احفظها ثم افتحها على المتصفح ..<br /><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br />background:url("http://im40.gulfup.com/gRLLH.png");<br /><span style="color: red;">background-size:100px 60px;</span><br />background-repeat:no-repeat;<br />background-position:center;<br />background-color:#D1FFFF;<br />border:5px dotted #0000FF;<br />width:267px;<br />padding:20px;<br />color:#111;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: #38761d;">div</span>><br />MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><BR /><BR /><BR /><BR /><br /></div><br /></body><br /></html></blockquote> والان انظر للصورة ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPetTvY0KfoUhvtvOwK_H_cyVLtcEKUnr8cUO2s8n-DynJrXUCXokrOvasFEJCN4o-XAkwT9Ge7hsbYsOjbCyUd0wh9JSevl2DjnSkVM6BFbm5aUYD56yoXI8AF3Izdcbji8tRojJS-JW3/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPetTvY0KfoUhvtvOwK_H_cyVLtcEKUnr8cUO2s8n-DynJrXUCXokrOvasFEJCN4o-XAkwT9Ge7hsbYsOjbCyUd0wh9JSevl2DjnSkVM6BFbm5aUYD56yoXI8AF3Izdcbji8tRojJS-JW3/s1600/2.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تم تصغير الصورة التي في المنتتصف ,,</td></tr></tbody></table>كيف تم هذا ؟ كالتالي ..<br />الصورة اصلاة مقاسها 200 عرض × 120 ارتفاع , في الكود الأخير جعلناها 100 عرض × 60 ارتفاع ومن هنا نستنتج أن الكود هذا ,,<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-size:<span style="color: magenta;">100px</span> <span style="color: blue;">60px</span>;</blockquote>طالما يحتوي على رقمين وهما <span style="color: magenta;">100px</span> و<span style="color: magenta;"> </span><span style="color: blue;">60px</span> إذاً <span style="color: magenta;">فالرقم الأول هو العرض</span> , <span style="color: blue;">والرقم الآخير هو الإرتفاع</span> .<br />يمكنك ايضاً ان تجعل العرض مثل الإرتفاع وهذا بكتابة رقم واحد مثال الكود التالي ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-size:<span style="color: magenta;">100px; </span></blockquote>هكذا اصبحت الصورة عرضها كارتفاعها .<br /><br /><div style="text-align: center;">هذا ما لدينا اليوم من شرح لهذه الخاصية الجميلة , وبهذا قد انتهى موضوعنا</div><div style="text-align: center;">نراكم على خير في شرح جديد والسلام عليكم </div></div>

دروس دورة CSS : شرح خاصية background-size في CSS3

السلام عليكم .. اليوم إن شاء الله سوف نقوم بشرح خاصية جميلة جداً من خواص تقنية CSS3 وهي backgroungd-size او مقاس الخلفية . في اولى دروسنا شر...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background-origin في CSS3

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJda2qHJlDi6IYSDo55vgU2G4DojHxIi_CyCqJDcrdmKsA_u78-CCbIKdxJhKw-tZ9kxKaaVNjBe_32c5RtnLJtr5ogwHaEm-3YmLdc1mYwmzEduyKMFfJ9tAaEa28_9mH381p6FL8fMuh/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJda2qHJlDi6IYSDo55vgU2G4DojHxIi_CyCqJDcrdmKsA_u78-CCbIKdxJhKw-tZ9kxKaaVNjBe_32c5RtnLJtr5ogwHaEm-3YmLdc1mYwmzEduyKMFfJ9tAaEa28_9mH381p6FL8fMuh/s1600/MiniSoft.png" /></a></div><br /><div style="text-align: center;">بسم الله , الحمد لله</div><div style="text-align: right;">في الدرس الماضي أخذنا شرح خاصية background-clip و فهمنا ماهية عملها وكانت ممتعة حقاً , وهي التحكم بمساحة الخلفية الملونة , اما درسنا اليوم هو لخاصية جميلة قريبة جداً من الخاصية السابقة ولكم هذه المرة لن يكون التحكم في اللون بل في الصورة التي هي في الخلفية..</div><div style="text-align: right;">درسنا اليوم حول الخاصية background-origin والتي هي اشبه كثيراً بالخاصية background-clip وهذا ما سوف نتعرف عليه من خلال شرحنا لهذا اليوم ,, </div><div style="text-align: right;">قُم بتجهيز صفحة html ولمن لم يرى كيف نقوم بتجهيزها فإليك الرابط ( <a href="http://minisoftwre.blogspot.com/2013/11/css-background.html" target="_blank">هنا </a>)</div><div style="text-align: right;">والآن نبدأ شرحنا على بركة الله:</div><div style="text-align: right;">كما ذكرنا شرحنا حول خاصية </div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #cc0000;">background</span>-<span style="color: red;">origin</span></blockquote><div style="text-align: right;">وهو كود يتحكم في موضع الصورة التي في الخلفية , يتفرع من هذه الخاصية ثلاثة أكود وهما :</div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: red;">background-origin</span>: <span style="color: blue;">padding-box</span>;<br /><span style="color: red;">background-origin</span>: <span style="color: magenta;">border-box</span>;<br /><span style="color: red;">background-origin</span>: <span style="color: #b45f06;">content-box</span>;</blockquote>ونبدأها بشرح الخاصية <span style="color: red; text-align: left;">background-origin</span><span style="text-align: left;">: </span><span style="text-align: left;"> </span><span style="color: magenta; text-align: left;">border-box</span><br /><span style="text-align: left;">افتح محرر النصوص على صفحة html المتفق عليها ثم انسخ بها هذا الكود :</span><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: red;">background-origin</span>:<span style="color: magenta;"> border-box</span>;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br /></div><br /></body><br /></html></blockquote><span style="text-align: left;"></span><br /><br />وعند تطبيق هذا الكود على المتصفح سنجد الصورة كالتالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOwIZJ0upIzs_8zNkcwQRMOdCBydoqLPC6gE3jjlEZQiYAWksIo86UHN8dimDzwmXaaTFzJIi8VB4qCf7sRmDRb7SCkFnhw6ksfrxFXc6kJsCk22S8UueajKS6Mdxatq-EZiu02buoWCO/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOwIZJ0upIzs_8zNkcwQRMOdCBydoqLPC6gE3jjlEZQiYAWksIo86UHN8dimDzwmXaaTFzJIi8VB4qCf7sRmDRb7SCkFnhw6ksfrxFXc6kJsCk22S8UueajKS6Mdxatq-EZiu02buoWCO/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">الكود المستخدم في هذه الصورة هو background-origin:border-box<br />انظر الآن الى الصورة ( صورة الوجة المبتسم ) تجدها على الحدود وهذا ما تم تطبيقه من خلال الكود border-box</td></tr></tbody></table>والآن نشرح الخاصية <span style="color: red; text-align: left;">background-origin</span><span style="text-align: left;">: </span><span style="color: blue; text-align: left;">padding-box</span><span style="text-align: left;">;</span><br /><div><span style="text-align: left;">افتح محرر النصوص على صفحة html المستخدمة و الصق فيها هذا الكود :</span></div><div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: red;">background-origin</span>: <span style="color: blue;">padding-box</span>;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br /></div><br /></body><br /></html></blockquote></div><div><span style="text-align: left;">وعند تطبيق الكود وعرضه على المتصفح يكون هكذا</span></div><div><span style="text-align: left;"><br /></span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxo8u7aomJthsKckRHhh_23Xkc56VypxbGplNs1V4yaYytX5TpCi0ktcUc6PNGdq_FHPBkSVgHYv3yuO8zXt9bhF8I0SVkj6qD4NKrlTF9EFxnmaMey786zWiarltrq9bonbSFR0kHmYRb/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxo8u7aomJthsKckRHhh_23Xkc56VypxbGplNs1V4yaYytX5TpCi0ktcUc6PNGdq_FHPBkSVgHYv3yuO8zXt9bhF8I0SVkj6qD4NKrlTF9EFxnmaMey786zWiarltrq9bonbSFR0kHmYRb/s320/2.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">انظر ( الوجة المبتسم ) تجده وقد اصبح في الجزء الفارغ والذي يُسمى padding<br />وهذا ما تم تطبيقه بواسطة الكود background-origin:padding-box</td></tr></tbody></table><div><span style="text-align: left;">و الان نشرح الخاصية الأخيرة وهي </span><span style="color: red; text-align: left;">background-origin</span><span style="text-align: left;">: </span><span style="color: #b45f06; text-align: left;">content-box </span><span style="text-align: left;">وهي تعني ان تكون الصورة داخل المحتوى , اي الكتابة </span></div><div><span style="text-align: left;">وهذا ما سوف نقوم بعمله الآن , افتح محرر النصوص على صفحة html والصق هذا الكود :</span></div><div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: red;">background-origin</span>: <span style="color: #b45f06;">content-box</span>;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br /></div><br /></body><br /></html></blockquote>وبعد تطبيق هذا الكود على المتصفح سوف نجد الصورة قد اصبحت هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizY7ZmHO_kOGWILyfGVkuWszBWoHvcJzCOMBK2EFfiLVYWck1E-G9MWH8GIxonT914elduinG8fEoL8-5eAnVQUN4VzmIFyp5wfjhU_l3LT218sSqLCJ8_TjkUMCi32wuRF8Or3a45azPx/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizY7ZmHO_kOGWILyfGVkuWszBWoHvcJzCOMBK2EFfiLVYWck1E-G9MWH8GIxonT914elduinG8fEoL8-5eAnVQUN4VzmIFyp5wfjhU_l3LT218sSqLCJ8_TjkUMCi32wuRF8Or3a45azPx/s320/3.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تم دمج الصورة ( الوجة المبتسم ) داخل المحتوى content<br />وهذا ما تم بعمله بالكود background-origin:content-box</td></tr></tbody></table> هل هذا كل شئ ؟ لا , بل يمكنك أن تتحكم في الصورة بواسطة الكود هذا ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: blue;">background-position</span>: <span style="color: red;">left</span>;</blockquote>وذلك بإضافته للأكواد السابقة , مثال على ذلك :<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">div{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: #b45f06;">background-origin</span>: <span style="color: red;">padding-box</span>;<br /><span style="color: #b45f06;">background-position</span>: <span style="color: red;">left</span>;<br />}</blockquote> ويكون هكذا في المتصفح<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJURgEK4hyphenhyphenKFhRXUkL-QvaJdaQYLWxFPXBFyudQGI0kVMV_Y1sznCGcFlTgbSGXXrj2Y_dSydkzT3JX617OPbQ00qYvVvl9hWsMNtnM6sTjw4Jmof7giOme-_L5CoGVYKkEp31qOfGPk9j/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJURgEK4hyphenhyphenKFhRXUkL-QvaJdaQYLWxFPXBFyudQGI0kVMV_Y1sznCGcFlTgbSGXXrj2Y_dSydkzT3JX617OPbQ00qYvVvl9hWsMNtnM6sTjw4Jmof7giOme-_L5CoGVYKkEp31qOfGPk9j/s320/4.png" width="320" /></a></div><br />بالطبع هذا ليس كل شئ فيمكنك تغيير الإتجاه left الى right او center وكلما طبقت خطوات كلما اكتشفت المزيد والمزيد<br /><div style="text-align: center;"><span style="font-size: x-small;"><br /></span></div><div style="text-align: center;"><span style="font-size: x-small;">والى هنا ينتهي شرحي لهذه الخاصية الجميلة ,, اترككم في امان الله والى لقاء آخر قريب إن شاء الله</span></div></div></div>

دروس دورة CSS : شرح الخاصية background-origin في CSS3

بسم الله , الحمد لله في الدرس الماضي أخذنا شرح خاصية background-clip و فهمنا ماهية عملها وكانت ممتعة حقاً , وهي التحكم بمساحة الخلفية الملون...

اقرأ المزيد

دروس دورة CSS : شرح خاصية background-clip

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemaqim1aZ86Ax_-_0cM4eYAD6lVFnXLygORPEoO5Icm0cv7Vmsw58Dh-pdjevlg0CWGa2mQbjit3v0F80SxZF8p4pZ6ri9fhwpDkyDKxR2KYVCjGQjhD2f33bCCnSXjvMx5e8VJdjAVwD/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemaqim1aZ86Ax_-_0cM4eYAD6lVFnXLygORPEoO5Icm0cv7Vmsw58Dh-pdjevlg0CWGa2mQbjit3v0F80SxZF8p4pZ6ri9fhwpDkyDKxR2KYVCjGQjhD2f33bCCnSXjvMx5e8VJdjAVwD/s1600/MiniSoft.png" /></a></div><br /><div style="text-align: center;">بسم الله , الحمد لله</div>في الدرس السابق شرحنا خاصية الخلفية او background على هذا الرابط ( <a href="http://minisoftwre.blogspot.com/2013/11/css-background.html" target="_blank">هنا</a> )<br />اما الليلة إن شاء الله نقوم بشرح خواص أخرى من هذه الخاصية وهي تنتمي الى CSS3<br />تعلمنا ايضاً في الدرس السابق كيف نقوم بإنشاء صفحة جديدة ونعطيها امتداد html من خلال برنامج المفكرة المتطورة ولمن لم يرى هذا الشرح فعليه بالدخول للرابط في اول سطر , والآن فلنبدأ درسنا على بركة الله.<br /><br />خاصية شرحنا اليوم كالتالي<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #cc0000;">background-</span><span style="color: red;">clip</span></blockquote><span style="text-align: left;">خاصية </span><span style="text-align: left;">background-clip يتفرع منها ثلاثة أكواد هُما كالتالي</span><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-clip:<span style="color: blue;"> padding-box;</span><br />background-clip: <span style="color: magenta;">border-box;</span><br />background-clip: <span style="color: #b45f06;">content-box;</span></blockquote> حسناً ما هي هذه الأكواد ؟؟ هي كالتالي<br />بالنسبة لهذا الكود <span style="color: blue;">padding -box</span> فهو يقوم بجعل الخلفية سواء كانت صورة أو لون تغطي كل الجزء المطلوب إلا الأطراف وهذا مثال علي ذلك<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 300px;<br />padding: 50px;<br />background-color :yellow;<br />background-clip: <span style="color: red;">padding</span>-<span style="color: red;">box</span>;<br />border: 10px dotted #92b901;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />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,<br /></div><br /></body><br /></html></blockquote>ضع هذا الكود السابق في صفحة html واحفظها وجرب فتحها على المتصفح لتجدها كالتالي..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-riPCeRxiX6T1msfrXEHM7kB9ZLTjraiuikS7ynGcW5OkKj5y6QZ_B55v-_3B4xWUYp7U0D7fuj9WmvSwNRTNqY3l3X939Yh19LTp9gT_kQuJrsEHMGq0RGtx7ZHaxTNRLVgw0xjAIpy2/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-riPCeRxiX6T1msfrXEHM7kB9ZLTjraiuikS7ynGcW5OkKj5y6QZ_B55v-_3B4xWUYp7U0D7fuj9WmvSwNRTNqY3l3X939Yh19LTp9gT_kQuJrsEHMGq0RGtx7ZHaxTNRLVgw0xjAIpy2/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">لاحظنا ان الخلفية جميعها تلونت بالاصفر إلا الأطراف والمسئول عن اللون الاصفر كمان نعلم  background-color</td></tr></tbody></table><span style="text-align: left;">الكود الذي يليه </span><span style="color: magenta;">border-box</span> و هو يعطي لون للخلفية جميعها بما فيها الأطراف وهذا مثال على ذلك<br /><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 300px;<br />padding: 50px;<br />background-color :yellow;<br />background-clip: <span style="color: red;">border</span>-<span style="color: red;">box</span>;<br />border: 10px dotted #92b901;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />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,<br /></div><br /></body><br /></html></blockquote> وبعد التجربة على صفحة html نجد الشكل كالتالي<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBF_KdZqitD8UenCjbkzDD7_NKQ_A2Clv_a6ZotCVzhe0oNsSqSWu0o50HCTdXmf31cffLw4eEr1ZRP0Yim3q-9SNxM2UxBDAygfUJ8FEWXTZW99brov4KMZrHbeaKANFAgLR8Td_5otwa/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBF_KdZqitD8UenCjbkzDD7_NKQ_A2Clv_a6ZotCVzhe0oNsSqSWu0o50HCTdXmf31cffLw4eEr1ZRP0Yim3q-9SNxM2UxBDAygfUJ8FEWXTZW99brov4KMZrHbeaKANFAgLR8Td_5otwa/s320/2.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">لاحظنا هنا أن الخلفية جميعها تلونت بما في ذلك الأطراف </td></tr></tbody></table>اما الكود الثالث والأخير وهو <span style="color: #b45f06;">content-box</span> المقصود به أنه يظلل الكتابه فقط أو المحتويات إن كان هناك صور او روابط فأيضاً يظللها , مثال على ذلك..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 300px;<br />padding: 50px;<br />background-color :yellow;<br />background-clip: <span style="color: red;">content</span>-<span style="color: red;">box</span>;<br />border: 10px dotted #92b901;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />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,<br /></div><br /></body><br /></html></blockquote>بعد وضعه في صفحة html وتطبيقه على المتصفح نجد المثال كالتالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZVIjG1TJENbHjOHFfcqDlBk8g1690r0uqqox_h8Tpf2FMGkntbw-a4puv_oNYmnXJ5GPQkfQfylf1d5xLEY7-kfVaM_k_ctsDXQTmd3qCl93asVBH_Kbj2ichmlhAc2jg6jIOPvBJugc/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZVIjG1TJENbHjOHFfcqDlBk8g1690r0uqqox_h8Tpf2FMGkntbw-a4puv_oNYmnXJ5GPQkfQfylf1d5xLEY7-kfVaM_k_ctsDXQTmd3qCl93asVBH_Kbj2ichmlhAc2jg6jIOPvBJugc/s320/3.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">لاحظنا أن الجزء المظلل فقط هو المحتوى<br />عن الإطار الابيض الكبير ما بين المحتوى والإطار الأخضر مسئول عنه padding:50px</td></tr></tbody></table>وبهذا قد فهمنا ماهية هذه الخاصية الأكثر من رائعة وما تفعله لنا من تزيين لصفحات الإنترنت<br />يجب أن تعرف أن  هناك يجب فهمها بالعربية حتى يتنسى لك الفهم أكثر وهي كالتالي ..<br /><br /><div style="text-align: left;"><span style="color: blue;">المحتوى </span>= <span style="color: #cc0000; font-family: Verdana, sans-serif;">content</span></div><div style="text-align: left;"><span style="text-align: center;"><span style="color: blue; font-size: 13px;">الحشوة او الجسم الداخلي</span><span style="font-size: x-small;"> = </span><span style="color: #cc0000; font-family: Verdana, sans-serif;">padding</span></span></div><div style="text-align: left;"><span style="font-size: 13px; text-align: center;"><span style="color: blue;">الحدود</span> = </span><span style="color: #cc0000; font-family: Verdana, sans-serif;">border</span></div><span style="font-size: x-small;"><br /></span><br /><div style="text-align: center;">وبهذا ينتهي درسنا لهذه الليلة ,, نترككم في رعاية الله</div><div style="text-align: center;"><br /></div></div>

دروس دورة CSS : شرح خاصية background-clip

بسم الله , الحمد لله في الدرس السابق شرحنا خاصية الخلفية او background على هذا الرابط ( هنا ) اما الليلة إن شاء الله نقوم بشرح خواص أخرى من...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background

<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOiw761WzZOTvbE37iZtGTCfR9HRF7ZQ1Ewih1dFGHZG5FqKzyMqWKuLOcJcG_FofD-lojdGZygcvExRc2o08hbCNDB2vQ0wod5zRnUSt83RyaJ8hyphenhyphenq7P6pKDDqfuQguoJs292WvsPUNed/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOiw761WzZOTvbE37iZtGTCfR9HRF7ZQ1Ewih1dFGHZG5FqKzyMqWKuLOcJcG_FofD-lojdGZygcvExRc2o08hbCNDB2vQ0wod5zRnUSt83RyaJ8hyphenhyphenq7P6pKDDqfuQguoJs292WvsPUNed/s1600/MiniSoft.png" /></a></div><br /><br /><div style="text-align: center;"><span style="color: red;">بسم الله , الحمد لله</span></div><br />في درسنا هذا سوف نتعلم الكثير حول خاصية background او الخلفية .<br />حيث ان هناك أكثر من طريقة لوضع الخلفيات داخل صفحات الإنترنت سواء كانت ألوان أو صور وطريقة التحكم في الصور وعرضها , ايضاً يمكنك وضع صورة واحدة وجعلها تتكرر سواء افقياً او رأسياً او ملئ الصفحة أكلمها.<br /><br />لا تقتصر هذه الخاصية على الألوان والصور فقط, بل أن لها خصائص أخرى رُبما تعرفها لأول مرة وهذا ما سوف نستعرضه الآن سوياً ,, فنلبدأ درسنا على بركة الله .<br /><br />ملاحظة هامة,, لرؤية صور الشرح بوضوح تام اضغط على الصورة مرة واحدة فقط.<br /><br />و الآن سوف نقوم بعمل صفحة HTML  كالتالي..<br />افتح اي محرر نصوص ويستحسن Notepad Plus وتجده بشرح التنصيب على هذا الرابط ( <a href="http://minisoftwre.blogspot.com/2013/10/html-css-xml-notepad-final.html" target="_blank">هنا </a>)<br />ثم افتح صفحة جديد والصق بها التالي..<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><!DOCTYPE html><br /><html><br /><head><br /><style type='text/css'><br /><span style="color: blue;">body</span>{<br />background-image: url('http://im41.gulfup.com/z16yp.png');<br />background-color: #B7FF0F;<br />background-repeat: no-repeat;<br />background-attachment: fixed;<br />background-position: center;<br />}<br /></style><br /></head><br /><<span style="color: blue;">body</span>><br /><p>Mini Software</p><br /><p>Mini Software</p><br /><p>Mini Software</p><br /><p>Mini Software</p><br /><p>Mini Software</p><br /></body><br /></html></code></pre></div><br />بعد نسخ هذه الصفحة في البرنامج ستجدها عبارة عن كتابة سوداء فافعل التالي<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKyaKUeqfmNvdmLSYqoXNMpNoMfdVpldu8S5CBJIEfwGvaGSknuEOBYlR4Stcz5wQI0EFUDHCVFeTBLcko367TDw648wfb1n_Txu590CbQGb2KRv_0fELPsD9YYEEfYMg67czrRYFZzuA/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKyaKUeqfmNvdmLSYqoXNMpNoMfdVpldu8S5CBJIEfwGvaGSknuEOBYlR4Stcz5wQI0EFUDHCVFeTBLcko367TDw648wfb1n_Txu590CbQGb2KRv_0fELPsD9YYEEfYMg67czrRYFZzuA/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">1- اضغط لإختيار اللغة<br />2- قف على حرف H<br />3- اختر html</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5HpZ8FTjjbVvvuvOaeHUS264VvDHtFdWSPwrUxAfGL79mwvQ1GJ6GqZKKr-mCqamKEi1q2ffi-K1awEYZGAWuW0uSDT9Nx_VvU4X_llCk8JnPhCSwVDLXrrIpx08yRoAy76zRDRMb4rkc/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5HpZ8FTjjbVvvuvOaeHUS264VvDHtFdWSPwrUxAfGL79mwvQ1GJ6GqZKKr-mCqamKEi1q2ffi-K1awEYZGAWuW0uSDT9Nx_VvU4X_llCk8JnPhCSwVDLXrrIpx08yRoAy76zRDRMb4rkc/s320/2.png" width="280" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">اضغط هن للحفظ</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYRAX062-GOn7AMV6sonjQFIHXIgMKUhSCVMsN6rcJhm66kI53bSK1WLQ6WWftvfDXtY6oOTPZwtT3jwtaEAjz1TuzTCulhQCfdf8UmyHPThXlzufE1p66_9sFnMr3Xdc0kPzEg72X7Xb/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYRAX062-GOn7AMV6sonjQFIHXIgMKUhSCVMsN6rcJhm66kI53bSK1WLQ6WWftvfDXtY6oOTPZwtT3jwtaEAjz1TuzTCulhQCfdf8UmyHPThXlzufE1p66_9sFnMr3Xdc0kPzEg72X7Xb/s320/3.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ثم اعطي الملف اي اسم تريد مثل الرقم واحد<br />2- اضغط Save</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryCK4MJNyYkD_aFj9N9g31cCRfpTkPGQjX-4IX6KbNgufxDxNIYlf6XONC7k6Sht0sHSCh15NYEo0M8MjqJooGh-0Yk1yXOSTkWMSd_lBKTT2f3tgCauOOih3BJesOHR6JNn5a1rQs8Uy/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryCK4MJNyYkD_aFj9N9g31cCRfpTkPGQjX-4IX6KbNgufxDxNIYlf6XONC7k6Sht0sHSCh15NYEo0M8MjqJooGh-0Yk1yXOSTkWMSd_lBKTT2f3tgCauOOih3BJesOHR6JNn5a1rQs8Uy/s1600/4.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ستجد الملف وقد أخذ شكل المتصفح الإفتراضي لديك</td></tr></tbody></table> الان إفتح الملف وانظر كيف هو في المتصفح<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7K34X-lPyZFxYRHA4ma9gNdiGAOtHxsLhsIVh1TDbooV-v6Cb8T7FvaA5aRp-SNzZ-gxzabDFd-JilR95IhXD2oc-mUe8cBQXHuYGQT4tQ6AvHtrPdPqUcZc5gpOdyMa1his4whcI4yGg/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7K34X-lPyZFxYRHA4ma9gNdiGAOtHxsLhsIVh1TDbooV-v6Cb8T7FvaA5aRp-SNzZ-gxzabDFd-JilR95IhXD2oc-mUe8cBQXHuYGQT4tQ6AvHtrPdPqUcZc5gpOdyMa1his4whcI4yGg/s320/5.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ها هو الملف وقد فتح على المتصفح </td></tr></tbody></table>وتعالو نفسر كيف تم هذا ,, انظر الكود التالي المستخدم في الصفحة التي قُمنا بحفظها<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml">body{<br /><span style="color: red;">background</span>-<span style="color: blue;">image: url('http://im41.gulfup.com/z16yp.png');</span><br /><span style="color: red;">background</span>-<span style="color: #6aa84f;">color: #B7FF0F;</span><br /><span style="color: red;">background</span>-<span style="color: #b45f06;">repeat: no-repeat;</span><br /><span style="color: red;">background</span>-<span style="color: magenta;">attachment: fixed;</span><br /><span style="color: red;">background</span>-<span style="color: #674ea7;">position: center;</span><br />}</code></pre><br /> <span style="color: red;">هذا هو كود CSS الذي يسمى background يعني الخلفية </span><br /><span style="color: blue;">هذا يعني ان القادم هو رابط لصورة url ودائماً تكون بين قوسين ( )</span><br /><span style="color: #6aa84f;">هذا هو لون الصفحة الاخضر وهو عبارة عن لون من الوان الهيكس ولمعرفة المزيد اليك هذا الرابط به جميع الألوان</span><span style="color: blue;"> ( <a href="http://minisoftwre.blogspot.com/2013/09/colorpic.html" target="_blank">هنا</a> )</span><br /><span style="color: #b45f06;">وهذا يعني عدم تكرار الصورة و سوف نأخذ المزيد حول هذه الخاصية</span><br /><span style="color: magenta;">هذا يعني انه تم اصلاح رؤية الخلفية في اي منفذ عرض</span><br /><span style="color: #674ea7;">وهذا يعني ان الصورة تكون في المنتصف تماماً و سوف نأخذ المزيد حول هذه الخاصية</span><br /><span style="color: #a64d79;"><br /></span>هل يمكن كتابة نفس الكود بطريقة أخرى ؟ نعم يمكن كالتالي<br /><div dir="ltr" style="text-align: left;"><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: red;">background</span>: <span style="color: #6aa84f;">#B7FF0F</span> <span style="color: blue;">url('http://im41.gulfup.com/z16yp.png')</span> <span style="color: #b45f06;">no-repeat</span> <span style="color: magenta;">fixed </span><span style="color: #674ea7;">center</span>; </code></pre></div><div dir="rtl" style="text-align: right;"> حسناً ,, الآن اخذنا فكرة كبيرة عن خاصية background ولكن بقى القليل و هو ,, إذا أردت أن اجعل الصورة متكررة في جميع انجاء الصفحة فيمكنك ان تمسح هذا الكود :</div><div style="text-align: center;"><div dir="ltr"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: no-repeat; </span></div></div><div style="text-align: center;"><span style="text-align: left;">او تجعله هكذا</span></div><div style="text-align: center;"><div dir="ltr"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: repeat </span><span style="color: #b45f06; text-align: left;">repeat</span><span style="color: #b45f06; text-align: left;">;</span></div></div><div style="text-align: center;"><span style="text-align: left;">لتبقى الخلفية هكذا</span></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavqo64hwvpgecnutbHGV6cbHu91_zTeJAoUfuMkaTjP8I-AFC-mEhkyyQcJeqaPr0ihvNPbWawvbfQoB6tkmo76NyT4A3NPgjlEBhIDJ5neBh_gVxqQuCyAnJim9bnJjWROpUhsvmeSBc/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavqo64hwvpgecnutbHGV6cbHu91_zTeJAoUfuMkaTjP8I-AFC-mEhkyyQcJeqaPr0ihvNPbWawvbfQoB6tkmo76NyT4A3NPgjlEBhIDJ5neBh_gVxqQuCyAnJim9bnJjWROpUhsvmeSBc/s320/6.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">و الان إذا أحببنا أن نجعل هذه الصورة تتكرر افقياً او رأسياً ماذا نفعل؟ </div><div class="separator" dir="rtl" style="clear: both; text-align: center;">لجعل الصورة متكررة افقياً نجعل الكود السابق هكذا</div><div class="separator" dir="ltr" style="clear: both; text-align: center;"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: repeat-x</span><span style="color: #b45f06; text-align: left;">;</span></div><div class="separator" dir="rtl" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">لتبقى الصورة هكذا</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39coIMUcTQuz6KAhJOgqfi_nb8xqyZ3LcWPb-JYIOmjWZ-AmLCctbVA9XyQkt0rwn8w7HYH0Gk3rIxH-td4SS4onW6c20L0d4saslZYNc84h4xqAJ8S1qh8qBCl8gz_woYsR5dbzsWPMv/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39coIMUcTQuz6KAhJOgqfi_nb8xqyZ3LcWPb-JYIOmjWZ-AmLCctbVA9XyQkt0rwn8w7HYH0Gk3rIxH-td4SS4onW6c20L0d4saslZYNc84h4xqAJ8S1qh8qBCl8gz_woYsR5dbzsWPMv/s320/7.png" width="320" /></a></div><div class="separator" dir="rtl" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">وإذت أحببنا أن نجعل الصورة تتكرر رأسياً فنجعل الكود هكذا</div><div class="separator" dir="ltr" style="clear: both; text-align: center;"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: repeat-y</span><span style="color: #b45f06; text-align: left;">;</span></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">لتبقى الصورة هكذا</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzr2H_lUUUiY9o5H0QbRCKqU2bbDTtxTgaA4MW-pCepgfZbjx1AGNVXvbIJwm3rawgk4H9vXdWCuI_hXrbMZQN_mBsw3SWv-zJsPzxJzOxr6IbAPgadAERnbAHg8pmqxQAd_USZ5oCE2y/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzr2H_lUUUiY9o5H0QbRCKqU2bbDTtxTgaA4MW-pCepgfZbjx1AGNVXvbIJwm3rawgk4H9vXdWCuI_hXrbMZQN_mBsw3SWv-zJsPzxJzOxr6IbAPgadAERnbAHg8pmqxQAd_USZ5oCE2y/s320/8.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: right;">هل هذا كل شئ ؟ بالطبع لا يمكنك أن تضع الصورة وحدها على اليمين او على الشمال وهذا بتغيير الكود التالي</div><div class="separator" dir="ltr" style="clear: both; text-align: left;"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #674ea7; text-align: left;">position: center; يجعل الصورة في المنتصف</span></div><div class="separator" dir="ltr" style="clear: both; text-align: left;"><span style="color: red;">background</span>-<span style="color: #674ea7;">position: right; يجعل الصورة على اليمين</span></div><div class="separator" dir="ltr" style="clear: both; text-align: left;"><span style="color: red;">background</span>-<span style="color: #674ea7;">position: left; يجعل الصورة على اليسار</span></div><div class="separator" style="clear: both; text-align: left;"><span style="color: #674ea7;"><br /></span></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">هذا ليس كل شئ بالنسبة لشرح الخلفيات او الباك جراوند backgroun ما زال هناك المزيد من الخواص ولكنها تحتاج درس منفصل وهو شرحنا القادم إن شاء الله</div><div class="separator" dir="rtl" style="clear: both; text-align: center;">السلام عليكم</div><div class="separator" style="clear: both; text-align: left;"><span style="color: #674ea7; text-align: left;"><br /></span></div></div>

دروس دورة CSS : شرح الخاصية background

بسم الله , الحمد لله في درسنا هذا سوف نتعلم الكثير حول خاصية background او الخلفية . حيث ان هناك أكثر من طريقة لوضع الخلفيات داخل صفحات الإن...

اقرأ المزيد

sevida arabic

دروس دورة CSS : شرح الخاصية background-color

دروس دورة CSS : شرح الخاصية background-repeat

دروس دورة CSS : شرح خاصية background-size في CSS3

دروس دورة CSS : شرح الخاصية background-origin في CSS3

دروس دورة CSS : شرح خاصية background-clip

دروس دورة CSS : شرح الخاصية background

المشاركات الشائعة

أرشيف المدونة الإلكترونية