الموضوع: HTML5 - الدرس الثانى

السلام عليكم و رحمة الله و بركاته
آسف على التأخير فى وضع هذا الدرس كانت لدي بعض الأعمال لأنجزها

فى هذا الدرس:-
سنقوم بتعديل تصميمنا و إضافة بعض الtags الجديدة له
البداية مع CSS 3 سنقوم بتطبيق بعض تأثيرات ال CSS3 على تصميمنا

بسم الله نبدأ


قمنا بالتوقف فى المرة السابقة على هذا التصميم


الآن لدينا layout ثابتة
حان الوقت للcss الجدية

من محاسن CSS3 ال Round Corners
كنا من قبل هذا ندخل التصميم على photoshop أو أى برنامج تحرير صور و يتم تقطيع الصورة على عدة صور ثم وضع عدة divs فى التصميم و و و و و و

جاءت ال css 3 بشئ يسمى ال border radius
وتحدد بالبكسل وهى مقدار دوران الحدود

ولها صيغتان أساسيتان
الأولى خاصة بالمتصفحات التى تعمل على محرك web-kit مثل safari و chrome

كود HTML:

-webkit-border-radius: 15px;  

و الأخرى خاصة بمحرك موزيلا Gecko

كود HTML:

-moz-border-radius: 15px; 

و النتيجة



قمت بتطبيق الround corner على الهيدر و الفووتر و ال side bar

تريد الآن تقسم المنطقة الرئيسية section إلى عدة elements و html5 وفرت لنا وسم جديد وهو article
ال article وسم جديد من html5 لوضع أى نوع من أنواع ال contents

عدل الكود قليلا ليصبح كلآتى

كود HTML:

<section>
		<header><h2>this is simple content</h2></header>
		<article>
			<header>
				<h3><a href="#">simple article 1</a></h3>
				<time datetime="2009-06-29">Aug 24th 2009</time>
			</header>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero urna, feugiat id lobortis a, vulputate sed tellus. Nunc rutrum fermentum nisi, in placerat magna mattis vitae. Fusce ac metus leo, ut hendrerit velit. Nullam purus felis, gravida vitae aliquam interdum, rhoncus sit amet nibh. Suspendisse lectus orci, auctor nec bibendum ac, consequat sed nibh.</p>
		</article>

قد نحسن الشكل قليلا بال css

كود HTML:

section{
			width:610px;
			float:left;
			min-height:500px;
			padding:10px;
		}
		section article{
			display:table;
		}
		section article header{
			display:table-cell;
			width:200px;
		}
		section article header a{
			color:#000000;
			display:block;
		}
		section article header time{
			color:#033da6;
		}

تلاحظ شيئا !!!!

نعم html5 أدرجت وسم جديد و هو time
لوضع الوقت و التاريخ بتنسيقه الجيد
وهو يأخذ إمتداد واحد و هو datetime ويوضع فيه تحديد نوع التاريخ و الوقت الموجود فى الوسم


حسنة جديدة أيضا فى HTML5 و CSS3 وهى إمكانية اللعب مع الحدث hover على ال elements مثل article من خلال ال css كالتالى

كود HTML:

section article:hover{
			color:red;
		}

أرجو أن يكون الشرح واضح
و منتظر تجاربكم و أسئلتكم
و شكرا

قمت برفع المثال على الرابط We Love HTML5

إضافة : الصيغة القياسية ل border radius من ال w3c

كود:

border-radius: 15px;

المصدر :- CSS Backgrounds and Borders Module Level 3

بصراحة استمتعت واستفدت من هالدرسين الشيء كثير

جزاك الله خير عن كل حرف كتبته

وهذا تطبيقي :nice:

بارك الله فيك مُتابع


دردشة

مُتابع لك

اطيب تحية

شكرا لكم على المتابعة
وافي الروح : هذا ما أريده بالضبط , التطبيق هو أول طريق التعلم السليم
تطبيقك للدرس رائع ينم عن فهمك للدرس , إذاواجهت أى صعوبات لا تتردد فى السؤال

شكراً لك ومنتظرين باقي الدرووس
بارك الله فيك يالغلا

درس راااائع بحق

الف شكر لك ومتباعينك أخوي

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