CSS3-Background

السلام عليكم ورحمة الله وبركاته ..

فى المقالة دى إن شاء الله هنتكلم عن موضوع مهم جدا ,
وفى نظرى من ضمن الأضافات الأكثر تأثيرا وظهورا فى السى اس اس 3 .
قبل البدء فى الشرح أود أن أطرح بعض الأسئله والتى سوف نجيب عليها فى أثناء المقاله :-
أولا:-ماهو الجديد فى الخلفيات فى السى اس اس 3 ؟
ثانيا:-هل يمكن إضافة أكتر من صورة كخلفية لصفحة الأتش تى إم إل؟؟!!
ثالثا:-هل يمكن تغيير حجم الخلفية لصفحة الأتش تى إم إل؟؟!!
رابعا:-هل يمكن تغيير درجة لون الخلفيه ؟؟!!

دعونا نبدأ فى البدايه مع السؤال الأول .ماهو الجديد فى الخلفيات كخصائص موجودة مسبقا فى السى اس اس2 ؟؟؟
أو ماهى الأضافات فى خاصية الخلفيات فى السى اس اس 3 ؟؟
فى البددايه كيف نكتب خاصية الخلفيه فى السى اس اس عامة

Body{
background:url(imagename.jpg)   left   bottom  no-repeat
}

, فإنه توجد العديد والعديد من الخصائص الجديدة فى السى اس اس 3
-:ولكن من أفضل الخصائص الموجودة فى السى اس اس 3 هى الخلفيه ففى هذة النسخه يمكنك
(1        إضافة أكتر من صورة فى الخلفيه
(2         التحكم فى حجم الخلفيه
(3         التحكم فى درجة اللون
وهذة الخصائص الجديدة تقودنا إلى السؤال الثانى وهو ,هل يمكن إضافة أكتر من صورة للخلفيه ؟؟!!
لو سألتنى مثلا منذ عدة سنوات هذ السؤال لقلت إن ذلك مستحيلا ولكن مع السى اس 3 لايوجد مستحيل
(مع ديف ميكس مفيش مستحيل )تستطيع عمل ذلك من خلال هذا الكود البسيط

Body{
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
}

نوصل لنقطه مهمه وبتضايق ناس كتير من السى اس اس 3 ألا وهى دعم المتصفحات لهذة الخاصيه :-
Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) andInternet Explorer (9.0+) 😀

وبكدا نكون وصلنا للسؤال الثانى ألا وهو هل يمكن التحكم فى حجم خلفية الصورة ؟؟!
بدون إطاله فى الكلام يمكن هذا وبكل سهوله عن طريق هذا الكود الصغير والمميز من السى اس اس 3

div {
background-image: url(imagename.png);
background-repeat: no-repeat;
background-size: 100% 100%
}

وكالعاده فى كل الخصائص هنشوف دعم المتصفحات وهيكون كالتالى
Opera 9.5, Safari 3

بعد كدا إن شاء الله نوصل للنقطه المهمه وهى إزاى أعمل صفحه مدرجه أو جزء مدرج فى الصفحه زى الشكل دا

الكود واضح مع تغير لون الصورة

, , , , , ,

  1. 9 articles in CSS/CSS3 from devmix « DevelopersMix's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: