سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا...
Transcript of سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا...
![Page 1: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/1.jpg)
1
![Page 2: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/2.jpg)
الفهرسالفصل الول: الساسيات
HTML5الستايل والترميز في
HTML5دة في الوسوم الجديالفصل الثاني:
الوسوم الجديدة لتقسيم الصفحة>headerالوسم <>article<الوسم
>navالوسم <>section<الوسم
>asideالوسم <>footerالوسم <
في تقسيم الصفحةHTML5 و HTML4الفرق بين HTML5وسوم جديدة في
>markالوسم <>detailsالوسم <>summaryالوسم <>dialogالوسم <
2
![Page 3: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/3.jpg)
>progressالوسم <>timeالوسم <>figureالوسم <>figcaptionالوسم <
أسئلة الفصل الثانيMediaالفصل الثالث:وسوم الوسائط
Elements
>audioالوسم <>videoالوسم <>sourceالوسم <
أسئلة الفصل الثالث Graphicsالفصل الرابع:الرسومات
>canvasالوسم <>svgالوسم <
>svgإضافة النصوص الى الوسم <linear Gradientإضافة
>defsالوسم <>linearGradientالوسم <
3
![Page 4: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/4.jpg)
أسئلة الفصل الرابعFormsالفصل الخامس:النماذج
>datalistالوسم <>keygenالوسم <>outputالوسم <
> فيinputانواع المدخل ت الجديدة للوسم <HTML5
Colorنوع المدخل
date نوع المدخل
datetime-localنوع المدخل emailنوع المدخل
monthنوع المدخل
numberنوع المدخل
rangeنوع المدخل
searchنوع المدخل telنوع المدخل Timeنوع المدخل urlنوع المدخل
4
![Page 5: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/5.jpg)
weekنوع المدخل أسئلة الفصل الخامسCSS3الفصل السادس:
CSS3 Rounded Corners
CSS3 Border Images CSS3 Backgrounds
CSS3 Gradients CSS3 Shadows
CSS3 Text CSS3 Font
CSS3 2D Transforms CSS3 3D Transforms
CSS3 Transitions CSS3 Animations
CSS3 Multiple Columns CSS3 User Interface
الكت++اب مج++اني ول يج++وز بيع++ه أو نس++خه عل++ى ورق أو إقتص++اص ج++زء من++ه أوترجمته إلى لغة أخرى أو ترجمة جزء منه البإذن ص++احب الكت++اب وللتواص++ل م++ع
[email protected]صاحب الكتاب على اليميل:
5
![Page 6: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/6.jpg)
الساسيا ت
) :HTML5( ما هي
والهدف الرئيسي منها هي زيادة دعم HTMLهي أخر نسخة من وأيضا) Java script(للوسائط المتعددة و تقليل العتماد على لغة
هذا بالضافة )Flash Playerمشغلت الصفحات الدينامكية مثل(اوغيره )I Phoneأو() Androidإلى دعمها للجهزة الذكية مثل(
):Tags(وم ما هي الوس
تكتب بين) special keywords(هو عبارة عن كلمات خاصة أووكل وسم له وظيفNNة معينNة يقNوم بهNا) <>(علمتي اكبر و اصغر أو يؤديها في المتصفح
6
![Page 7: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/7.jpg)
استخدم وصف الوثيقة بطريقة صحيحة1
يجب دائما أن تكتب نوع الوثيقة في السطر الول في المستند سFFواءlowerكانت نوع الوثيقة تحتوي على حروف صFFغيرة و case (روفFFأو ح
)Upper caseكبيرةو
Lower(استخدم الحFFرف الصFFغيرة 2 Case(ف أوFFد تعريFFعن في المستندHTML5كتابة وسم
أن تكتFFب بFFالحرف يفضFFلHTML5أو HTML4عند كتابة وسFFم فFFي مع أنه يسمح بكتابة الحرف الكبيرة . )Lower Caseالصغيرة و
7
HTML5الستايل والترميز في
![Page 8: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/8.jpg)
في المستند HTML5أوسمة غلق إ3
لسFFت بحاجFFة إلFFى إغلق الوسFFم ولكFFن يفضFFل إغلق HTML5في في المستند. الوسم
8
![Page 9: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/9.jpg)
9
![Page 10: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/10.jpg)
لتي تحتوي على زوج وحيد اHTML5أوسمة غلق إ4
يكون اختياريا لغلق الوسمة الFFتي تحتFFوي علFFى زوج HTML5في .وحيد
XMLو XHTMLالرمزو/) عادة يجب استخدامه في
طريقة صحيحة
طريقة صحيحة أيضا
استخدم الحرف الصغيرة عند تعريف خاصية في الوسFFم5 HTML5في
أن يفضFFلHTML5أو HTML4وسFFم فFFي خاصFFية فFFي العنFFد كتابFFة Lowerتكتب بالحرف الصغيرة و Case( رفFFة الحFFمع أنه يسمح بكتاب
الكبيرة .
10
![Page 11: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/11.jpg)
11
![Page 12: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/12.jpg)
بدون علمتي تنصيص Idأو classف اسم يمكن تعري6
يمكن تعريفه بدون علمFFتي تنصFFيص Classعند تعريف HTML5في Classفي حال إذا كFFان مكFFون مFFن كلمFFة أم فFFي حFFال إذا كFFان اسFFم
يجFFب أن تكتFFب بيFFن علمFFتي spaceمكFFون مFFن اسFFمين مفصFFولة ب (“ ”)مزدوجهأو )' 'تنصيص مفردة و
altاستخدم الخاصية > img<عند تعريف الوسم 7
لنها مهمة جدا في altاستخدم الخاصية > img<عند تعريف الوسم حFFال لFFم تظهFFر الصFFورة فFFي المتصFFفح ,وأيضFFا يجFFب تحديFFد العFFرضوالرتفاع للصورة بسب أن المتصفح يقوم بحجز مسFFاحة الصFFورة قبFFل
تحمليها
12
![Page 13: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/13.jpg)
>body<و الوسم > html<يمكن الستغناء عن الوسم 8
أي> body<و > html<يمكن الستغناء عFFن الوسFFم HTML5في >html<يمكن حذفهما من المستند ولكن ل ننصح بذلك لن الوسم
عند إضافة لغة كلغة العربية أو النجليزيFFFة , وأيضايعتبر الجذر للوثيقة > , وأيضا في الوسم html<للمتصفح يجب عليك إضافة الوسم
>body< عند فتح الصفحة بمتصفحا ت قديمة مثل IE9 دثFFوف تحFFس>body<الوسم أخطاء في المتصفح والسبب عدم إضافة
13
![Page 14: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/14.jpg)
> head<يمكن الستغناء عن الوسم 9
أي يمكن حذفها> head<يمكن الستغناء عن الوسم HTML5في من المستند , افتراضيا المتصفحا ت سوف تضيف جميع العناصFFر قبFFل
, head< الوسFFم > إلFFىbody<الوسFFم وأيضFFا يمكFFن أن تقلFFل مFFن>>head<من خلل حذف الوسم تعقيدا ت وسوم هيكلية المستند
14
![Page 15: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/15.jpg)
15
![Page 16: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/16.jpg)
الفصل الثاني
ستتعرف في هذا الفصل على الوسوم الجديدة والتي تم إضافتها فيHTML5 كاملة والخصائص الجديدة لها بشكل مفصل
الوسمTAG
<header>
تقسNNيم الصNNفحة بحيNNث تحتNNوي الصNNفحة علNNى (وظيفتNNه ) html5(هNNو وسNNم جديNNد فNNي header(مNNل الوسNNالصفحة داخ )body (ىNNداخله علNNوي بNNن أن يحتNNارجه ويمكNNس خNولي
مع) header(يختلف عن ) head(عدة وسوم للستفادة منه وهنا يجب أن ننوه إلى إن (داخNNNل ) header(و ) body(يكتNNNب خNNNارج) head(أن المعنييNNNن متشNNNابهان إل أن
body (رطNNس شNولي)header (هNNب داخلNNن أن يكتNل يمكNNفحة بNNي رأس الصNNب فNNأن يكتالعديد من الوسمة الجديدة والقديمة ويفضل أن تكون الوسمة ملئمة ومناسبة للوسم مNNن
.اجل تنظيم الصفحة وسهولة تنسيقها
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
16
HTML5 دة فيالوسوم الجدي
الوسوم الجديدة لتقسيم الصفحة
![Page 17: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/17.jpg)
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
17
![Page 18: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/18.jpg)
لكن لم يظهر تأثيره> header<في هذا المثال قمنا بتعريف الوسم
CSSوالسبب لننا لم نستخدم
18
![Page 19: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/19.jpg)
CSSمع استخدام > header<في هذا المثال قمنا بتعريف الوسم
19
![Page 20: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/20.jpg)
الوسمTAG
<article>
وظيفتNNه) HTML5(هNNو احNNد الوسNNمة الجديNNدة فNNي >article></article<الوسNNملكتابة محتوى بداخله ويمكن أن يكتNNب) body(تخصيص جزء من الصفحة داخل الوسم
لكتابة عنNوان المحتNNوى مثل و العديNNد عدة أوسمة بداخله من اجل تنظيم وتنسيق المحتوىمن الوسمة الجديدة والقديمة
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
20
![Page 21: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/21.jpg)
لكن لم يظهر تأثيره> article<في هذا المثال قمنا بتعريف الوسم CSSوالسبب لننا لم نستخدم
21
![Page 22: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/22.jpg)
22
![Page 23: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/23.jpg)
مFFن أجFFل> article<و > header<في هFFذا المثFFال عرفنFFا الوسFFمين دونCSSتقسيم صفحة الويب بشكل منظم ومنسFFق مFFع اسFFتخدام
> div<الحاجة لستخدام الوسم
23
![Page 24: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/24.jpg)
الوسمTAG
<nav>
وظيفته الساسية هي )HTML5(هو احد الوسمة الجديدة في >nav></nav<الوسمتجميع أكثر من رابط وتنظيمها والتحكم فيهFFا والFFتي تمكنFFك هFFذه الروابFFط مFFن التنقFFل داخFFل
لصفحتك menuيمكنك عمل قائمة أو موقعك
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
24
![Page 25: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/25.jpg)
25
![Page 26: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/26.jpg)
مFFن> article<> وnavو<> header< الوسFFمةفي هذا المثال عرفنا CSSأجل تقسيم صفحة الويب بشكل منظم ومنسFFق مFFع اسFFتخدام
>div<دون الحاجة لستخدام الوسم
26
![Page 27: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/27.jpg)
الوسمTAG
<section>
هNNو احNNد الوسNNمةو> article<>وهNNو شNNبيه بالوسNNم section></section<الوسNNم)body(وظيفتNNه تخصNNيص جNNزء مNNن الصNNفحة داخNNل الوسNNم) HTML5(الجديNNدة فNNي
لكتابNNة محتNNوى بNNداخله ويمكNNن أن يكتNNب عNNدة أوسNNمة بNNداخله مNNن اجNNل تنظيNNم وتنسNNيقلكتابة عنوان المحتوى مثل و العديد من الوسمة الجديدة والقديمة المحتوى
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
27
![Page 28: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/28.jpg)
28
![Page 29: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/29.jpg)
29
![Page 30: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/30.jpg)
>وsection> و<navو<> header< لوسمةفي هذا المثال عرفنا ا>article <عFFق مFFمن أجل تقسيم صفحة الويب بشكل منظم ومنس
>div< دون الحاجة لستخدام الوسم CSSاستخدام
30
OUTPUTE
![Page 31: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/31.jpg)
الوسمTAG
<aside>
وظيفتهNNا الساسNNية) HTML5(احد الوسمة الجديدة في > aside></aside<الوسمتخصNNيص جNNزء علNNى جNNوانب الصNNفحة سNNواء علNNى اليميNNن أو الشNNمال ويمكNNن ان يحتNNوي
والتحكم فيهأخرى لتنسيق المحتوىبداخله على أوسمة
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
31
![Page 32: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/32.jpg)
32
![Page 33: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/33.jpg)
33
![Page 34: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/34.jpg)
34
OUTPUTE
![Page 35: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/35.jpg)
الوسمTAG
<footer>
وظيفتNNNه) HTML5(هNNNو احNNNد الوسNNNمة الجديNNNدة فNNNي > footer></footer<الوسNNNم(لكتابNNة محتNNوي بNNداخله)body(تخصNNيص جNNزء الخيNNر أو ذيNNل الصNNفحة داخNNل الوسNNم
ويمكNNن أن يكتNNب بNNداخله عNNدة أوسNNمة لتسNNهيل التنسNNيق) تصل بنNNااكحقوق الموقع مثل أو وغيرها من الوسمة الجديدة) article(و) header(وتنظيم وتقسيم المحتوى بداخله كا
والقديمة
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
35
![Page 36: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/36.jpg)
36
![Page 37: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/37.jpg)
37
![Page 38: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/38.jpg)
38
OUTPUTE
![Page 39: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/39.jpg)
HTML4 HTML5
<div id=”header”> <header>
<div id=”nav”> <nav>
<div id=”aside”> <aside>
<div id=”section”> <section>
<div id=”article”> <article>
<div id=”footer”> <footer>
39
في تقسيم الصفحةHTML5 و HTML4الفرق بين
![Page 40: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/40.jpg)
الوسمTAG
<mark>
وظيفتNه إضNNافة) HTML5(هNNو احNNد الوسNNمة الجديNNدة فNNي > mark></mark<الوسمتضليل على النص أو نصوص
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
40
HTML5وسوم جديدة في
![Page 41: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/41.jpg)
41
![Page 42: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/42.jpg)
الوسمTAG
<details>
وظيفتNNه) HTML5(هNNو احNNد الوسNNمة الجديNNدة فNNي > details></details<الوسNNممعلومات إضافية بحيث يمكن للزائر بعرض أو إخفاؤها للمعلومات وحتى يكتمNNل إضافة
>summery<هذا الوسم يجب إضافة الوسم
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
openتسمح هذه الخاصية بإظهار التفاصيل مباشرة دونإخفاءها
42
![Page 43: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/43.jpg)
الوسمTAG
<summary>
)HTML5(هNNNو احNNNد الوسNNNمة الجديNNNدة فNNNي > summary></summary<الوسNNNم تفاصيل المعلومات وإظهارها وظيفته إضافة
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
43
![Page 44: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/44.jpg)
> ثم عرفنا بFFداخله الوسFFم <detailsفي هذا المثال عرفنا الوسم <summaryذهFFار هFFن اظهFFة ويمكFFيل مخفيFFع تفاصFFل وضFFن اجFFم <
)Programming Languagesالتفاصيل في الضغط على السهم بجانب و
44
![Page 45: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/45.jpg)
الوسمTAG
<dialog>
إظهاروظيفته ) HTML5(هو احد الوسمة الجديدة في > dialog></dialog<الوسمصندوق أو نافذة شبيه بالويندوز
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
openهذه الخاصية تسمح بإظهار النافذة على المتصفح
45
![Page 46: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/46.jpg)
style> ثFFم عرفنFFا الخاصFFية dialogفFFي هFFذا المثFFال عرفنFFا الوسFFم <open لتوسFFيط الوسFFم وعرفنFFا الخاصFFية text-alignلضFFافة الخاصFFية
dialog وبدونها لن يظهر dialogوهي مسئولة عن عرض
46
![Page 47: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/47.jpg)
47
![Page 48: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/48.jpg)
الوسمTAG
<progress>
وظيفته) HTML5(هو احد الوسمة الجديدة في > progress></progress<الوسمإظهار سير المهام أو سير التقدم وهي شبيها بالموجودة في المتصفحات
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
maxهذه الخاصية تحدد مقدار العمل المتطلب في المهمةفي المجموع
valueهذه الخاصية تحدد مقدار المهمة المكتملة
48
![Page 49: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/49.jpg)
49
![Page 50: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/50.jpg)
50
![Page 51: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/51.jpg)
الوسمTAG
<time>
مNNنوظيفتNNه يّمكنNNك) HTML5(هو احد الوسمة الجديدة في > time></time<الوسمقراءة التاريخ والوقت ويمكن استخدام الوسم لترميز التواريخ والوقNNات بطريقNNة المقNNروء
آليا وايضا إضافة تذكير عيد ميلد أو الحداث المجدولة إلى تقويم المستخدم
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
datetime تمثل الوقت والتاريخ المقروء آليا من خلل الوسم>time<
51
![Page 52: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/52.jpg)
52
![Page 53: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/53.jpg)
الوسمTAG
<figure>
وظيفتNه الساسNNية) HTML5(احNNد الوسNNمة الجديNNدة فNNي > figure></figure<الوسمللتحكم فيها وتنسيقها >img<تخصيص مجموعة من الصور باستخدام الوسم
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
53
![Page 54: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/54.jpg)
54
![Page 55: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/55.jpg)
الوسمTAG
<figcaption>
وظيفتNNه) HTML5(احد الوسمة الجديدة في > figcaption></figcaption<الوسم )figure(الساسية تخصيص اسم لكل صورة حيث يكتب هذا الوسم داخل الوسم
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
55
![Page 56: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/56.jpg)
56
![Page 57: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/57.jpg)
أسئلة الفصل الثاني
- ما هي وسوم تقسيم الصفحة مع ذكر مثال لكل وسم؟1
> مع ذكر مثال؟mark- ما هو الوسم <2
> مع ذكر مثال؟details-ما هو الوسم <3
> مع ذكر مثال ؟figure-ما هو الوسم <4
CSS مع HTML5-صّمم الشكل الذي فوق باستتخدام وسوم 5
57
![Page 58: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/58.jpg)
الفصل الثالث
HTML5في هذا الفصل سFFوف تتعFFرف علFFى الوسFFمة الجديFFدة فFFي الخاصFFة فFFي إدراج المقFFاطع الصFFوتية ومقFFاطع الفيFFديو والتحكFFم فFFي
خصائصهما بشكل مفصل .
الوسمTAG
<audio>
وظيفتNه الساسNية) HTML5(احNNد الوسNNمة الجديNNدة فNي > audio></audio<الوسNمكمNNا)adobe flash player(هي تشغيل ملفات صوتية بNNدون السNNتعانة بمشNNغلت مثNNل
, HTML4(في النسخة السابقة من هذا بالضافة انه يدعم في كل المتصفحات لكNNن كNNل) متصفح يدعم امتداد أو أكثر من امتداد
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
58
Media Elementsوسوم الوسائط
![Page 59: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/59.jpg)
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
controlsغيل اوFFن تشFFوتي مFFتسمح لك بالتحكم في الملف الصتوقيف الصو ت ورفع الصو ت او تقليله وتأخذ القيمة
)controls(
srcيةFFبيهه بالخاصFFي شFFوتي وهFFلتحديد مسار الملف الصsrc >الخاصة بتحديد طريقة مسار الوسم img<
loopذFFيسمح لك بتكرار ملف الصوتي في حالة النتهاء وتأخ)1,2,3(.....,قيمة عددية
autoplayهFFن نفسFFائي مFFو ت تلقFFف الصFFغيل ملFFك بتشFFيسمح ل )true/false(وتأخذ القيمة
hiddenلخفاء المشغل من المتصفح
preloadلدعم تحميل الملف الصوتي وتأخذ القيمة وauto(
59
![Page 60: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/60.jpg)
الصيغ التي يدعمها كل متصفح/المتصفحات والمتدادات
الصيغة/المتدادالمتصفحIE+9(.mp3(انترنت اكسبلورار
Firefox(.wav, .ogg(فاير فوكس
chrome(.mp3, .mp4,.wav, .ogg(كروم
safari(.mp3, .wav(سفاري
opera(.wav, .ogg(أوبرا
60
![Page 61: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/61.jpg)
الوسمTAG
<video>
وظيفتNNه الساسNNية) HTML5(احNNد الوسNNمة الجديNNدة فNNي > video></video<الوسNNمكما في)adobe flash player(هي تشغيل ملفات الفيديو بدون الستعانة بمشغلت مثل
, HTML4(النسخة السNNابقة مNNن هNNذا بالضNNافة انNه يNNدعم فNNي كNNل المتصNNفحات لكNNن كNNل) متصفح يدعم امتداد أو أكثر من امتداد
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
controlsغيل اوFFن تشFFوتي مFFتسمح لك بالتحكم في الملف الصتوقيف الصو ت ورفع الصو ت او تقليله وتأخذ القيمة
)controls(
srcيةFFبيهه بالخاصFFي شFFوتي وهFFلتحديد مسار الملف الصsrc >الخاصة بتحديد طريقة مسار الوسم img<
61
![Page 62: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/62.jpg)
loopذFFاء وتأخFFة النتهFFيسمح لك بتكرار ملف الصو ت في حال)1,2,3(.....,القيمة
autoplayهFFن نفسFFائي مFFو ت تلقFFف الصFFغيل ملFFك بتشFFيسمح ل )true/false(وتأخذ القيمة
hiddenلخفاء المشغل من المتصفح
preloadلدعم تحميل الملف الصوتي وتأخذ القيمة وauto(
heightلتحديد ارتفاع الفيديو
widthلتحديد عرض الفيديو
posterغيلFFل تشFة قبFFورة افتتاحيFFة صFFع خلفيFFتّمكنك من وض الفيديو
الصيغ التي يدعمها كل متصفح/المتصفحات والمتدادات
الصيغة/المتدادالمتصفحIE+9(.mp3,.mp4(انترنت اكسبلورار
Firefox(.mp4, .wav, .ogg, .webM(فاير فوكس
chrome(.mp3, .mp4,.wav, .ogg, .webM(كروم
safari(.mp3, .mp4, .wav(سفاري
opera(.mp4, .wav, .ogg, .webM(أوبرا
62
![Page 63: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/63.jpg)
63
![Page 64: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/64.jpg)
الوسمTAG
<source>
وظيفتNNه تعريNNف مسNNارمقطع) HTML5(احNNد الوسNNمة الجديNNدة فNNي > source<الوسNNم> ووaudio فNNي كNNل مNNن الوسNNم وsrcالفيNNديو او الصNNوتي بNNدل مNNن اسNNتخدام الخاصNNية
video<
الخصائصsrcلتعريف مسار المقطع الصوتي أو الفيديو
type لتحديد نوع المشغل والمتداد
64
![Page 65: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/65.jpg)
65
![Page 66: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/66.jpg)
أسئلة الفصل الثالث
> مع ذكر مثال؟video-ما هو الوسم <1
> مع ذكر مثال؟audio- ما هو الوسم <2
> مع ذكر مثال؟source-ما هو الوسم <3
مع ذكر مثال ؟poster-ما هي الخاصية 4
66
![Page 67: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/67.jpg)
الفصل الرابع
الوسمTAG
<canvas>
يسNNتخدم لرسNم) html5(هو احNNد الوسNNمة الجديNNدة فNNي > canvas></canvasالوسمو)canvas(على الNNويب ومعنNNى ال) java script(باستخدام) graphics(الرسومات أو
تحNNNددها فNNNي الصNNNفحة باسNNNتخدام) container(هNNNي عبNNNارة عNNNن مسNNNاحة أو صNNNندوق)java script(أما في حالة الرسم فيجNNب اسNتخدام ) height , width(خصائصه مثل
هذا بالضافة إلى دعمه جميع المتصفحات
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
67
Graphicsالرسوما ت
![Page 68: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/68.jpg)
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
height لتحديد الرتفاع للcanvas
width لتحديد العرض للcanvas
الخلصة
( عبارة عن صندوق أو حاوية بداخله يمكن أن ترسم باستخدام ) canvas(وهو أن - 1java script(
تتم عن) java script(للرسم بداخله باستخدام ) canvas(طريقة استدعاء الوسم- 2.) id(طريق خاصية
68
![Page 69: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/69.jpg)
69
![Page 70: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/70.jpg)
الوسمTAG
<svg>
>svg></svg < يNNدة فNNمة الجديNNد الوسNNو احNNه)HTML5 (كالNNم الشNNتخدم لرسNNيسيمكنNNك رسNNم) svg(إل أن الفرق بينهما أن الوسم) canvas(الهندسية وهو شبيه بالوسم
هNNذا بالضNNافة يعتNNبر أكNNثر) JavaScript(الشNNكال الهندسNNية بNNدون الحاجNNة إلNNى اكNNواد ) أمFFا بخصFFوص الرسFFم فيجFFب أن يكFFون بيFFنcanvas(مرونNNNة مNNNن الوسNNNم
> والشكال التي يمكن رسمها svg></svg<وسمي
) وأشكال أخر star),نجمةوcircle),الدائرةوrectالمستطيلو
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
height لتحديد الرتفاع للsvg
width لتحديد العرض للsvg
70
![Page 71: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/71.jpg)
حيث ان الوسم يبدأ بوسم بداية ووسم نهاية ثم قمنا بتعريف>svg<قمنا بتعريف الوسمبعض الخصائص وهي الطول و العرض وبناء إطار وأعطيناه اللون الزرق
:لرسم دائرة ثم عرفنا بعض الخصائص له وهي>circle<وعرفنا وسم جديد وهو
71
![Page 72: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/72.jpg)
cx: مكان الدائرة من حيث المحور السيني
cy: مكان الدائرة من حيث المحور الصادي
r: نصف قطر الدائرة
style="fill:blue”: قمنا بإعطاء الدائرة اللون الزرق
72
![Page 73: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/73.jpg)
حيث ان الوسم يبدأ بوسم بداية ووسم نهاية ثم قمنا بتعريف>svg<قمنا بتعريف الوسملرسم دائرة ثم عرفنا بعض>rect<بعض الخصائص وعرفنا وسم جديد وهو
:الخصائص لها وهيwidth:عرض المستطيل
hieght: ارتفاع المستطيل
style="fill:blue”: قمنا بإعطاء المستطيل اللون الزرق
73
![Page 74: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/74.jpg)
حيث ان الوسم يبدأ بوسم بداية ووسم نهاية ثم قمنا بتعريف>svg<قمنا بتعريف الوسملرسم نجمة ثم عرفنا بعض>polygon<بعض الخصائص وعرفنا وسم جديد وهو
:الخصائص لها وهيpoints: وهي عبارة عن عشرة نقاط يتم من خللها رسم النجمة
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"
حيث fillتخصيص لون
strokeتخصيص لون للحدود او الطار للنجمة stroke-widthتخصيص حجم للطار أو الحدود للنجمة
fill- rule جزء من خصائص Fillstroke وتأخذ القيمة evenodd
الخصFFائص فFFي هFFذا المثFFال يمكFFن اسFFتخدامها مFFعالرسFFوما ت الخFFر مثل يمكنFFك اسFFتخدام الخاصFFية
stroke أو stroke-widthمع الدائرة أو المستطيل
74
![Page 75: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/75.jpg)
75
>svgإضافة النصوص الى الوسم <
![Page 76: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/76.jpg)
حيث ان الوسم يبدأ بوسم بداية ووسم نهاية ثم قمنا بتعريف>svg<قمنا بتعريف الوسمبعض الخصائص وهي الطول و العرض وأعطيناه لون الزرق
:لرسم دائرة ثم عرفنا بعض الخصائص لها وهي>circle<وعرفنا وسم جديد وهوcx: مكان الدائرة من حيث المحور السيني
cy: مكان الدائرة من حيث المحور الصادي
r: نصف قطر الدائرة
style="fill:blue”: قمنا بإعطاء الدائرة اللون الزرق
> حيث هذا الوسم يسمح لك بالكتابةtextوعرفنا وسم جديد وهو <أو إضافة نصوص على الدائرة أو أي شكل أخر من الرسوما ت السابقة
وتأخذ الخصائص التالية fill: لتحديد لون للنصfont-size:لتحديد حجم الخطfont-family:لتحديد نوع الخطx:لتحديد مكان النص من حيث المحور السيني y:لتحديد مكان النص من حيث المحور الصادي
بين وسم البداية ووسمSVGثم أغلقنا الوسم وقمنا بكتابة الكلمة النهاية
76
![Page 77: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/77.jpg)
بيحث تحتوي الرسوما ت على مجموعةlinear Gradientيمكن إضافة من اللوان
الوسمTAG
<defs>
>defs></defs < يNNNدة فNNNمة الجديNNNد الوسNNNو احNNNه)HTML5وهو اختصار الى (definition> مFFFف الوسFFFك تعريFFFث يمكنFFFبحي linearGradientنFFFبي<>defsوسمي <
الوسمTAG
<linearGradient>
>linearGradient></linearGradient < يNNNNدة فNNNNمة الجديNNNNد الوسNNNNو احNNNNه)HTML5 (عن طريق يستخدم لعرض مجموعة من اللوان id الخاص بالوسم
الخصائصidتسمح لك بتخصيص id ل linearGradientواستخدامه مع
الرسومات
77
linear Gradientإضافة
![Page 78: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/78.jpg)
الوسمTAG
<stop>
>stop></stop < هو احد الوسمة الجديدة في)HTML5 ( تخدمNNوانيسNNف اللNNلتعريوالخصائص الخرى على الرسومات وهو المسئول عن تحديد اللوان
الخصائصStop-colorتحديد اللون بحيث تكون القيمة بالنسبة المئوية
لضافة أكثر من لون معاstopويمكن إضافة أكثر من
styleلضافة خصائص مثل اللون والشفافية
78
![Page 79: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/79.jpg)
بإسمid> وعرفنا الخاصية linearGradient<في هذا المثال عرفنا الوسم grad1بعد ذلك عرفنا الوسم و stopافةNNن إضNNمن أجل تحديد اللوان وقلنا بأنه يمك <
لضNNافة لNNونstop-color> وعرفنNNا الخاصNNية stopأكثر مNNن لNNون باسNNتخدام الوسNNم وid لضNNNافة شNNNافافية للNNNون بعNNNد ذلNNNك قمنNNNا بإضNNNافة stop-opacityوايضNNNا الخاصNNNية
>circle فNNNNي الوسNNNNم وfill> فNNNNي الخاصNNNNية linearGradientالخNNNNاص بالوسNNNNم وبالطريقة التالية:
fill:url(#grad1)
79
![Page 80: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/80.jpg)
80
![Page 81: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/81.jpg)
الخلصة
) vectorلتعريف الصور و التي هي من نوع فيكتور( SVGتستخدم
)bitmap (المستخدمة في الويب.
1
XMLمع تقنيات لغة SVGتستخدم 2
bitmapجودتها عند تكبير الصورة بعكس صور من نوع SVGلتفقد صور .gifو pngو jpgمثل
3
.يمكن تحريكه SVGكل عنصر موجود داخل ملف 4
W3Cإحدى التقنيات المطورة من خلل منظمة الويب العالمية SVGتعتبر لغة 5
SVGالمزايا الخاصة عند استخدام
1 .من خلل برنامج محرر نصوص SVGيمكن إنشاء و تعديل صور
.و فهرستها و كتابتها بالكود فقط و ضغطها SVGيمكن البحث عن صور 2
.متغيرة الحجم SVGتعتبر صور 3
.بجودة و دقة عالية SVGيمكن طباعة صور 4
.بشكل كبير دون أن يتغير دقة و جودة الصورة SVGيمكن تكبير صور 5
81
![Page 82: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/82.jpg)
أسئلة الفصل الرابع
>مع تطبيق مثال ؟canvas-ما الوسم <1> مع ذكر الشكال الرسومية ؟svg-ما هو الوسم <2>svg- صمم الشكل التالي باستخدام الوسم <3
>svg- صمم الشكل التالي باستخدام الوسم <4
82
![Page 83: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/83.jpg)
الفصل الخامس
و علFFى الرغFFم مFFنHTML5تم إضافة وسوم جديد فFFي النمFFاذج فFFي أنFFكذلFFك فFFإن هFFذه الوسFFوم الجديFFدة ل تFFدعمها كFFل المتصFFفحا ت ال
يمكنك استخدامهم بشكل طبيعي في حال عدم دعم المتصFFفح لهFFم .سيظهر حقل نص عادي
الوسوم الجديدة هي:1.>datalist<
2.>keygen<
3.>output<
83
Formsالنماذج
![Page 84: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/84.jpg)
الوسمTAG
<datalist>
>datalist></datalist < يFFدة فFFمة الجديFFد الوسFFو احFFه)HTML5( وهذا الخاصية احد الخصFFائصlistيستخدم هذا الوسم مع الخاصية
وهي تعتمFFد علFFى الوسFFم <HTML5> في inputالجديدة للوسم <detalistه وFFن خللFFبقا مFFه مسFFر معرفFFى عناصFFوي علFFذي يحتFFال <>input<للوسFFم autocompleteلتقديم ميFFزة >datalist<يستخدم
حيث سيشاهد المستخدم قائمة منسدلة للعناصFFر المعرفFFة مسFFبقا >input<الخاصة بوسم الدخال
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
84
![Page 85: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/85.jpg)
) مFFن أجFFل اسFFتخدامbrowsers واعطيناهFFا القيمFFة وlistعرفنا خاصFFية بعFFد ذلFFك عرفنFFاid> عن طريق الخاصFFية detalistقيمتها مع الوسم <
> من أجل كتابة القيم التي سوف تظهر فFFي الوسFFمoptionالوسم <>input> ثم قمنا بإغلق الوسم <detalist> و يمكن تشبيه الوسم<
detalist> بالوسم <select في <HTML4
85
![Page 86: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/86.jpg)
الوسمTAG
<keygen>
>keygen></keygen < يFFدة فFFمة الجديFFد الوسFFو احFFه)HTML5(لتقFFديم طريقFFة آمنFFة> keygen<الهFFدف مFFن اسFFتخدام الوسFFم
موّلد مفاتيح لحقول> keygen<حيث يخصص الوسم للمستخدمين.عنFFد ارسFFال النمFFوذج سFFيتم توليFFد مفتFFاحين واحFFد .خاصة بالنمFFاذج
يتFFم تخزيFFن المفتFFاح الخFFاص. ) Public) و الخFFر عFFاموPrivateخاصوكمFFا يقFFوم المفتFFاح. محليا أما المفتاح العام يتم ارساله الى السيرفر
العFFFام بإنشFFFاء شFFFهادة موثوقيFFFة للمسFFFتخدم مFFFن أجFFFل التصFFFفح أوPHP.وغالبFFا يسFFتخدم هFFذا الوسFFم مFFع صFFفحا ت المسFFتقبلي ASP.NET
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
86
![Page 87: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/87.jpg)
87
![Page 88: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/88.jpg)
الوسمTAG
<output>
>output></output < يFFدة فFFمة الجديFFد الوسFFو احFFه)HTML5(لتقديم نتيجة حساب معينة تمامFFا عنFFد> output<يستخدم الوسم
.استخدام الكواد البرمجية لعملية الحساب
الخصائصid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخل الوسمنفسه
nameتسمح بعرض نتيجة العملية الحسابية ويمكناستخدامها عن طريق أكواد برمجية مثل جافا سكربت
PHPأو
88
![Page 89: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/89.jpg)
> وعرفنFFا خاصFFية جديFFدةformفي هذا المثال قمنا بتعريف الوسFFم < )وهي مسئولة عFFن العمليFFة الحسFFابية وتحويلهمFFاoninputتسمى و
>inputإلى عدد صحيح بحيث تقوم بجمع القيمFFتين مFFن الوسFFمين <> وعرفناoutput) .و بعد ذلك عرفنا الوسم <valueمن خلل الخاصية و
مFFن أجFFل عFFرض النتيجFFة كمFFا هFFوx وتأخFFذ القيمFFة nameالخاصية موضح في المثال
89
![Page 90: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/90.jpg)
90
![Page 91: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/91.jpg)
formsعلى العديد من المدخلت الجديدة الخاصة بالنماذج HTML5تحتوي
.و التي تسمح بالتحكم التام بحقول المدخلت .
الخصائص الجديدة:
•color
•date
•datetime
•datetime-local
•month
•number
•range
•search
•tel
•time
•url
•week
على الرغم من أنها مدخلت جديدة ال أنها ليست مدعومة من قبل جميع
المتصفحات و على كل حال يمكنك استخدامها و اذا كان المتصفح ليدعمها
.عندها ستظهر بشكل نص عادي و لن تأثر على حقول المدخلت الخرى
91
HTML5> الجديدة في inputأنواع المدخل ت الجديدة للوسم <
![Page 92: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/92.jpg)
Colorنوع المدخل
وعن]]دtype> من خلل الخاصية inputيستخدم اللون في حقل المدخلت<
مرور زر الماوس على اللون يمكنك الضغط على مربع اللون فتظهر اللوان
كلها ويمكنك أن تختار أي لون
92
![Page 93: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/93.jpg)
dateنوع المدخل
يسمح للمستخدم تحديد التاريخ والتحكم في اليام و الشهر و السنة
93
![Page 94: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/94.jpg)
datetime-localنوع المدخل
اح للمس]]تخدم بتحدي]]د التاري]]خ وس]]ملل يستخدم ه]]ذا الن]]وع م]]ن الم]]دخلت
الوقت محليا حسب توقيت بلده
94
![Page 95: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/95.jpg)
emailنوع المدخل
.للحق]]]ل ال]]]ذي يتطل]]]ب ادخ]]]ال بري]]]د الك]]]تروني يس]]]تخدم الم]]]دخل
نوع البري]]د اللك]]تروني كم]]ا يمكنه]]ا التنب]]ه بالبري]]د درك بعض المتصفحات ت
.للبريد. comاو @ الغير فعال مثل يجب اضافة اشارة
95
![Page 96: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/96.jpg)
monthنوع المدخل
.يس]]]]]]]]]مح للمس]]]]]]]]]]تخدم باختي]]]]]]]]]ار الش]]]]]]]]]هر و الس]]]]]]]]]نة
96
![Page 97: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/97.jpg)
numberنوع المدخل
لضافة أرقام في حقل الدخال و التي يجب أن تكون قيم numberيستخدم المدخل
عدديةحصرا=.
اذا أردت استخدام تقييد حول استخدام الرقام يمكنك استخدام الخص]]ائص
:التالية
•max: تحدد القيمة العظمى المسموحة.
•min:تحدد القيمة الدنيا المسموحة.
•step:تحدد الرقم الصحيح المدخل.
•value:تحدد القيمة الفتراضية.
•Required: جعل الحقل إجباري أي يجب أن يحتوى على قيمة
97
![Page 98: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/98.jpg)
rangeنوع المدخل
كما يمكن تحديد ه]]ذه. يستخدم هذا المدخل لدخال عدد معين من القيم
.القي]]]]]]]]]]م و تقيي]]]]]]]]]]دها لع]]]]]]]]]]دد الرق]]]]]]]]]]ام المقبول]]]]]]]]]]ة
اذا أردت استخدام تقييد حول استخدام الرقام يمكنك استخدام الخص]]ائص
:التالية
•max: تحدد القيمة العظمى المسموحة.
•min:تحدد القيمة الدنيا المسموحة.
•step:تحدد الرقم الصحيح المدخل.
•value:تحدد القيمة الفتراضية.
•Required: جعل الحقل إجباري أي يجب أن يحتوى على قيمة
98
![Page 99: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/99.jpg)
searchنوع المدخل
.يستخدم حقل البحث للحقول الخاصة لصنع محرك بحث
99
![Page 100: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/100.jpg)
telنوع المدخل
لدخال رقم هاتف يستخدم هذا المدخل
)safari 8) مدعومة فقط على المتصفح سفاريخtelالخاصية خ
100
![Page 101: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/101.jpg)
Timeنوع المدخل
يستخدم هذا المدخل لتحديد الوقت
) Firefox or Internet Explorer) غير مدعومة على المتصفحان خtimeالخاصية خ
101
![Page 102: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/102.jpg)
urlنوع المدخلللمدخل ت التي تحتوي على روابط خارجية urlيستخدم هذا المدخل
. .عند ارسال النموذج urlيتم تفعيل قيمة الرابط التشعبي
) Internet Explorer ) غير مدعومة على المتصفح خurlالخاصية خ
102
![Page 103: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/103.jpg)
weekنوع المدخل هذا المدخل لتعريف السبوع في المتصفحيستخدم
) Internet Explorer ) غير مدعومة على المتصفح خweekالخاصية خ
103
![Page 104: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/104.jpg)
أسئلة الفصل الخامس
>>datalist<-ما هو الوسم 1
-ما هي الوسوم الطلوبة لبناء هذه العملية الحسابية >2
-ما هي الوسوم الطلوبة لتصميم نموذج التسجيل والدخول في3
facebook خاستخدم وسوم<HTML5 مع CSS(
104
![Page 105: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/105.jpg)
معHTML5-ما هي الوسوم الطلوبة لتصميم النموذج >خاستخدم وسوم 4
CSS(
معHTML5-ما هي الوسوم الطلوبة لتصميم النموذج >خاستخدم وسوم 5
CSS(
105
![Page 106: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/106.jpg)
الفصل السادس
حيFFث تFFمCSS3سوف تتعرف في هذا الفصل الخصائص الجديFFدة فFFي إضافة الكثير من الخصائص الجذابة لعمل تصميم بشكل ملفت وجميل
وإضافة بعض اللمسا ت الجميلة على موقعك.
:CSS3والخصائص الجديدة في 1CSS3 Rounded Corners
2CSS3 Border Images
3CSS3 Backgrounds
4CSS3 Gradients
5CSS3 Shadows
6CSS3 Text
7CSS3 Fonts
8CSS3 2D Transforms
9CSS3 3D Transforms
10CSS3 Transitions
11CSS3 Animations
12CSS3 Multiple Columns
13CSS3 User Interface
106
CSS3
![Page 107: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/107.jpg)
Rounded Corners(border-radius) الخاصية
تستخدم هذه الخاصيىة لعمل مايلن في زوايا الطار ويمكنك التحكFFمفي حجم المايلن أيضا و يمكنك التحكم في كل أجزاء الحواف
107
CSS3 Rounded Corners
![Page 108: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/108.jpg)
108
![Page 109: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/109.jpg)
واعطيناهFFا القيمFFةborder-radiusفي هذا المثال استخدمنا الخاصFFية 15px 50 وpx ةFث القيمFF15 بحيpxارFFى اليسFايلن أعلFل مFFام بعمFق
قام بعمل مايلن أعلى اليمين وأسFFفل50pxوأسفل اليمين والقيمة اليسار
109
50px50px
15px
![Page 110: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/110.jpg)
Border-imageالخاصية
تسFFتخدم هFFذه الخاصFFيىة لضFFافة إطFFار عبFFارة عFFن صFFورة بFFدل مFFن) borderالستايل الخر للخاصية و
110
Border-image
![Page 111: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/111.jpg)
لضFFافةborder-image أضFFفت الخاصFFية 7في هذا المثال في السطر round ل 100 للصورة وإعطاء قيمة urlإطار صورة وتحديد
roundتعني تقريب الصورة وتكبيرها كلما زاد الرقم
-webkitنفس المثال السابق لكني لم أضف -
111
![Page 112: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/112.jpg)
ربما ل تدعمها كل المتصفحا ت أيCSS3في بعض الخصائص ل يظهر تأثيرها علFى المتصFFفحا ت وحFFتى يظهFر يجFب إضFFافةخاصية دعم المتصفح قبFFل أي خاصFFية كمFFا فFFي المثFFال قبFFل
السابق.
-webkit يدعم المتصفح-google و safari-moz يدعم المتصفح -firefox-o يدعم المتصفح -opera
112
![Page 113: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/113.jpg)
Border-image-outsetالخاصية
تستخدم هذه الخاصFFيىة لتوسFFيع صFFورة الطFFار بمقFFدار يتجFFاوز حFFدودالطار
113
![Page 114: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/114.jpg)
Background-originالخاصية
تستخدم هذه الخاصيىة لتحديد بدء عرض الصورة وتأخذ ثلث حال ت1-background-origin: border-box(ةFFن بدايFFورة مFFدء الصFFرض بFFلع(الطار2- background-origin: content-box(ةFFن بدايFFورة مFFلعرض بدء الص(المحتو 3-background-origin: padding-box(ةFFد الحافFFلعرض بدء الصورة بع(بمسافة قليلة
114
background
![Page 115: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/115.jpg)
م]]ع القيم]]ةBackground-origin قم]]ت بتحدي]]د الخاص]]ية 11في الس]]طر
border-boxلعرض الصورة مع بداية الطار كما في المثال
115
![Page 116: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/116.jpg)
م]]ع القيم]]ةBackground-origin قم]]ت بتحدي]]د الخاص]]ية 11في الس]]طر
content-boxلعرض الصورة مع بداية المحتوى كما في المثال
116
![Page 117: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/117.jpg)
م]]ع القيم]]ةBackground-origin قم]]ت بتحدي]]د الخاص]]ية 11في الس]]طر
padding-boxلعرض الصورة بعد الحافة بداية الطار بمسافة قليل]]ة كم]]ا
في المثال
117
![Page 118: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/118.jpg)
Background-sizeالخاصية
تستخدم هذه الخاصFFيىة للتحكFFم فFFي حجFFم الخلفيFFة أو الصFFورة فFFيصفحة الويب وتأخذ ثلث حال ت
background-size: cover(فحةFFم الصFFة كحجFFم الخلفيFFل حجFFلجع(الويبbackground-size: containلجعل حجم الخلفية بحجم صغير اذا كانت الخلفية كبيرة وتكبير حجم)(الخلفية اذا كانت صغيرةbackground-size: auto(لجعل حجم الخلفية بحجمها الطبيعي)
118
![Page 119: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/119.jpg)
119
![Page 120: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/120.jpg)
120
![Page 121: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/121.jpg)
121
![Page 122: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/122.jpg)
Background-clipالخاصية
تستخدم هذه الخاصيىة لدراج لون أو خلفية في منطقة محددةوتأخذ ثلث حال ت
1- background-clip: border-box(الحالة الفتراضية)2- background-clip: padding-box(لدراج كامل المنطقة المحددة)3-background-clip: content-box( لدراج على مستو المحتو)
122
![Page 123: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/123.jpg)
أضفنا الخاصية :10المثال واضح جدا وهو في السطر
background-clip: padding-box(لدراج لون لكامل المنطقة المحددة)
123
![Page 124: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/124.jpg)
أضفنا الخاصية :10المثال واضح جدا وهو في السطر
background-clip: content-box( لدراج لون على مستو المحتو)
124
![Page 125: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/125.jpg)
أضفنا الخاصية :10المثال واضح جدا وهو في السطر
background-clip: content-box( لدراج خلفية على مستو المحتو)
125
![Page 126: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/126.jpg)
كانت هناط طريقتين لتمثيل اللوان وهما CSSفي -يمكن إضافة لون من خلل اسم اللون1)Hex-يمكن إضافة اللون من خلل نظام السادس عشر أو و2
تم إضافة ثلث طرق جديدة لتمثيل أو إضافة اللون وهيCSS3في
1-RBGA: مع تحديد خاصيةRBG وهي مجموعة من قيم اللون وهي امتداد ل
الشفافية أو التعتيم والتفتيح للون
rgba(red, green, blue, alpha) بحيث
1-RBGهيو red, green, blueهي قيم اللوان ويأخذ كل لون قيمة(255 إلى 0 تترواح من
2 -alpha مسئولة عن تحديد الشفافية أو يمكن القول بخاصية التعتيم والتفتيح للون. وتأخذ القيمة عادة من
0.1,0.2,0.3,0.4,0.5,...1
126
Color
![Page 127: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/127.jpg)
لتمثيل اللون واسخدمتbackground أضفت الخاصية 9في السطر بحيث RBGAنظام
rbga (0,255,0,0.5) ) تمثل اللون الخضر والقيمة الخيرة0,255,0اول ثلث قيم وهي و
) تمثل درجة التفتيح والتعتيم للون0.5(
127
![Page 128: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/128.jpg)
نفس المثال السابق ولكن الختلف في درجة التعتيم والتفتيح للون
128
![Page 129: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/129.jpg)
2-HSL: وهي اختصار الى
hsl:(hue, saturation, lightness)
بحيث
1 -hue هي درجة اللون وتأخذ اللون الحمر360 أو 0• اللون الخضر120• اللون الزرق240•
2 - saturation: مسئولة عن الشباع اللون وتكون بالنسبة المئوية % يعني اللون كامل 100 بحيث إذا كانت النسبة
3 -lightness 0 وتكون بالنسبة المئوية بحيث إذا كانت النسبة%% يعني لون أبيض100يعني لون أسود و إذا كانت
129
![Page 130: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/130.jpg)
130
![Page 131: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/131.jpg)
131
![Page 132: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/132.jpg)
قمت بالتالي 6في السطر
% أي اللون الحمر0) وهي hue-القيمة الولى تمثل و1
% أي اللون كامل100) وهي saturation-القيمة الثانية تمثل و2
% أي اللون البيض100) وهي lightness- القيمة الثالثة تمثل و3وبذلك اختفى اللون الحمر
قمت بالتالي 7في السطر
132
![Page 133: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/133.jpg)
% أي اللون الحمر0) وهي hue-القيمة الولى تمثل و1
% أي اللون كامل100) وهي saturation-القيمة الثانية تمثل و2
% أي اللون السود0) وهي lightness- القيمة الثالثة تمثل و3وبذلك اختفى اللون الحمر
3-HSLA: واختصار إلى alpha وهو نفس السابق لكن مع إضافة
hsla:(hue, saturation, lightness, alpha)
بحيث
1 -hue هي درجة اللون وتأخذ اللون الحمر360 أو 0• اللون الخضر120• اللون الزرق240•
2 - saturation: مسئولة عن الشباع اللون وتكون بالنسبة المئوية % يعني اللون كامل 100 بحيث إذا كانت النسبة
3 -lightness 0 وتكون بالنسبة المئوية بحيث إذا كانت النسبة%% يعني لون أبيض100يعني لون أسود و إذا كانت
4 -alpha مسئولة عن تحديد الشفافية أو يمكن القول بخاصية
التعتيم والتفتيح للون. وتأخذ القيمة عادة من
0.1,0.2,0.3,0.4,0.5,...1
133
![Page 134: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/134.jpg)
المثال واضح ل يحتاج إلى شرح فقط الجديد تم إضافة قيمة جديدة والمسئولة عن التعتيم والتفتيح للونalphaوهي
134
![Page 135: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/135.jpg)
) توفرها لك .Gradients(إذا كنت من محبي ألوان قوس قزح إذا) في الدروس السابقة فFFي فصFFل الرسFFوما تGradientsقمت بشرح و
> و إضافة وسم خاص عليه لمFFزجSVGيمكنك الرجوع إليه مع وسم < ل داعي لضافة وسم أو عنصر فهنFFاكCSS3مجموعة من اللوان. في ) الى أي وسم أو عنصر تريد .Gradientsخصائص تمكنك من إضافة و
):Gradientsأنواع (1-Linear Gradients
2-repeating-linear-gradient
3-radial-gradient 4-repeating-radial-gradient
المتصفحات المدعومة:
135
CSS3 Gradients
![Page 136: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/136.jpg)
يجب على القل أن يتكون من لونين أوLinear Gradientsلنشاء أكثر
:Linear Gradients صغية تعريف background: linear-gradient(direction, color-stop1,color-stop2,...);
بحيث
•directionتمثل إتجاه بداية اللون •color-stopتمثل اللون ويمكن إضافة أكثر من لون
136
1-Linear Gradients:
![Page 137: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/137.jpg)
قمت بتعريف ألوان الطيف السبعة من خلل إضافة11في السطر linear-gradientوإضافة اللوان السبعة كما في المثال السابق
فل تقلق سوف يأخذ القيمةdirectionأيضا في هذا المثال لم إحدد topالفتراضية له وهي
137
![Page 138: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/138.jpg)
فكFFلlinear-gradientفي حال المتصفح ل يFFدعم ما عليك استخدام خاصFFية دعFFم المتصFFفح الFFذي ذكرتهFFا
في الدروس السابقة وهي 1-(-webkit-) Google chrome or safari 2-(-moz-) Firefox3-(-o-) opera
138
![Page 139: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/139.jpg)
وبذلك تلحظbottom وهي directionفي هذا المثال قمت بتحديد في المثال انه بدء من أول لون وهو الحمر من السفل إلى العلى
اللون البنفسجي
139
![Page 140: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/140.jpg)
من اليمين directionنفس المثال السابق ولكن
140
![Page 141: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/141.jpg)
يمكنك مزج مجموعة من اللوان بطريقة مائلة أو قطري من خلل) وتكون كالتالي Tow Directionتحديد اتجاهين و
أعلى جهة اليمين •
background:-moz-linear-gradient(right top, red, orange, yellow, green, blue);
أعلى جهة اليسار •
background:-moz-linear-gradient(left top, red, orange, yellow, green, blue)
أسفل جهة اليمين•background:-moz-linear-gradient(right bottom, red, orange, yellow, green, blue)
أسفل جهة اليسار•
background:-moz-linear-gradient(left bottom, red, orange, yellow, green, blue)
141
Linear Gradients-Diagonal
![Page 142: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/142.jpg)
142
![Page 143: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/143.jpg)
إذا كنت تريد أن تتحكم أكFFثر فFFي التجاهFFا ت يمكنFFك إسFFتخدام تعريFFف) فهFFذه الطريقFFة تمكنFFك مFFن التحكFFم فFFي التجFFاهanglesالزاويFFا أو و
بشكل أفضل من الطرق الخر التي تعلمتها في السابق.
:Linear Gradients- Using Angles صغية تعريف
background: linear-gradient(angle, color-stop1,color-stop2);
).degوتعريف الزاويا تكون بالدرجة أو و
hsla أو rgba أو HEXيمكن تعريف اللوان إما بإسمائها أو
143
Linear Gradients-Using Angles
![Page 144: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/144.jpg)
حيث180degفي هذا المثال استخدمت تعريف الزاويا وعرفت الدرجة تم عرض اللون الحمFFر مFFن اليميFFن . ويمكنFFك تجربFFة أي قيمFFة لFFتر الفرق بين هذه الطريقة والطرق الخر الFFتي تعلمتهFFا فFFي السFFابق
حيث تعتبر طريقة الزاويا أكثر مرنا من الطرق الخر
144
![Page 145: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/145.jpg)
145
![Page 146: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/146.jpg)
Linear Gradientsإذا كنت تريد إضافة الشفافية على ) أوrgba يمكنك إضافتها كما تعلمت في الدروس السابقة عن طريقو
)hsla(
لتعريف اللون مع الشفافيةrgbaالمثال واضح استخدمت طريقة
146
Linear Gradients-Using Transparency
![Page 147: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/147.jpg)
لتعريف اللون مع الشفافيةhslaالمثال واضح استخدمت طريقة
147
![Page 148: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/148.jpg)
مع بعضFFهما لتعريFFف اللFFونrgba و hslaيمكنك أيضا استخدام طريقة مع الشفافية
148
![Page 149: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/149.jpg)
) لضFFافة أكFFثر مFFن لFFون فFFيhsla) و وrgbaيمكFFن تعريFFف أكFFثر مFFن وLinear Gradients
149
![Page 150: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/150.jpg)
مFنlinear-gradientيستخدم هذا النوع الثFFاني فقFFط فFFي تكFFرار خلل تحديد النسبة المئوية للتكرار.
150
2-repeating-linear-gradient
![Page 151: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/151.jpg)
لعمFFل تكFFرار علFFىrepeating-linear-gradientفي هFFذا المثFFال عرفFFت وأيضا قمFFت بتعريFFف270degاللونين الخضر والزرق مع تحديد الدرجة
%. وبالتالي فإن كل لون سوف يأخFFذ10النسبة المئوية للتكرار وهي % 10نسبة من التكرار
نفFFس المثFFال السFFابق ولكنFFي غيFFر ت النسFFبة المئويFFة للتكFFرار وهFFي20%
151
![Page 152: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/152.jpg)
وهو مزج مجموعة مFFن اللFFوان ولكFFنlinear-gradientوهو نفس الختلف هو مزج اللوان يكون على شFFكل بيضFFوي شFFعاعي و بدايFFة
تعريف اللون يظهر في المنتصف
:radial-gradient صيغة تعريف
background: radial-gradient(shape size at position, start-color,..., last-color);
حيث 1-shape size at position:حجم الشكل في المركز 2 -start-colorبداية اللون
3 -last-colorن نهاية اللو
152
3-radial-gradient
![Page 153: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/153.jpg)
كما تلحFFظ علFFى الشFFكل فهFFو شFFعاعي أو يمكFFن القFFول بFFأنه يشFFبهإنفجار قنبلة . وأيضا اللون الخضFر وهFو أول لFون يكFFون فFي المنتصFFفواللون الخير وهو الصفر . ويمكنك التحكم في النسFFبة المئويFFة لكFFللون بحيث كلما كبر ت النسبة المئوية كFFبر حجFFم شFFعاع اللFFون وكلمFFاصغر ت النسبة المئوية صغر حجم شعاع اللون كما سنر في المثال
التالي
153
![Page 154: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/154.jpg)
يمكنك زيادة حجم شعاع اللون عن طريق إضافة نسبة مئوية كما هFFوموضح في المثال
154
![Page 155: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/155.jpg)
)circle مثFFل دائFFرة وradial-gradientيمكنك اضافة شكل في )Ellipseاو شكل بيضوي و
155
Set Shape
![Page 156: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/156.jpg)
وهFFي أول قيمFFة فFFيفFFي هFFذا المثFFال قمFFت بإضFFافة شFFكل الFFدائرةradial-gradient
مFFن خللradial-gradientيستخدم هذا النوع الرابFFع فقFFط فFFي تكFFرار تحديد النسبة المئوية .
156
Repeating a radial-gradient
![Page 157: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/157.jpg)
157
![Page 158: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/158.jpg)
تسFFتخدم هFFذه الخاصFFيىة لضFFافة ظFFل للنصFFوص أو الوسFFوم وهنFFاكنوعان
1-text-shadow2-box-shadow
text-shadowالخاصية
تستخدم هذه الخاصيىة لضافة ظل علFى النصFوص مFن خلل تحديFFدhorizontalالظFFFل الفقFFFيو shadowوديوFFFل العمFFFوالظ ( vertical
shadow (
158
CSS3 - Shadow CSS3 - Shadow
المتصفحا ت المدعومة
text-shadow
![Page 159: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/159.jpg)
في هذا المثال قمت بتحديد الظل في النص كما هو موضح فيالمثال حيث
horizontal shadow =1pxvertical shadow =3px
159
![Page 160: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/160.jpg)
في هذا المثال قمت بإضافة اللون الحمر للظل كما هو موضح فيالمثال
horizontal shadow =1pxvertical shadow =5px
color shadow= red
160
text-shadowإضافة لون إلى
![Page 161: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/161.jpg)
في هذا المثال قمت بإضافة تأثير على الظل بحيث يشبه بالضباب ويمكنك التحكم في التأثير من خلل تغيير القيمة
horizontal shadow =1pxvertical shadow =7px
shadow effect=4px shadow color= red
161
text-shadowإضافة تأثير إلى
![Page 162: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/162.jpg)
في هذا المثال قمت بإضافة اللون الصفر للنص واللون الحمر لظلالنص كما هو موضح في المثال
162
إضافة لون إلى النص و لون أخر إلى ظل النص
![Page 163: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/163.jpg)
يمكنك إضافة أكثر من ظل للنص مفصولة بفاصلة و,) كما في المثالالتالي
163
إضافة أكثر من ظل للنص
![Page 164: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/164.jpg)
box-shadowالخاصية
تستخدم هذه الخاصيىة لضافة ظل على الوسFFوم مFFن خلل تحديFFدhorizontalالظFFFل الفقFFFيو shadowوديوFFFل العمFFFوالظ ( vertical
shadow (
164
box-shadow
![Page 165: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/165.jpg)
>من خلل divفي هذا المثال قمت بتحديد الظل في الوسم <box-shadow كما هو موضح في المثال حيث
horizontal shadow =3pxvertical shadow =7px
165
![Page 166: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/166.jpg)
> منdivفي هذا المثال قمت بإضافة اللون الخضر لظل الوسم< كما هو موضح في المثالbox-shadowخلل
horizontal shadow =3pxvertical shadow =10px
color shadow= green
166
box-shadowإضافة لون إلى
![Page 167: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/167.jpg)
>حيثdivفي هذا المثال قمت بإضافة تأثير على الظل في الوسم< يشبه بالضباب ويمكنك التحكم في التأثير من خلل تغيير القيمة
horizontal shadow =3pxvertical shadow =10pxshadow effect=10px shadow color= green
167
box-shadowإضافة تأثير إلى
![Page 168: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/168.jpg)
القديمFFة وCSSهذا الموضFFوع ليFFس جديFFد وهFFو مFFدعوم فFFي نسFFخةCSS3مFFن لFFالجديدة وقد قمت بشرحه في الجزء الول من الكتاب ولك
أتعمق فيه كثير. في هذا الدرس سFFأتعمق فيFFه بعFFض الشFFيء لكFFونه ل يخلFFو مFFن أي موقFFع Pseudo-classesموضوع مهFFم وأكFFاد أجFFزم بFFأن
.إنترنت
يستخدم لتعريف حال ت خاصة على الوسوم وهناك نوعان
)tag- تعريف حال ت خاصة عند مرور الماوس على الوسمو1
)link) أو لم تقم بزيارة رابطوlink-تعريف حال ت خاصة عند زيارة رابطو2الصفحة.
:pseudo-class الصغية العامة لتعريف selector:pseudo-class {property:value; }
168
Pseudo-classes
Pseudo-classes ما هو
![Page 169: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/169.jpg)
selectorالوصف
تستخدم لحداث تFFأثير معيFFن عنFFد مFFرور المFFاوسعلى الوسم
:hover
)linkتستخدم لحداث تأثير معين عند زيارة رابFFطوبعد الضغط عليه
:visited
link (:linkتستخدم لحداث تأثير معين على رابطو
تستخدم لحداث تأثير معين عنFFد تنشFFيط الرابFFطوlink عند الضغط عليه (
:active
) الولselectorيستخدم لحداث تأثير على محددو)selectorفقط في حال كان هناك أكثر من محFFددو
من نفس النوع
:first-child
)الخيرselectorيستخدم لحداث تأثير على محددو)selectorفقط في حال كان هناك أكثر من محFFددو
من نفس النوع
:last-child
تسFFتخدم لحFFداث تFFأثير معيFFن علFFى الوسFFم<inputمن نوع مدخل <textدخلFFفي حال كان الم
بطريقة صحيحة
:valid
تسFFتخدم لحFFداث تFFأثير معيFFن علFFى الوسFFم<inputمن نوع مدخل <textدخلFFفي حال كان الم
بطريقة غير صحيحة
:invalid
تستخدم لحداث تأثير معيFFن علFFى الوسFFم حيFFث تسFFFتطيع التنقFFFل فFFFي نفFFFسtargetمFFFن خلل
الصFFفحة مFFن خلل النقFFر علFFى الوسFFم أو تمييFFزالمقال ت و الخبار في صفحتك
:target
169
![Page 170: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/170.jpg)
170
![Page 171: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/171.jpg)
الخFFاصclassفي هذا المثFFال المثFFال قمFFت بإنشFFاء اثنيFFن مFFن إسFFم >:style> داخل الوسم <divبالوسم <.)حيث يحتوي على خصائصFFه قبFFل مFFرور المFFاوسpseudoالول وهو وعلى الوسم..)حيFFث يحتFFوي علFFى خصائصFFه ويقFFومpseudo:hoverالثFFاني وهFFوو
بتنفيذها عند مرور الماوس على الوسم.
الن عنFFFد مFFFرور المFFFاوس علFFFى الوسFFFم سFFFوف يقFFFوم بتنفيFFFذ وpseudo:hoverوبعد إبعاد الماوس عن الوسم سوف يقوم بتنفذ (.
)pseudo (.
171
![Page 172: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/172.jpg)
selector (p)) على الوسم أو :first-childفي هذا المثال عرفت و)يسFFتخدم:first-child> وكمFFا قلFFت بFFأن وstyleداخFFل الوسFFم <
) الول فقط في حال كان هناك أكFFثرselectorلحداث تأثير على محددو) من نفس النوع كما هو موضح في المثالselectorمن محددو
172
![Page 173: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/173.jpg)
selector) علFFى الوسFFم أو :last-childفي هذا المثال عرفت و (p))يسFFتخدم:last-child> وكمFFا قلFFت بFFأن وstyleداخFFل الوسFFم <
)الخير فقط في حال كان هناك أكثرselectorلحداث تأثير على محددو) من نفس النوع كما هو موضح في المثالselectorمن محددو
173
![Page 174: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/174.jpg)
selector) علFFى الوسFFم أو :validفFFي هFFذا المثFFال عرفFFت و (input)تستخدم لحداث تأثير):valid> وكما قلت بأن وstyleداخل الوسم <
في حال كان المدخلtext> من نوع مدخلinputمعين على الوسم<بطريقة صحيحة. فعندما كتبت اليميل بطريقFFة صFFحيحة قFFام بإضFFافة
> وفي حال كFFان المFدخل واليميFFل) كتبتFFهinputاللون الصفر على <بطريقة غير صحيحة لن يظهر اللون الصفر
174
![Page 175: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/175.jpg)
selector) علFى الوسFم أو :invalidفي هذا المثFFال عرفFتو (input)تسFFتخدم لحFFداث):invalid> وكما قلFFت بFFأن وstyleداخل الوسم <
في حFFال كFFان المFFدخلtext> من نوعinputتأثير معين على الوسم<بطريقة غير صحيحة. فعندما كتبت اليميل بطريقة صFFحيحة لFFن يظهFFر
> وفي حال كFFان المFدخل واليميFFل) كتبتFFهinputاللون الصفر على <)validبطريقة غير صحيحة ظهر اللون الصفر وهو عكس و
175
![Page 176: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/176.jpg)
في هذا المثال قمت بالتالي #) من أجل أن تنقلنيnews له هي وhref> حيث a-عرفت وسم <1
hrefإلى الخبر في الوسم الذي يحمل نفس قيمة href له هو نفس قيمة id> وp-عرفت وسم <2background ) وعرفت الخاصية target> عرفت وstyle- في وسم <3
للون الصفرالن عند النقر على الرابط سوف ينقلك في نفس الصفحة إلى الخبر
مع إضافة اللون الصفر علىhref نفس قيمة idمع الوسم الذي لديه الخبر
176
![Page 177: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/177.jpg)
Word Wrappingالخاصيةتستخدم هذه الخاصيىة لمنFFع تFFدفق أو خFروج المحتFFو خFFارج الطFFار
المحدد له بحيث يلتف النص وينزل سطر جديد
177
CSS3 TextCSS3 Text
Word Wrapping
![Page 178: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/178.jpg)
178
![Page 179: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/179.jpg)
يمكنك إستخدام خطوط ليست موجوده على جهFFازك وفFFيCSS3في webحال وجد ت الخط الذي تريد يمكنك تحميلFFه ورفعFFه علFFى server
واستدعائه الخاص بك
السم كامل الختصار
TTF TrueType Fonts
OTF Open Type Fonts
WOFF The Web Open Font Format
WOFF 2.0 The Web Open Font Format
EOT Embedded Open Type Fonts
SVG Fonts/Shapes Scalable Vector Graphics
179
CSS3 Web Fonts
المتصفحا ت المدعومة
انوع صيغ الخطوط
![Page 180: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/180.jpg)
:Font الصغية العامة لتعريف صغية
@font-face{font-family: type your font(نوع الخط)
src: path your font(مسار الخط)}
الموجFFود فFFي الوسFFمfont-familyيجب أن يكون إسم > هو نفسه style داخل <CSS3عند تعريفك
font-familyيةوFFل الخاصFFذي داخFFال font-faceوإذا (.@كان مختلف لن يظهر الخط
180
المتصفحا ت التي تدعم صيغ الخطوط
![Page 181: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/181.jpg)
في هذا المثال قمت بتحديد مسار الخFFط ونFFوع الخFFط حيFFث يجFFب أنfont-family@ نفسFFه مFFع font-face الموجود داخFFل font-familyيكون
> حيFFث أن كFFل مFن ملFFف الخFFطstyleالموجFFود داخFFل الوسFFم فFFي <قمت باسFFتدعائه مباشFرة وصفحة الويب موجودة داخل المجلد نفسه
مFFن خلل اسFFم ملFFف الخFFط وفFFي حFFال كFFان ملFFف الخFFط فFFي مجلFFدوصفحة الويب في مجلد أخر يجب تحديFFد مسFFار المجلFFد للخFFط وبعFFد
ذلك تحديد اسم الملف
181
![Page 182: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/182.jpg)
2D هFFو CSS3من الخصائص المهمFFة Transforms 3 وD Transformsحيث من خلل هذه الخصائص تستطيع تحريك الوسوم من نقطة إلFFىنقطة وتFFدوير وعمFFل انحFFراف للوسFFوم بشFFكل يعطFFي جمFFال لموقعFك
ولفت النتباه أمام الزوار.
2D-فFFي 1 transformsمFFية دعFFتخدام خاصFFل إسFFيفض المتصفحا ت التى تم شرحها في الدروس السابقة
معناها بالعربي ووظيفة)method- الكلمة 2
182
CSS3 2D Transforms
المتصفحا ت المدعومة
![Page 183: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/183.jpg)
translate(X-axis, Y-axis) 1
Rotate() 2
scale(width, height) 3
skew(X-axis, Y-axis)4
Matrix(parameters)5
methodtransform: translate(X-axis, Y-axis) لتحريك العنصر أو الوسم من الموقع الحFFالىmethodتستخدم هذه
) X-axis, Y-axisإلى موقع أخر في نفس الصفحة حسب إحداثيا ت و
183
2D Transforms methods
translate() Method
![Page 184: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/184.jpg)
184
![Page 185: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/185.jpg)
الخFFاصclassفي هذا المثFFال المثFFال قمFFت بإنشFFاء اثنيFFن مFFن إسFFم >:style> داخل الوسم <divبالوسم <
حيث يحتوي على خصائصه قبFFل مFFرور المFFاوس.):moveالول وهو () هFFيX-axisعلى الوسم حيث أن العنصFFر يحتFFوي علFFى الحFFداثيا ت و
0pxو و Y-axis 0) أيضاpx. أي أنه ل يتحرك
حيFFث يحتFFوي علFFى خصائصFFه ويقFFوم.):move:hoverالث++اني وه++و(بتنفيذها عند مرور الماوس على الوسم.
الن عنFFFد مFFFرور المFFFاوس علFFFى الوسFFFم سFFFوف يقFFFوم بتنفيFFFذ وmove:hover (.
,X-axisويتحرك العنصر من موقعه الحالي إلى الموقFFع الخFFر حسFFب و
Y-axisيني وFFور السFFث أن المحFحي(X-axis (50pxاديوFFور الصFFو المح Y-
axis (100px
185
![Page 186: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/186.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية12فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
translateىFFالي إلFFوقعه الحFFن مFFر مFFرك العنصFFذ يتحFFحيث عند التنفي ,X-axis(الموقع الخر حسب الحداثيا ت Y-axisاFFم تعريفهFFتي تFFال (
Y-axis =(100px( و 50px)= x-axisفي المثال وهي و
186
![Page 187: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/187.jpg)
methodtransform: rotate() لتFFدوير العنصFFر أو الوسFFم مFFع اتجFFاه عقFFاربmethodتسFFتخدم هFFذه
الساعة أو عكس اتجاه عقارب الساعة حيث القيمة تكون بالدرجة)deg(
187
rotate() Method
![Page 188: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/188.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية13فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
rotateاربFFاه عقFFع اتجFFدوير مFFر بالتFFوم العنصFFذ يقFFد التنفيFFث عنFFحي )45degحسب القيمة التي يأخذها وهي والساعة
188
![Page 189: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/189.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية13فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
rotateاهFFس اتجFFع عكFFدوير مFFر بالتFFوم العنصFFذ يقFFد التنفيFFث عنFFحي -)45degحسب القيمة التي يأخذها وهي وعقارب الساعة
189
![Page 190: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/190.jpg)
methodtransform: scale() لزيادة أو نقصان حجFFم العنصFFر أو الوسFFم مFFنmethodتستخدم هذه
)width,heightخلل و
190
scale() Method
![Page 191: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/191.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية13فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
scale من حيث العرض حيث عند التنفيذ يقوم العنصر بزيادة حجمه)width دارFFFFولو3)بمقFFFFي والطFFFFم الفتراضFFFFن الحجFFFFرا ت عFFFFم
height بمقدار مرة واحدة عن الرتفاع الفتراضي(
191
![Page 192: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/192.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية12فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
scale من حيث العرض حيث عند التنفيذ يقوم العنصر بزيادة حجمه)widthولوFFFي والطFFFم الفتراضFFFن الحجFFFدة عFFFرة واحFFFدار مFFFبمق(
height مرا ت عن الرتفاع الفتراضي3)بمقدار
methodtransform: skew() لتحكFم فFي زوايFFا العنصFFر أو الوسFم ويمكFFنmethodتسFFتخدم هFFذه
التحكم حسب الحداثيا ت 1) -X-axis (skewX 2) -Y-axis (skewY 3)-X-axis, Y-axis(skew
)degحيث قيمة الحداثيا ت تكون بالدرجة و
192
skew() Method
![Page 193: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/193.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية11فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
skewXبFFر حسFFا العنصFFي زوايFFم فFFم التحكFFذ يتFFد التنفيFFث عنFFحي )20deg) بمقدار وX-axisالحداثيا ت و
193
![Page 194: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/194.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية12فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
skewXبFFر حسFFا العنصFFي زوايFFم فFFم التحكFFذ يتFFد التنفيFFث عنFFحي )20deg) بمقدار وY-axisالحداثيا ت و
194
![Page 195: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/195.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية12فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
skewبFFر حسFFا العنصFFي زوايFFم فFFم التحكFFذ يتFFد التنفيFFث عنFFحي )20deg) بمقدار وY-axis) و و10deg) بمقدار وX-axisالحداثيا ت و
195
![Page 196: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/196.jpg)
methodtransform: matrix()2d الخاصة بوmethods) بجمع كل انوع methodتقوم هذة الوظيفة و
transformةوFFفي وظيف (method ىFFوي علFFFارمترا ت6) واحدة.وتحتFFب ) scale,rotate ,skew,translate تمثلو
196
matrix() Method
![Page 197: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/197.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح متبوعFFة بالخاصFFية12فFFي السFFطر transform وعFFد أنFFت أحFFوعرف methodاوFFة بFFالخاص transformيFFوه(
matrixنFم مFFر أو الوسFي العنصFFم فFFومن خلل القيم تستطيع التحك )واحدةmethod) في وظيفةوscale,rotate,skew,translateحيث وفقط
transform-origin الخاصية
-Xتسمح لك هذه الخاصية بتغيير الموقع للعنصر حسFFب الحFFداثيا ت وaxis-Y-axisوحتى تعمل الخاصية و (transform-origin ل بد من (
) وبFFدونها لFFن تعمFFل الخاصFFية وtransformإضFFافة معهFFا الخاصFFية و
transform-origin ويجب أن تكون القيمة بالنسبة المئوية (
197
transform-origin Property
![Page 198: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/198.jpg)
1 -Transform-origin: 2في حالةD transformتستطيع تغيير موقع العنصر حسب الحداثيا ت
)X-axis Y-axis (
2 -Transform-origin: 3في حالةD transform تستطيع تغيير موقع العنصر حسب الحداثيا ت
)X-axis Y-axis Z-axis (
)transform- فFFFFي حFFFFال اسFFFFتخدمت الخاصFFFFيىة و3)واسFFFتخدمت أيضFFFاtranslateواسFFFتخدمت الوظيفFFFة و
) فإن المتصفح سوف يأخFFذTransform-originالخاصية و) وسFFFFوفtransformالحFFFFداثيا ت التابعFFFFة للخاصFFFFية و
-TransformيتجاهFFFل الحFFFداثيا ت التابعFFFة للخاصFFFية وorigin(
198
![Page 199: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/199.jpg)
199
![Page 200: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/200.jpg)
200
![Page 201: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/201.jpg)
3Dيختلف Transforms 2 عنD ىFF3 بإضافة قيمة جديدة إلDي وFFوه Y-axisفي جميع و (methods يFFرحها فFFم شFF2)التي تDاكFFا هنFFوأيض .
سوف تتعرف عليها لحقا.3Dخصائص جديد في
201
CSS3 3D Transforms
المتصفحا ت المدعومة
![Page 202: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/202.jpg)
methodtransform: rotateZZ لتFFدوير العنصFFر أو الوسFFم حسFFب احFFداثيا ت methodتستخدم هذه
)degحيث القيمة تكون بالدرجةو
202
3D:rotate Method
![Page 203: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/203.jpg)
203
3D Transform Methods
![Page 204: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/204.jpg)
methodtransform-style فFFي كيفيFFة تقFFديم العناصFFر أو الوسFFومmethodتسFFتخدم هFFذه
. وهFFذه الخاصFFية ل يمكFFن اسFFتخدامها3Dالمتداخلة مع بعضFFها فFFي .transformلوحدها بل يجب استخدام معها الخاصية
transform-style تأخذ قيمتين 1-flat 3وفي حال تداخل العناصر لن تعرض العناصر على شكلD(2-preserve-3D وفي حال تداخل العناصر سوف العناصر الموقع على
)3Dشكل
هل تر هذا المثال ؟هذا ما يقصد بالتداخل العناصر أو الوسوم مع بعضها وبالتالي فإن تأثير
ستكون على الوسمtransform-styleالخاصية
<div class=”child”>
204
transform-style
لتوضيح المفهوم
![Page 205: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/205.jpg)
205
![Page 206: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/206.jpg)
)div1)متFFداخل مFFع العنصFFر وdiv2كما تر في المثال أصFFبح العنصFFر و)preserve-3d مع القيمة وtransform-styleفي حال استخدام الخاصية
) أو حذف الخاصFFية لFFن يكFFون هنFFاك تFFداخلflatوعنداستخدام القيمةو) من المتصفحdiv2بين العنصرين وسيختفي العنصر و
perspectiveالخاصية
مFن3Dهذه الخاصية تعرف كم عدد البيكسل ت يتFم وضFFعها للعنصFر أجل عرضها على المتصفح حيث القيمة تكون بالبيكسل
206
perspective
![Page 207: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/207.jpg)
207
![Page 208: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/208.jpg)
عرفFFت عFFدد البيكسFFل ت عFFن طريFFق الخاصFFية و12فFFي السFFطر perspective رFFى العنصFFعها علFFم وضFFتي يتFF3) الDىFFها علFFلعرض المتصفح
Perspective-originالخاصية
متعمده على الحدثيا ت 3dهذه الخاصية تعرف العنصر او الوسم )X-axis-Y-axisاFFتخدام معهFFب اسFFية يجFFذه الخاصFFل هFFتى تعمFFوح.(
وبدونها لن تعمل.Perspectiveالخاصية
208
perspective-origin
![Page 209: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/209.jpg)
209
![Page 210: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/210.jpg)
-Perspective عرفت خاصية دعم المتصفح مع خاصية 14في السطر originحيث تمثل القيمة الولى و x-axis والقيمة الثانيةو50) وهي %Y-axis 99) وهي%
3D-بعFFض الخصFFائص فFFي 1 transformلFFتى تعمFFح يجب أن تكون الوسوم متداخلة
3D transform) ل تدعم Editors- بعض المحررا تو2)onlineويمكنك استخدام محرر متوفر على النترنت و
)http://liveweave.com لتطبيق المثلة السابقة (
210
![Page 211: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/211.jpg)
backface-visibilityالخاصية
هذه الخاصية تستخدم في جعل العنصر أو الوسم غيFFر مرئFFي وعFFدمإظهاره على الشاشة
211
backface-visibility
![Page 212: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/212.jpg)
) وانواعهFFاtransitionسFFتتعرف فFFي هFFذا الFFدرس كيفيFFة اسFFتخدام وبشكل سهل ومفصل حيث يعتبر هذا الدرس من الدروس المهمة فFFي
CSS3.واستخدماتها كثيرة في مواقع النترنت
transition 1
transition-delay 2
transition-duration 3
transition-property 4
transition-timing-function 5
) يجب أن يحتوي على قيمتين transitionلنشاء و
-الخاصية المراد اضافتها في العنصر1-الفترة الزمنية للتأثير على الخاصية من أجل تغيير قيمتها2
212
CSS3 Transitions
transitionsانواع
![Page 213: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/213.jpg)
transitionالخاصية
بتغيير مجموعة من الخصائص وقيمهاtransitionتسمح لك خصاصية للوسم أو العنصر بشكل سلس خلل فترة زمنية محددة
213
المتصفحا ت المدعومة
transition
![Page 214: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/214.jpg)
الخاص بالوسFFم <classفي هذا المثال قمت بإنشاء اثنين من إسم div> داخل الوسم <style:<
.)حيث يحتوي على خصائصFFه قبFFل مFFرور المFFاوسpseudoالول وهو وعلى الوسم.
214
![Page 215: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/215.jpg)
.)حيFFث يحتFFوي علFFى خصائصFFه ويقFFومpseudo:hoverالثFFاني وهFFووبتنفيذها عند مرور الماوس على الوسم خلل فFFترة زمنيFFة تسFFاوي و
2s.ثانيتين فقط (
الن عنFFFد مFFFرور المFFFاوس علFFFى الوسFFFم سFFFوف يقFFFوم بتنفيFFFذ وpseudo:hoverوبعد إبعاد الماوس عن الوسم سوف يقوم بتنفذ (.
)pseudoأي يعود إلى حجمه الفتراضي (.
يمكن إضافة أكثر من خاصية مع تحديد الفترة الزمنيةعن طريق إضافةفاصلة و,) بين كل خاصية أخر
215
transitionاضافة أكثر من خاصية في
![Page 216: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/216.jpg)
قمت بتعريف أكثر من خاصية مع تحديد الفترة الزمنية9في السطر للتنفيذ مفصولة كل خاصية مع تحديد الفترة الزمنية بفاصلةو,) حيث
width2 يأخذ ثانيتينوs للتنفيذ و (height3 يأخذ ثلث ثاوني وsللتنفيذ(
216
![Page 217: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/217.jpg)
transition-timing-functionالخاصية
تسمح لك هذه الخاصية بتحديد سرعة النتقال حركة للعنصر أوالوسم
ease بدايةالسرعة بطيئة, ثم تزداد السرعة, ثم عندما تصل الFFى النهايFFةتكون السرعة بطيئة والقيمة الفتراضية)
linear السرعة تكون متساوية من البداية الى النهاية
ease-in بداية السرعة بطيئة
ease-out عندما تصل الى النهاية تكون السرعة بطيئة
ease-in-out تكون بداية السرعة بطيئة وعندما تصل الى النهايFFة تكFFون السFFرعة ) مFFعease-inأيضFFا بطيئFFة .وهFFي باختصFFار عبFFارة عFFن القيمFFة و
)ease-outالقيمة و
217
transition-timing-function
transition-timing-functionانواع
![Page 218: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/218.jpg)
) مFFعtransition-timing-function عرفFFت الخاصFFية و10فFFي السFFطر ) حيث عند وضع المؤشر الفأرة على الشFFكلease-inإعطائها القيمة و
سوف تكون سرعة بداية تغيير حجمه بطيئة وذلك لنني اسFFتخدمت)ease-inالقيمة و
218
![Page 219: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/219.jpg)
transition-dalayالخاصية
) التنفيذ علىبالثوانيتسمح لك هذه الخاصية بتحديد التأخير والعنصر أو الوسم
219
transition-dalay
![Page 220: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/220.jpg)
) واعطائهFFاtransition-delay قمFFت بتعريFFف الخاصFFية و10فFFي السFFطر ) أي خمس ثواني بمعنFFي عنFFد وضFFع مؤشFFر الفFFأرة علFFى5sالقيمة و
ثواني وعنFFد إبعFFاد مؤشFFر5الشكل فإنه لن يتغير حجمه إل بعد مرور الفأرة لن يعود إلى حجمه الفتراضي إل بعد مرور خمس ثواني.
مFFعTransformation) التابعة للخاصFFية methodsيمكنك إستخدام كل و لضFFافة عليهFFا بعFFض الخصFFائص مFFن أجFFل إضFFافةTransitionالخاصFFية
تإثيرا ت عليها عند التنفيذ.
220
Transition + Transformation
![Page 221: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/221.jpg)
في هذا المثال عند وضع المؤشر على اليقونة فFFإنه سFFوف تFFدور مFFععقارب الساعة وعند إبعاد المؤشر فإنها تدور عكس عقار الساعة.
221
![Page 222: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/222.jpg)
أصFFبح سFFهل جFFدا فيمكنFFك تحريFFك أغلFFبCSS3تحريFFك العناصFFر فFFي العناصFFر أو الوسFFFوم دون الحاجFFFة إلFFى اسFFFتخدام الجافFFFا سFFكربتو
JavaScriptالفل)و Sأو برنام (Flash.(
animation-name1-
@keyframes2-
animation-duration3-
animation-delay4-
animation-iteration-count5-
222
CSS3 Animations
المتصفحا ت المدعومة
الخصائص المستخدمة في تحريك العناصر
![Page 223: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/223.jpg)
animationالخاصية
تسFFمح لFFك هFFذه الخاصFFية بتغييFFر العنصFFر تFFدريجيا مFFن نمFFط إلFFى) يجFFب إسFFتخدام الخاصFFيةوanimationوحFFتى تعمFFل الخاصFFية وأخFFر.
keyframes وبدونها لن تعمل (@
keyframes @الخاصيةهFFFذه الخاصFFFية مسFFFئولة عFFن تحديFFFد النمFFFاط أو السFFFتايل .وعنFFFد
) سFFوف تقFFومanimationاسFFتخدامك لهFFذه الخاصFFية فFFإن الخاصFFية ونمط أخر في فFFترة زمنيFFة) to(النمط الحالي إلى ) from(بتغيير من
) يجFFFب إسFFFتخدام@keyframesمحFFFددة وحFFFتى تعمFFFل الخاصFFFية و) وبدونها لن تعمل animationالخاصيةو
) لتغيير @keyframes الصغيىة العامة لستخدام الخاصية (النمط أو الستايل مع تحريك العنصر:
@-moz-keyframes keyframes_name { from {property}
to {property} }
223
animation
![Page 224: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/224.jpg)
) لتغيير @keyframes الصغيىة العامة لستخدام الخاصية (النمط أو الستايل مع تحريك العنصر:
@-moz-keyframes keyframes_name {
0%{property}
25%{property}
50%{property}
75%{property}
100%{property}
}
لتحريك العنصر يجب إضافة نسبة مئوية في الخاصية ( •keyframes (
) to) و(fromيمكن تحريك العنصر من خلل (•
ليس شرط أن تكون النسبة المئوية مرتبة المهم أن تكون•) ونسبة مئوية للنهاية0لها نسبة مئوية للبداية وهي (%
) وب++دون نس++بة مئوي++ة بداي++ة ونهاي++ة ل++ن يتح++رك100(%العنصر
) إجباري++ة100) والنهاي++ة(%0النس++بة المئوي++ة للبداي++ة(%•
224
![Page 225: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/225.jpg)
حتى يتحرك العنصر)to) هي (100) و (%from) هي (%0 (•
animation-nameالخاصية
) مFFن@keyframesتسمح لك هذه الخاصية بإضFFافة اسFFم الخاصFFية و
)@keyframesأجل تنفيذ النمط الذي قمت بتحديده في الخاصيةو
animation-durationالخاصية
تسمح لك هFFذا الخاصFFية تسFFمح بتحديFFد الفFFترة الزمنيFFة خلل تنفيFFذ) حيFFث تكFFون القيمFFةto) إلFFى النمFFط الجديFFد وfromالنمFFط الحFFاليو
)sبالثواني و
animation-delayالخاصية
تسمح لك هذا الخاصية تسمح بتحديد الفترة الزمنية حتى يبدأ تنفيذ) حيFFث تكFFون القيمFFةto) إلFFى النمFFط الجديFFد وfromالنمFFط الحFFاليو
)sبالثواني و
animation-iteration-countالخاصية
تسمح لك هذا الخاصية تسمح لك بتحديد عدد المFFرا ت لتنفيFFذ النمFFط
225
![Page 226: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/226.jpg)
) أي هو بمثابة عداد to) إلى النمط الجديد وfromالحاليو
226
![Page 227: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/227.jpg)
في هذا المثال @)و قمFFFتkeyframes اسFFFتخدمت الخاصFFFية و13- فFFFي السFFFطر 1
) مFFع إضFFافةfrom) ثFFم حFFدد ت النمFFاط مFFن وchangecolorبتسFFميته و-background) مFFع إضFFافة خاصFFية وto) إلىوbackground-colorخاصيةو
color(
) وهFFFذهanimation-name اسFFFتخدمت الخاصFFFية و9-فFFFي السFFFطر 2@)الذي عرفته مسبقاkeyframesالخاصية مسئولة عن إضافة إسم و
) لتحديFFدanimation-duration استخدمت الخاصFFية و10- في السطر 3الفترة الزمنية للنتقال من النمط الحFFالي واللFFون الحمFFر) إلFFى النمFFطالجديدواللون الصفر) وبعد إنتهاء الوقت يعFFود إلFFى النمFFط الولواللFFون
الحمر)
227
![Page 228: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/228.jpg)
) وعرفت بداخله بعض الخصائصdiv عرفت الوسم و5-في السطر 1) من أجل تحريك العنصرpositionوأهم خاصية هي و
228
![Page 229: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/229.jpg)
) من أجل تحديFFدanimation-name عرفت الخاصية و10- في السطر 2@) من أجل تنفيذ الستايلkeyframeاسم و
) لتحديد الفترةanimation-duration عرفت الخاصية و11-في السطر 3) 4sالزمنية خلل التنفيذ وهي و
@) مFFن أجFFل تحديFFدkeyframe عرفFFت الخاصFFية و14-فFFي السFFطر 4الستايل
) وهFFي البدايFFة مFFع0 عرفFFت النسFFبة المئويFFة و%15- فFFي السFFطر 5) وهFFاتين الخاصFFيتن تتبعFFانtop) والخاصFFية وleftتعريFFف الخاصFFية و
) المعرفة مسبقا من أجل تحريFFك العنصFFر حيFFث أنpositionللخاصية و) هي صفر أي إن البداية سيبقى مكانه top) ووleftقيمة كل من و
) وهFFي النهايFFة مFع100 عرفت النسبة المئويFFة و%16- في السطر 6) وهFFاتين الخاصFFيتن تتبعFFانtop) والخاصFFية وleftتعريFFف الخاصFFية و) المعرفة مسبقا من أجل تحريك العنصر حيثpositionللخاصية أيضا و) أي أنه سوف يتحرك مFFن اليميFFن إلFFىtop=0) ووleft=200أن قيمة و
اليسار لكنه لن يعود إلى نقطة البداية وحتى يعود إلى النقطFFة الFFتيانطلFFق منFFه يجFFب أن تكFFون الخصFFائص فFFي النسFFبة المئويFFة للبدايFFة
والنهاية متساوية كما سنر في المثلة القادمة
229
![Page 230: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/230.jpg)
)top=0) ووleft=0 العنصر لن يتحرك حيث و15-في السطر 1 العنصFFر سFFوف يتحFFرك مFFن اليمFFن إلFFى اليسFFارو16-فFFي السFFطر 2
left=2000) وو=top( سFFوف يعFFود العنصFFر إلFFى النقطFFة البدايFFة حيFFث و17-فFFي السFFطر 3
left=00) وو=top(
230
![Page 231: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/231.jpg)
231
لتحريك العنصر على مساحة مربع
![Page 232: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/232.jpg)
232
لعمل حركة على شكل إشارة
![Page 233: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/233.jpg)
233
لعمل حركة على شكل شكل مثلث
![Page 234: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/234.jpg)
234
Animation-iteration-countاستخدام
![Page 235: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/235.jpg)
قمت بعمل تكرار للحركة ثلث مرا ت باستخدام12في السطر ) ويمكن عمل تكرار ل نهائي فقطanimation-iteration-countخاصية و
)infiniteبتغيير القيمة إلى و
animation-direction الخاصية
تسمح لك هذا الخاصية بالتحكم في تحريك العنصر سواء في التجFFاه)reverse) أو إتجاه معاكسوalternateمنظم و
235
animation-direction
![Page 236: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/236.jpg)
) مFFعanimation-direction قمFFت بتعريFFف الخاصFFية و13فFFي السFFطر ) أي عنFFد التنفيFذ فFFإن العنصFر سFوف يتحFركreverseإعطائها القيمة و
.في التجاه المعاكس ثلث مرا ت فقط
236
![Page 237: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/237.jpg)
animation-timing-function الخاصية
تسمح لك هذا الخاصية بتحديد سرعة تحريك العنصر أو الوسم وهذه) الFFتي transition-timing-functionالخاصFFية شFFبيهة بالخاصFFية وتعلمناها في الدرس السابق
237
animation-timing-function
![Page 238: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/238.jpg)
يمكFFن إختصFFار جميFFع الخصFFائص الFFتي تعلمناهFFا فFFي هFFذا مFFع تحديFFد القيFFم كمFFاanimationالFFدرس بإضFFافة الخاصFFية
سنر في المثال
238
![Page 239: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/239.jpg)
عرفFFت خاصFFية دعFFم المتصFFفح ثFFم عرفFFت الخاصFFية10فFFي السFFطر animationن خللFFد مFFطر واحFFائص بسFFع الخصFFافة جميFFت بإضFFوقم
تحديد قيمها حيث أن )animation-name-القيمة الولى هي و1)animation-duration-القيمة الثانية هي و2)animation-timing-function-القيمة الثالثة هي و3)animation-delay-القيمة الرابعة هي و4)animation-iteration-count-القيمة الخامسة هي و5)animation-direction-القيمة السادسة هي و6
239
![Page 240: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/240.jpg)
في هذا الدرس سوف تتعلم كيفية إضافة أعمدة مع النصوص كما هو) وتنسيقها بشكل جذاب وملفت.newspapersالحال في الجرائدو
240
CSS3 Multiple Columns
المتصفحا ت المدعومة
![Page 241: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/241.jpg)
column-count الخاصية
تسمح لك هذا الخاصFFية بتعريFFف أو إنشFFاء عFFدد مFFن العمFFدة وتأخFFذقيمة من نوع عدد صحيح
241
column-count
![Page 242: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/242.jpg)
) مFFع تخصFFيصcolumn-count قمت بتعريFFف الخاصFFية و11في السطر أي قمت بإنشاء ثلث أعمدة كمFFا هFFو موضFFح فFFي3عدد صحيح وهو
المثال
column-gap الخاصية
تسمح لك هذه الخاصية بتحديد الفجFFوة أو المسFFاحة بيFFن كFFل عمFFودوعمود حيث القيمة لها تكون بالبيكسل
242
column-gap
![Page 243: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/243.jpg)
) من أجل تحديدcolumn-gap قمت بتعريف الخاصية و12في السطر الفجوة بين العمدة
243
![Page 244: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/244.jpg)
column-rule-style الخاصية
تسمح لك هذه الخاصFFية بتحديFFد السFFتايل الخFFاص بالعمFFدة وهFFي)border-styleشبيها بالخاصيةو
244
column-rule-style
![Page 245: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/245.jpg)
فFFي كل المثFFالين تFFم تحديFFد السFFتايل الخFFاص بالعمFFدة حيFFث فFFي) وفFFFي المثFFFال الثFFFاني يكFFFونsolidالمثFFFال الول يكFFFون السFFFتايل و
)dottedالستايلو
245
![Page 246: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/246.jpg)
column-rule-width الخاصية
تسمح لFFك هFFذه الخاصFFية بتحديFFد حجFFم السFFتايل الخFFاص بالعمFFدةحيث القيمة تكون بالبيكسل
246
column-rule-width
![Page 247: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/247.jpg)
column-rule-color الخاصية
تسمح لك هذه الخاصية بتحديد اللون للعمدة ويمكنك تحديد اللFFوانبكل الطرق التي تم شرحها في هذا الكتاب
247
column-rule-color
![Page 248: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/248.jpg)
-column-rule عرفFFت الخاصFFية و16-فFFي المثFFال الول فFFي السFFطر 1colorالتي تسمح بتحديد لون للعمدة حيث اللون هو أزرق(
) حيFFثrgba-فFFي المثFFال الثFFاني قمFFت بتعريFFف اللFFوان باسFFتخدام و2اللون أحمر
248
![Page 249: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/249.jpg)
column-rule الخاصية
هذه الخاصية هي إختصار لكل من 1-column-rule-width2-column-rule-style3-column-rule-color
) لتعريFFFف الخصFFFائصcolumn-rule أي يمكنFFFك إسFFFتخدام الخاصFFFية والثلثة بشكل مختصر في سطر واحد فقط
249
column-rule
![Page 250: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/250.jpg)
) حيث column-rule قمت بتعريف الخاصية و14في السطر )column-rule-width-القيمة الولى تمثل و1)column-rule-style-القيمة الثانية تمثل و2)column-rule-color-القيمة الثالثة تمثل و3
250
![Page 251: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/251.jpg)
column-span الخاصية
هFFذه الخاصFFية تعمFFل علFFى توسFFعة العناصFFر أو الوسFFوم مFFن خلل)column-spanالعمدة باستخدام الخاصية و
251
column-span
![Page 252: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/252.jpg)
) مFFن أجFFل توسFFعةcolumn-span عرفFFت الخاصFFية و16فFFي السFFطر > مFFFن أجFFFل تنسFFFيق وترتيFFFبdiv> داخFFFل الوسFFFم <h2للوسFFFم <
المحتو حتى ل تحدث مشاكل في المحتو
column-width الخاصية
هFFذه الخاصFFية تسFFمح بتحديFFد حجFFم العمFFدة حيFFث القيمFFة تكFFونبالبيكسل
252
column-width
![Page 253: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/253.jpg)
) من خلل الخاصية250px قمت بتحديد حجم العمود و13في السطر )column-span(
253
![Page 254: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/254.jpg)
في هذا الدرس سوم تتعلم كيفية التحكم في حجم العنصر من خللالمستخدم أو الزوار الذي يزورون موقعك
resize الخاصية
هذه الخاصية تسمح بFFالتحكم فFFي حجFFم العنصFFر سFFواء كFFان أفقFFيوHorizontalوديوFFأو عم (verticalا وFFأو كلهم (bothإنFFم فFFع العلFFوم (overflow لن تعمل لوحدها بل يجFFب إضFFافة الخاصFFية resizeالخاصية
و التي سوف يتم شرحها الن
254
resize
CSS3 User Interface
المتصفحا ت المدعومة
![Page 255: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/255.jpg)
overflow الخاصية
القديمFFةCSS2هذه الخاصية ليست جديدة وهي موجودة في نسخة وظيفتها تستطيع التحكم في النص في حال كان خارج الطار
وتإخذ قيم عدة
1-autoفي حال أصبح النص خارح الطار يجب إضافة سكرولو scroll(لرؤية النص كامل دون أن يخرج من الطار ولكن لFFن يسFFتطيع التحكFFم
في تغيير حجم الطار من قبل المستخدم أو الزائر
2 -hiddenص دونFFاء النFFب إخفFFار يجFFفي حال أصبح النص خارح الط إظهاره خارج الطار أي أن النص لن يظهر كامل
3 -visible وهي عكس القيمة hiddenوهي إظهار النص كامل حتى ولو كان خارج الطار
4 -scrollوهي تشبه القيمة و auto تعمل على إضافة (scrollللنص داخل الطار حتى يظهر كامل ولكFFن لFFن يسFFتطيع التحكFFم فFFي تغييFFر
حجم الطار من قبل المستخدم أو الزائر
255
overflow
![Page 256: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/256.jpg)
الخلصة
حتى تستطيع التحكم في النص من ناحية تغيير حجم الطار من قبلالمستخدم أو الزائر و جعل النص ل يخرج خارج الطار يجFFب إسFFتخدام
) .overflow) والخاصية وresizeكل من الخاصية و
256
![Page 257: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/257.jpg)
) مFFن أجFFل التحكFFم فFFيresize قمت بتعريFFف الخاصFFية و9في السطر ) أي عموديhorizontalحجم الطار حيث القيمة كانت و
) مFFن أجFFل التحكFFم فFFيresize قمت بتعريFFف الخاصFFية و9في السطر ) أي عمودي و أفقيbothحجم الطار حيث القيمة كانت و
257
![Page 258: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/258.jpg)
outline-offset الخاصية
)outlineهFFFذه الخاصFFFية تسFFFمح بإضFFFافة مسFFFاحة بيFFFن الخاصFFFية و) أو الطار أو الحافة حيث القيمة تكون بالبيكسلborderوالخاصية و
258
outline-offset
![Page 259: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/259.jpg)
) لضFFافة مسFFاحةoutline-offset عرفFFت الخاصFFية و13في السطر 15px) أو الطار بمسافة border) والخاصية وoutlineبين الخاصية و
259
![Page 260: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/260.jpg)
أسئلة الفصل السادس
- المطلوب هو بناء موقع مثل الموجود في هذه الصورة ؟1
260
![Page 261: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/261.jpg)
- المطلوب هو بناء موقع مثل الموجود في هذه الصورة ؟2
- ابني موقع متكامFFل تعليمFFي يقFFوم بشFFرح كتFFابي ومملكFFة تصFFميم3) بحيFFث يشFFمل كFFل مFFا تعلمتFFه فFFي هFFذاHTML5,CSS3المواقFFع الكتاب ؟
النهاية
261
![Page 262: سرهفلا - مكتبة تحميل الكتب مجانا · 2019. 3. 29. · CSS3:سداسلا لصفلا CSS3 ... CSS3 Text CSS3 Font CSS3 2D Transforms CSS3 3D Transforms CSS3](https://reader035.fdocuments.fr/reader035/viewer/2022063017/5fd861a0ba302017c577c167/html5/thumbnails/262.jpg)
المراجع
و موقFFFFFFع/http://www.w3schools.comتFFFFFFم السFFFFFFتعانة بموقFFFFFFعhttp://www.w3arabiconline.com/iارFFFى القFFFادة علFFFهيل المFFFلتس
وهناك إضافا ت وأمثلة كثيرة في الكتاب غير موجودة في الموقعين
الجرء الولHTML, CSS*لتحميل كتاب مملكة تصميم المواقععلى الرابط التالي
http://www.kutub.info/library/book/18973
)CSS Responsive*قريبا سوف يتم إصدار كتاب مملكة تصميم المواقع والجزء الثالث
الكت+++اب مج+++اني ول يج+++وز بيع+++ه أو نس+++خه عل+++ى ورق أو* إقتصاص جزء منه أو ترجمته إلى لغة أخرى أو ترجمة جزء منهالب++إذن ص++احب الكت++اب وللتواص++ل م++ع ص++احب الكت++اب عل++ى
[email protected]اليميل:
أخي القارi إن ثمن هذا الكتاب هو الFدعاء لFي ولوالFFدي وللمسFFلمينوالمسلما ت والمؤمنين والمؤمنا ت الحياء منهم والموا ت
د ليلههي َرب العَعاَلميَي( مع ر َدععَواه مع َأنع الَع )َوآخيوصل ل وسلم وبارك على ممد وعلى أله وصحبه أجعي
262