الموضوع: HTML5 - الدرس الثالث - playing with css3

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

فى درس اليوم إن شاء الله :-
إستخدام خواص ال background الجديدة فى css3


قدمت لنا ال css3 عدة خواص جديدة رائعة لصور الخلفية

1- background size :-
هل حلمت يوما بأن تغير من حجم صورة فى الخلفية لسبب أو لآخر , حاولنا كثيرا و لكن فشلنا فى السابق و هذا ما أستوعبه فريق عمل ال w3c و قام بإضافته ل css3

قم بإنشاء ملف جديد لتجاربنا اليوم وقم بوضع هيئة بسيطة فيه basic strcture لن أقول لك كيف :1power:

الآن
نفترض إنك تريد وضع خلفية لوسم ال header تتمدد مع إمتداد الصفحة فى css2 كان من المستحيل فعل هذا ولكن هيهات نحن الآن css3

فقط فى ال css قم بإضافة الآتى

كود HTML:

section header{
			width:50%;
			
			background:transparent url(img/simplebg.jpg) no-repeat;
			background-size: 100%;
					
					}	

بسيطة أليس كذلك

الصيغة القياسية لها

كود HTML:

background-size: width height;

ولكن مهلا
هل قمت بالتجربة و لم تعمل معك

هذا حال أكثر تعليمات ال css3 فهى لن تعمل معك بالصيغة القياسية الآن لأن الصيغة القياسية لم تعتمد بشكل صحيح حتى الآن
يجب أن تستخدم ال extenstion الخاصة بالمتصفح
كما قمنا سابقا مع الخاصية
border raduis
راجع الحلقة السابقة

لذلك حتى تعمل على أغلب المتصفحات سنستخدم
لمتصفح أوبرا :-

كود HTML:

-o-background-size

لسفارى و كروم :-

كود HTML:

-webkit-background-size

للأسف الخاصية background - size لم يتم دعمها بشكل صحيح مع موزيلا , حاولت معها ولكنى فشلت

2- multi background :-

نعم يمكنك وضع أكثر من background للوسم الواحد
أذكر عندما كنا نريد عمل هذا ب css2 كنا نضع 2 div كل منهم يأخذ نفس الwidth ونفس ال height ونضع background لكل منهم
ولكن ما إذا ما كنا نريد وضع 3 خلفيات أو 4 أو حتى أكثر من هذا
هنا يأتى دور ال css3 الرائعة

فقط قم بفصل ال Background ب ","
لا تصدقنى جرب هذه

كود HTML:

background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;

بسيطة أليس كذلك ؟؟

تلميحات بسيطة :-
الترتيب مهم فالصورة الأولى ستصبح فوق الثانية و الثانية فوق الثالثة و هكذا
للأسف سفارى وكروم فقط هما من أستطاعو تنفيذ الكود السابق بالشكل الصحيح

ما رأيك بدمج الخاصيتان السابقتان ؟؟

هيا بنا

كود HTML:

background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;
			-webkit-background-size:auto  auto, 100%;

هل ستستطيع أن تخمن ما نتيجة الكود السابق :1power:

3- background-border :-
مللت من ال border الجاهزة solid , dashed , ...
الآن مع css3 يمكنك وضع خلفية لل border

ركز معى فى هذه الصورة



هذا المربع الأسود مثال للصورة التى سنستخدمها كصورة للحدود
و ال css3 تتيح لنا تحديد إحداثيات جوانب الصورة كالآتى

كود HTML:

border-image:url("img/simpleborder.png") 25% 30% 12% 20%

و يمكنك إستخدام الكلمة
stretch,repeat,round
لن أقول الفرق بينهم الآن , قم بالبحث و أخبرنى بنفسك

و سنضيف extension كي تعمل مع أغلب المتصفحات

كود HTML:

-webkit-border-image:url("img/simpleborder.png") 25% 30% 12% 20%;
    	-moz-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;
    	-o-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;
    	-khtml-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

4- transparent colors:-
css3 وفرت لنا الخاصية الجديدة rgba وهى شبيهه ب الخاصية rgb
وكن بإضافة عنصر أخير وهو ال transparent
و تكتب كالتالى

كود HTML:

rgba(0,0,0,0.5)

حيث أول ثلاث أرقام هي أرقام اللون طبقا لل rgb و الخاصية الأخيرة خاصة بال
transparent

هناك كود من موقع
webdesignerdepot
http://www.webdesignerdepot.com/2009...can-use-today/

حتى تعمل هذه الخاصية بالشكل الصحيح مع ال ie

كود HTML:

<!-- [if IE]>
	<style type="text/css">
		.transparent #transparent{
			background:transparent;
			filter: pregid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,endColorstr=#00000050);
			zoom: 1;
		}
	</style>
	<![endif] -->

لم أجربها صراحة لضيق الوقت




المثال على الدرس
http://magic4host.com/html5/3/

وهنا نكون قد أنهينا درس اليوم , منتظر تطبيقاتكم و أسئلتكم

شكرا جزيلا وبارك الله في مجهودك وجعله ف يميزان حسناتك

متابع ان شاء الله

ماشاء الله خصائص رائعة جدا
تم التطبيق والحمد لله لم تفلح ولا خاصية مع الIE
و نجحت كل الخواص مع ال google chrome
والفاير فوكس نجحت خاصيتان فقط background-border و transparent colors
بانتظار الجديد , ونتمنى ان يتم دعم ال css3 دعم كامل من جميع المتصفحات
وجزاك الله خيرا

شكرا لك اخي الكريم ومقدرين هالمجهود

لكن للاسف المخ قفل

ماني قادر استوعب الدرس ... يمكن لاني مبتدء

مهندس مصرى@ أغلب الخواص تم إستهداف محرك webkit فى الأساس الذى يقوم عليه متصفحى safari , google chrome لذلك تجدهم أفضل المتصفحات فى عرض خصائص ال css3

Panoramic @ قم بالتطبيق فورا , و نفذ الخصائص خطوة خطوة و إذا وجدت صعوبة فى شئ ضع ما فى جعبتك هنا و سأساعدك بإذن الله و أخبرنى بالجزء الغامض حتى أعيد شرحه الهدف هنا أن كلنا نفهم و نستوعب هذه الخواص الجديدة

كنت أريد رأيكم , هل أكمل خصائص ال css3 المتقدمة css transform و css transition
أم أقم بالتركيز مرة أخرى على html5 و الوسوم الجديدة بها
منتظر رأيكم , سأقوم بوضع الدرس التالى غدا بإذن الله

المشاركة الأصلية كتبت بواسطة magic4host.com

كنت أريد رأيكم , هل أكمل خصائص ال css3 المتقدمة css transform و css transition
أم أقم بالتركيز مرة أخرى على html5 و الوسوم الجديدة بها
منتظر رأيكم , سأقوم بوضع الدرس التالى غدا بإذن الله

اعتقد من الافضل اكمال وسوم html5 .. راي شخصي