دورة CSS3 باللغة العربية

CSS3دورة أنيس حكمت أبو حميد: تقديم

@nees.com2aneeshikmat: البريد اإللكترونيwww.2nees.com: الموقع اإللكتروني

بسم هللا الرحمن الرحيم

[email protected] دورة مجانية(أنيس حكمت أبو حميد (

mailto:[email protected]�

الفهرسمن المهم اإلطالع على المقدمة لما تحتويه من معلومات قبل ( المقدمة

).البدء بهذه الدورةPrefix-Vendor

Media QuerySELECTORS

Web FontsText Effects and Typographic StylesMultiple ColumnsBackground Image And Decorative Properties


الفهرسBorder And Box Effects

Color & Opacity Gradient D Transformations2

AnimationTransition &D Transformations3

الخاتمة


المقدمة بالنجوم، وزينها السماء رفع يدوم، ال وغيره الباقي القيوم، الحي ل الحمد

ومحا أماتها ثم الجسوم، هذه بقدرته صور الختوم، في بجبال األرض وامسك إلى وفريق النعيم دار إلى ففريق يقوم، الميت فإذا الصور في ينفخ ثم الرسوم،

.السموم نار

اله وعلى وسلم، عليه هللا صل محمد وحبيبك نبيك على وسلم صل اللهم .وسلم وصحبه

في ومهمة جديدة بدورة اليوم لكم أعود الرائعين، وأصدقائي وأحبائي إخوتي مهم مكمل تعد التي الدورة هذه ،CSS3 وهي اإلنترنت، صفحات تصميم عالم

تسبق جديدة، عالمية تقنيات باستخدام اإللكترونية الصفحات تنسيق لمفهوم من وأعلى أسمى وابداعا جديدا، مدخال الويب لصفحات وتجعل القديم، العصر.^_^ CSS3 ال عن نتحدث اآلن فنحن ..السابق العصر


المقدمة اصدار هي css3 ال أن نعلم، أن فينبغي ،css3 ال عن سنتحدث أننا بما ,واآلن

أو مفهوم عن بالسابق نتحدث كنا وعندما .. css ال اصدارات من جديد.css2 ال نقصد فكنا ،css مصطلح 1.

الدورة هذه أن وهي البدء، قبل جدا مهمة معلومة الى أيضا أنبه كما أن البدء قبل عليك يجب ولهذا ،css ال في متقدمة مواضيع عن ستتحدث

أقل على CSS وال HTML بال التكويد إتقان مرحلة الى وصلت قد تكون.تقدير

:السابقة المتطلباتHTML: xXI3gl/tt.//goo:http

Css: kBdCC0gl/.//goo:http [email protected] دورة مجانية(أنيس حكمت أبو حميد (

http://goo.gl/tt3xXI�

http://goo.gl/0kBdCC�

المقدمة تتعلق التي األمور بعض معرفة المهم من فإنه ،css3 بال يتعلق فيما أيضا!!المستقبل الى النظرة وحتى والحاضر الماضي في بها

تماما، مستقرة ليست css3 أن هي اآلن، به إخبارك أريد فما تتعجب، فال نعم غير فهي وبهذا مستمرة، تطوير حركة في زالت ما أنها بهذا وأقصد استخدام الى تحتاج قد فإما مباشر، بشكل المتصفحات جميع مع متوافقة

vendor ال مثل webkit متصفح يدعمها ال قد الخاصية أن وإما .. وغيرها هللا بفضل ولكن ،)ايييه IE الى خصوصا موجه الكالم طبعا( معين

تدعم أصبحت والحديثة الرئيسية المتصفحات أغلب اآلن تعالى، والبحث بالتحقق تقوم أن دائما تذكر ولكن الرئيسية، css3 ال خصائص

هذه فحص ويمكنك ..ال أم المتصفحات قبل من معينة خاصية تدعم هل هذا(.. animation-com/#feat=css.//caniuse:http الموقع هذا خالل من الخاصية

ال مع المتصفحات تجاوبية مدى لمعرفة مثال مع الموقع يمثل الرابطcss-animation(...أن ستالحظ فمثال ie8 & ie9 المزية هذه يدعمو ال -_-...


http://caniuse.com/�

المقدمة ال أن وهي جدا مهمة جزئية الى ننتقل.. الكالم هذا بعد واآلن،

CSS3 ليست الHTML5

يظن أنها css3وسبب ذكر هذه النقطة، هو أن الكثيرين قبل البدأ بتعلم ال html5 أو يظن أنهما موضوعين يندرج أحدهما تحت اآلخر، وهذا غير

، والكن )من هنا 5HTMLعلى دورة ال يمكنك اإلطالع .. (صحيح أيضا هو css3ويكون ال HTML5هذا ال ينفي وجود جزئيات تعمل باستخدام ال

...المسؤول عن اعطائها النسق المطلوب

ولذلك وجب التنويه لهذه النقطة


http://goo.gl/3tJyqs�



المقدمة :مالحظات

Google ال متصفح على تطبيقها تم األمثلة هذه معظم إن1) Chrome إذا لذلك في والسبب ،chrome ال متصفح استخدام فيفضل األمثلة استعراض أردت

وال chrome ال لمتصفح اال التوافقية أراعي لم األمثلة أغلب في أنني ذلكfirefox المستغرق، الوقت وتقليل البرمجية الشيفرة لحجم إختصارا .. عادة

من خاصية ألي التوافقية معرفة كيفية عن الشرح سيتم أنه العلم مع.مهم أمر وهذا المتصفحات، مع الخصائص

Chrome: Version FireFox و 36.0.19 )اختبارها تم التي اإلصدارات(.. 37.0.1 مدعومة اآلن خصائص هي مجملها في هنا ذكرها تم التي الخصائص إن2)

يمكنك تقرأها التي الخصائص لذلك الرئيسية، المتصفحات جميع من ما الخاصية هذه أن بذكر قمت اذا اال عملك، في تعالى هللا بإذن تطبيقها

من بنفسك التحقق عليك يجب ذلك الى باإلضافة مدعومة، غير زالت.األولى بالمالحظة قلنا كما التوافقية


المقدمة بوضع أقوم فإنني بالتطبيق، تقوم ولكي لألمثلة، جدا مهم التطبيق3)

المعلومة، وإيصال للشرح كتسهيل البرمجية والشيفرة الناتج صورة أو معينة فكرة من اإلنتهاء وبعد للمثال، المباشر بالتطبيق تقوم وجعلك صفحة في موجود ذكرها تم التي األمثلة جميع أن ستجد معينة، جزئية

html هذا على النقر خالل من اليها الدخول ويمكنك .. بالتسلسل مرقمة الشكل

سيتعلم من ذلك من وأستثني شخص، لكل ومقدمة مجانية الدورة هذه4) وتعالى، سبحانه هللا معصية في ويستخدمها الدورة هذه من أمر أي

..فاشهد اللهم.. بلغت قد إني اللهم


css Vendor-Prefixال الخصائص من كثير أن وهي جدا، مهمة نقطة الى المقدمة في تطرقنا لقد

متصفح مع للتوافق وتطويرها مراجعتها يتم لم أو تعتمد لم المستخدمة ال خصائص ال من أي تستخدم عندما تحذر أن يجب أنه قلنا لهذا معين،

css3 .. معينة خصائص لتدعم المتصفحات بعض أنه أيضا ذكرنا وقد ال أن هو ذلك من واألهم .. موضوعنا هو وهذا.. Vendor الى تحتاجvendor وهي الرئيسية المتصفحات علي عنها سنتحدث التي والمتصفحات

IE(internet explorer)، و Google Chrome و Firefox وال Opera وال Safari..:vendor-css3Prop- :التالي بالشكل vendor ال يستخدم value;

-o-: ال vender ب الخاص Opera

-webkit-: ال متصفحات webkit ال وأشهرها عموما chrome وال safari..-ms- : ال متصفح IE

-moz-: Firefox


css Vendor-Prefixال على بنائا به خاصvendor متصفح فلكل.. السابقة بالشريحة حظت ال كما

بكتابة دائما نقوم فإننا.. سبق ما الى باإلضافة لكن المتصفح، نوع يسير css3 ال مستقبل أ، هذا في والسبب.. vendors ال بعد القياسية الصيغة vendor ال عن االستغناء عند المستقبل في نضمن وبهذا .. بسرعة ويتقدم

بالعمل يستمر شغلك(.. القديم الكود وتعديل العودة الى نحتاج لن أننا كتابتي وأثناء اآلن نشاهدها أصبحنا الفكرة فهذه حال أي وعلى ،)^_^ vendor ال استخدام على يكون العمل أغلب فأصبح.. الشرائح لهذه

... القياسية الصيغة مع webkit بال الخاص

can موقع استخدام تذكر I use المتصفحات لمعرفة المقدمة في ذكره تم الذي ^_^ ال أم vendor الى تحتاج وهل خاصية كل تدعم التي


Vendor-Prefixال css3 ال خصائص احدى هذه ،^_^ الموضوع على سريعا مثاال لنشاهد واآلن

.. copy ال عملية لمنع وهي

-webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */-o-user-select: none; /* opera */user-select: none;

..بإذن هللا تعالى vendorهذا المثال يشرح ويوضح فكرة استخدام ال – ie8ستجد أن ال ..كما أنه اذا قمت بالدخول الى موقع لفحص دعم هذه الخاصية

وهذا حسب تاريخ كتابة .. ( opera miniباإلضافة الى ..ال يدعم هذه الخاصية 9 )2015-1-26هذه الشرائح


Media Querymedia ال وهو css3 ال مواضيع أول في هللا بركة على لنبدء واآلن query

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

العديد وظهور التكنولوجيا تطور مع لكن وهكذا،.. الكومبيوتر شاشة أو توب هذه بأمور األهتمام المهم من أصبح والمتنوعة، المختلفة األجهزة من

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

media ب الخاص module ال تطوير الى التوجه من w3c ال منظمة query في والمخيفة الرائعة الحركة وهذه المختلفة، لألجهزة ومتوافقا داعما ليصبح..

وطريقة والتنسيق بالتصميم التحكم على وإمكانية قدرة أعطتنا الويب، عالم جهاز، أي على ستعرض االنترنت موقع على صفحة بأي الخاصة العرضResponsive ال وهي األفكار أهم إحدى هنا وظهرت Design ^_^


Media Querymedia ال بهذه الخاص Syntax الى سنتطرق.. واآلن query الشكل على وهو

:التالي

لكن ،css ملف تضمين طريقة تشبه فهي.. األولى الصيغة من.. تالحظ فكما.. media ال هو الجديد

الصفحة داخل css ب الخاص التنسيق كتابة طريقة فهي الثانية الصيغة أما.. )نفسه الملف ضمن التنسيق لتنفيذ شرط بعمل قمت وكأني(..

لننتقل اذن.. P: المكتوب من اشي فاهم مش *_* أنا.. األقوى السؤال واآلن.. الصيغة هذه مكونات لنشرح.. التالية الشريحة الى


Media Query :السابقة الصيغة مكونات شرح

(1Logic: إما وهي only وإما not تم ما فهي األولى الصيغة أما الثانية للصيغة and الى باإلضافة ذكره

not: تنفيذ أردنا حال في وتستخدم rules ينطبق ال عندما معينة exp )عكس(only: ال تنفيذ عدم أو اخفاء نريد عندما القيمة هذه تستخدم rules بنائا على .معينة media على

اذا التنسيق تنفيذ ليتم بكتابته سنقوم الذي التعبير فهي Expressions ال أما1)وهكذا... بكسل 480 عرض أقل تحديد مثل.. حدث

المراد البرمجية الشيفرة بها فيقصد الثانية الصيغة في الموجودة Rules ال أما2).)Expressions( 2 النقطة تحقق عند تنفيذها

(3Media: هللا بإذن لبعضها سنتطرق كثيرة خيارات وله المستهدف الجهاز هو .. التالية بالشرائح تعالى


Media Querymedia ال :مالحظة query ال تدعم ال IE8، نسخدم لذلك hack ال لمتصفح IE8

مثل Desktop ال بصفحة الخاص التنسيق تنفيذ على يقوم

؟ Expressions ال كتابة يمكنني كيف اآلن مثل نعرفها التي css ال خصائص استخدام طريق عن بساطة بكل الجوابwidth وال min-width وال max-width وال height وال min-height وال max-height ...

ال تصميم لبناء.. width لل min-max ال هو نستخدمه ما أكثر وبالحقيقةresponsive ..

:مثال


Rules Exp

media

Media Query فهي media ال أما

screen, print, handheld, aural/speech, embossed, braille,projection, tv, tty, all

,screen ال هي بالتحديد عليها نعمل التي الخصائص وأهم all القيم أيضا . طبعا ... بالغالب هذا لكن.. األخرى

واألجهزة والتابلت توب واالب الكومبيوتر شاشات على اعمل :screen ال... الذكية

All: األجهزة جميع.Print: الطباعة عند ..

Projection: عرض ال مثل العرض وسائل slides ...Tv: التلفزيون شاشات ..


Media Query الهواتف ألحجام خاص css ملف تضمين يمكننا كيف لنشاهد.. واآلن

:المثال شاهد.. الصغيرة

480 يساوي أو عرضها يقل والتي الصغيرة النافذة على إعمل تعني وهذه*^_ بكسل

:المثال شاهد.. من وأقل من أكبر فمثال.. شرط أو Range وضع يمكننا أيضا

480 يساوي أو أكبر كانت اذا البرمجية الشيفرة تنفيذ سيتم.. المثال هذا فيبكسل 800 يساوي أو أقل و بكسل


Media Query وضع سيتم ,األمثلة بخصوص تقلق وال ,جدا مهمة نقاط ذكر الى سأتطرق.. اآلن

.. الشرح هذا نهاية في ,تعالى هللا بإذن األمثلة من العديد width وال height ال ذكرنها وكما استخدامها يمكن التي القواعد أو الخصائص من

media ال داخل query ..مثل أخرى خصائص هناك لكن device-width و device-height ..ال استخدام يمكن وبالتأكيد min/max-device-w/h

الخصائص؟ هذه وظيفة هي فما.. orientation ال خاصية وجود الى باإلضافة device-width: الفرق ما..تأكيد بكل ستقول واآلن .الجهاز شاشة عرض تعطينا هذه

^_^ مهم سؤال وهذا.. ؟ width ال وبين بينها العرض نافذة عرض لمعرفة تستخدم width ال أن. هو السؤال هذا جواب ال استخدمت اذا ..صحيح به تفكر ما ,نعم.. )الصفحة يعرض الذي المتصفح(

device-width عليه ينطبق حجمها العرض شاشة جهاز على تنفيذه سيتم التنسيق فإن قمت ولو حتى التنسيق هذا عليه يعمل لن المكتب سطح جهاز من وبهذا.. الشرط

أن بمجرد شاشة اي على التنسيق فسيعمل.. width بال أما .. المتصفح بتصغير ... للشرط وصل المتصفح حجم


Media Query :النقطة هذه على مثاال لنرى واآلن


Media Query إذا لتحديد استخدامها يمكنك خاصية فهي orientation ال وظيفة بخصوص أما

.. portrait أو Landscape ال وضع في الجهاز كان ما

:المثال هذا شاهد واآلن


Media Query حجم كان اذا.. الشرط فسينفذ.. السابق المثال الشرط تجربة أردت اذا :مالحظة

من أكبر المتصفح عرض نسبة وكان .. 1500 يساوي أو أقل المتصفح اآلن العرض أن على orientation ال شرط سيعمل.. به الخاص الطول

landscape ..المثال نتيجة شاهد:


Media Query هذا في التركيز ويجب ,viewport ال وهو.. جدا جدا مهم موضوع الى نأتي.. واآلن

.. صحيحا عملك يكون أن أردت إن الموضوع device-width وال width ال وهما خاصيتين وجود عن الماضية الصفحات في تكلمنا لقد

على بنائا device-width وال )المتصفح( النافذة حجم على بنائا width ال أن وقلنا ... .. للجهاز الفعلي الحجم

الخلويات مثل الصغيرة لألجهزة التنسيق إلعطاء device-width هو المستخدم فإن لذلك .. وغيرها

بأي الخاص التنسيق يعمل حتى width ال نستخدم أن نحتاج نحن مشكلة هناك لكن آلية أو طريقة هناك بأن هنا تكمن المشكلة لكن .. المتصفح حجم على بنائا جزئية

مع يتالئم حتى يحتاجه الذي التكبير أو التصغير مقدار لحساب متصفح لكل عن ويختلف اآلندرويد متصفح عن يختلف ie ال متصفح أن يعني وهذا.. العرض

الخ.. opera ال


Media Query وهي ,viewport ب تسما التي هي بالمتصفح الخاصة العرض منطقة.. اآلن

آلخر متصفح ومن ,آخر الى جهاز من تختلف التي وهي محاكاتها يتم التياآلن؟ الى المشكلة أين اذن ..

سيتم فإنه المثال سبيل على max-width:480px ال استخدمت اذا أنه في المشكلة أن افترضنا ولو.. الجهاز حجم مع وليس viewport ال حجم مع المقارنة 800px هي ستكون viewport ال قيمة فإن 1 اآلندرويد متصفح يستخدم الجهاز

*_*.. الحل ما اذا .. 0_0meta ال هذه استخدام هو.. وجمال بساطة بكل الحل tag:

المتصفح أجبرت وهنا.. head ال في وضعها استخدمها دائما.. metatag ال هذه ال قيمة وأن .. الجهاز عرض يساوي width ال يجعل أن على نوعه كان أيا

zoom أي يوجد ال أي(.. الشاشة لحجم اإلفتراضية الحالة أي 1 هي zoom(


Media Query^_^ responsive موقعك كان اذا اال tag ال هذا تستخدم ال وهي :1 مالحظة

-user ال مثل tag ال هذا مع استخدامها يمكنك أخرى خصائص هناك :2 مالحظةscalable ال عملية لمنع وهي zooming قيمتان ولها .. مثال yes, no .. وغريها

الخ.. األدنى والحد zoom لل األعلى الحد تحديد مثل..

media ال إن :3 مالحظة query خصائص هي باإلصل css2, اضافته تم ما لكن أنه ستجد لذلك css3 ال سمات من فهي.. ذكرنها والتي جديدة خصائص من اليهاmedia ال نستخدم كنا css2 ال في query لل print كمثال _^*

وال الرئيسية المتصفحات جميع الخصائص هذه تدعم التي المتصفحات :4 مالحظةie ال استخدام عليك لذلك( التاسع اإلصدار من hack سابقا ذكرناه الذي(.


Media Querymedia ال موضوع على متنوعة أمثلة لنشاهد واآلن query ..خالل من.. وللعلم نعم ،)Responsive( متجاوب موقع تصنع أن يمكنك لوحده، الموضوع هذا من مجموعة اال هو ما المواقع، من النوع فهذا..ذلك من تتعجب وال

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

:هنا من األمثلة شاهدcss بال الخاص التنسيق ويكون السابقة األمثلة يعرض( :1 المثال inline(.

العرض من أكبر المتصفح ارتفاع جعل بتجربة قم.. المثال لهذا بخصوص .. ^_^ النتيجة وشاهد..*^_ النتائج لبعض عشوائية عينة هذه


Media Query اإلنتباه ويرجى ,له اإلنتابه يرجى ,تفاصيله بكل جدا مهم المثال هذا :2 المثال

النتائج ترى حتى.. المتصفح بحجم والتحكم ,به ربط التي التنسيق لصفحات ..المحمول الهاتف تستخدم وكأنك

من بنفسك والتحقق بالتجربة تقوم أن الفكرة( :المثال تطبيق من مقتطفات)^_^ البرمجية الشيفرة


Media Query شاشات بأحجام الموقع لعرض األدوات بعض استخدام أيضا يمكنك :مالحظة

أداة استخدام يمكنك أو me/.//mobiletest:http المواقع أحد استخدام مثل مختلفةافتراضي بشكل المتصفحات بعض في تجدها أو مباشرة لمتصفحك


Mobile Test

http://mobiletest.me/�


وط��ب نفس��ا إذا حك��م القض��اء..... دع األي��ام تفع��ل م��ا تش��اء فم��ا لح��وادث ال��دنيا بق��اء..... وال تج��زع لحادث��ة اللي��الي

وش��يمتك الس��ماحة والوف��اء..... وك��ن رج��ال عل��ى األه��وال جل��دا وس��رك أن يك��ون له��ا غط��اء..... وإن كث��رت عيوب��ك ف��ي البراي��ا يغطي��ه كم��ا قي��ل الس��خاء..... تس��تر بالس��خاء فك��ل عي��ب

ف��إن ش��ماتة األع��دا ب��الء..... وال ت��ر لألع��ادي ق��ط ذال فم��ا ف��ي الن��ار للظم��آن م��اء..... وال ت��رج الس��ماحة م��ن بخي��ل

ول��يس يزي��د ف��ي ال��رزق العن��اء..... ورزق��ك ل��يس ينقص��ه الت��أني وال ب��ؤس علي��ك وال رخ��اء..... وال ح��زن ي��دوم وال س��رور فأن��ت ومال��ك ال��دنيا س��واء..... إذا م��ا كن��ت ذا قل��ب قن��وع

ف��ال أرض تقي��ه وال س��ماء..... وم��ن نزل��ت بس��احته المناي��ا إذا ن��زل القض��ا ض��اق الفض��اء..... وأرض هللا واس��عة ولك��ن

فم��ا يغن��ي ع��ن الم��وت ال��دواء ..... دع األي��ام تغ��در ك��ل ح��ين

SELECTORSmedia ال عن الشيق حديثنا بعد واآلن query.. ورائع جديد موضوع الى ننطلق

!! .. Selectors ال وهو ,أيضا اضافتها تم التي Selectors ال من كثير فهناك تتعجب، ال ،Selectors نعم،

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

css3 ال اضافات أحد هو Selectors ال هذا ... ^_^ كمثال last-child وهو ^_^ والرائعة الجديدة

األخرى؟ اإلضافات هي ما .. اذن*^_ تعالى هللا بإذن الموضوع هذا من سنتعلمه ما هذا


SELECTORS(1element1 ~ element2: لجميع معين تنسيق بتنفيذ قم ,تعني الخاصية وهذه

element1 ب بصفحة مكان أي في سبقت حال في element2 ال عناصر كل فإن ,بالصفحة معين جزء في element1 ال جاء اذا أنه ,يعني وهذا

أن لذلك يشترط لكن التنسيق، ستأخذ بعده تأتي التي element2 ال عناصر ..parent ال نفس داخل يكونا

:تعالى هللا بإذن السابق الكالم سيوضح فهو ,المثال لنشاهد واآلن

,بالنتائج ومقارنتها للمثال المخصصة البرمجية الشيفرة الى تنظر أن جدا مهم*^_ حالة كل من الفكرة شاهد .. وضعتها حاالت 3 لديك


SELECTORS(2[attribute^=value]: لجميع التنسيق أعطي تعني الجميلة الخاصية هذه

^_^.. يساويها أو معينة بقيمة يبدأ attribute لها التي العناصر ال لجميع أريده الذي التنسيق بتنفيذ سيقوم فإنه div[class^=‘anees’] :كمثال

div ب يبدأ كالس لديها التي anees ^_^... :معا المثال لنشاهد


SELECTORS(3[attribute$=value]: في المعاكسة الخاصية هي الجميلة الخاصية هذه

نهاية في أو مساوية القيمة تأتي أن تهتم أنها أي ,السابقة للخاصية الوظيفة div ال لجميع الجديد التنسيق فسيكون div[class=‘anees’] كمثال ,الخاصية

المثال على ذلك بتجربة لنفم .. أنيس تساوي أو anees ب تنتهي التي^_^ السابق

:*^_ معا المثال لنشاهد :اآلن


SELECTORS(4[attribute*=value]: فإنك السابقتين، الخاصيتين على واطالعك دراستك بعد

في المطلوبة القيمة وجود حال في التنسيق ينفذ أن أردت لو ماذا ستسأل، ممكن؟ هذا هل ؟ *^_ القيمة )نهاية –منتصف –بداية( جزئية أي

كمثال الخاصية، هذه استخدام خالل من ممكن هذا ،^_^ نعم هي اإلجابة بتطبيق سيقوم فإنه السابق، المثال في div[class*=anees] باستخدام قمنا لو

*_* موقع أي وفي anees كلمة تحتوي التي div ال لجميع التنسيق :معا المثال لنشاهد


SELECTORS(5:checked

,radio( اإلدخال لوسائل التنسيق اعطاء على تقوم الخاصية هذه checkbox( جميع تطبيق على تقوم ال الخاصية هذه لكن .. option الى باإلضافة height وال width ال يأخذ لكن.. color يعطي ال فمثال.. التنسيقات

.*^_ معا مثاال لنشاهد واآلن،


SELECTORS(6:disabled و :enabled

حالة في التي للعناصر إما معين تنسيق إعطاء على تقوم الخصائص هذهdisabled حالة في التي أو enable .. معا مثاال لنشاهد:


SELECTORS(7:empty

تحتوي ال التي العناصر لجميع تنسيق إعطاء على تقوم الخاصية هذه.. )النص أي من فارغة tag باختصار( بداخلها نص

:^_^ معا المثال لنشاهد


SELECTORS(8:first-of-type

معين نوع من عنصر ألول معين تنسيق إعطاء هي الخاصية هذه وظيفة:*^_ مثاال لنشاهد .. به الخاص parent ال على بنائا



والح�زن واع�وذ ب�ك م�ن العج�ز والكس�ل واع�وذ ب�ك م�ن الهم اللهم اني اعوذ بك منالجبن والبخل واعوذ بك من غلبة الدين وقهر الرجال

SELECTORS(9:last-child

تنسيقه، تحتاج موقع أي مع تنتهي ال حب قصة.. الرائعة الخاصية هذه ضمن عنصر آخر بتنسيق التحكم في رائعة مزية إعطائك على تقوم فهي

parent ،فقط بساطة وبكل سكربت، الى الحاجة دون معين last-child، ^_^ مثاال لنشاهد .. ^_^ القوائم مع نستخدمها ما وكثيرا


SELECTORS(10last-of-type:

هذه معين، Parent ضمن عنصر آخر لتنسيق الخاصية هذه تستخدم سابقا ذكرناها التي first-of-type لخاصية المقابلة الخاصية هي الخاصية

*^_ معا مثاال لنشاهد ... *^_


SELECTORS(11:not(selector) عالم الى اضيفت والتي والمميزة، الرائعة الخاصية هذه

العناصر لجميع معين تنسيق إعطاء على تفوم css3 ال باستخدام التنسيق*_* مثاال لنشاهد ..*^_ not ال داخل وضعه تم ما باستثناء


الحظ النتائج والطريقة التي كتبت بها not وانظر النتائج ..بالمثال..

الخصائص التي تكلمنا ..فكما تالحظ يمكن استخدامها ..عنها أو سنتلكم عنها

^_^ notمع

SELECTORS(12:nth-child(n) تمكننا الصفحات، تنسيق في والمهمة الرائعة الخاصية هذه

قم أي nth-child(2): مثال.. التنسيق إلعطائه معين child تحديد خاللها من عناصر في التحكم يمكنك وبهذا.. *_* .. الثاني child لل التنسيق باعطاء

.. تحديدها أن يمكنك قواعد على بنائا معينة سيأخذ الذي العنصر خاللها من سنحدد التي القيمة الى يرمز n ال

3n مثل معادلة وضع إمكانية هو.. ذلك من واألجمل التنسيق، + فهذه 33 تعني * 0 + 3 ثم ،3 يساوي 3 * 1 + أو ازدادت كلما أنه يعني فهذا 6 = 3

التنسيق تعطي كمعادلة استخدامها يمكنك.. العناصر عدد تضاعف*^_ ذلك على عمليا مثاال لنشاهد.. ^_^ 3 ال لمضاعفات

أو odd كلمة استخدام يمكنك كما..والطرح الجميع عمليات استخدام يمكنكeven زوجية أو فردية لصفرف التنسيق إلعطاء ^_^...

الخاصية لهذه المقابلة والخاصية ..*^_ مباشرة صحيح عدد استخدام أو^_^ ذلك على أمثلة لنشاهد واآلن ...nth-last-child(n): هي



كما تالحظ فإن التنسيق تم تفعيله على 4nوالثامن ألن المعادلة هي 4العنصر

.. 2* 4و 1* 4وهذا يعني لذلك يتنهي ) 12(غير موجودة 3* 4أما

Anees 8التنسيق عند

SELECTORS(12:only-of-type هو يكون لعنصر معين تنسيق إلعطاء الخاصية هذه تستخدم

كان لو المثال، سبيل على نوعه، من parents ال ضمن جاء الذي الوحيد div ال داخل يكون أن يجب التنسيق ليأخذ فإنه <h1> ال هو العنصر هذا

آخر tag أي وجود ويمكن واحدة، لمرة <h1> فقط )parent أنه فرض على( خاصية تتواجد الفكرة وبنفس .. *^_ الخاصية ال لهذه مشكلة ليست فهذه

only-child اإلبن تكون أن يجب بأنها السابقة عن تختلف الخاصية هذه لكن ^_^ معها أيضا آخر tag أي يوجد وال parent ال داخل الوحيد

*^_ السابقتين الخاصيتين على متنوعة أمثلة لنشاهد واآلن كما متنوعة، احتماالت وتجربة األمثلة، تطبيق تنسى ال :مهمة مالحظة

.. مثال بكل الخاصة البرمجية الشيفرة الى تنتبه أن أرجو


SELECTORS(13:required & :optional

نعم، ،^_^ منها كل وظيفة نستنتج ،^_^ لوحده اإلسم من خاصيتان وغير )required( اإللزامية للحقل تنسيق اعطاء هي فوظيفتهما*^_ مثاال لنشاهد ..)optional( اإللزامية


SELECTORS(14:target

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

target، وجود.. المثال سبيل على شروط، تتوافر أن يجب ذلك يتم ولي وبهذا ... للعنصر id ال قيمة يحتوي href ال يكون ورابط id له عنصر

.. anchor ال لهذا target هو العنصر يكون)url لل انتبه المثال تطبيق عند(^___^ معا مثاال لنشاهد



]286/البقرة[

أعوذ بال من الشيطان الرجيم

نفسا إال وسعها لها ما كسبت وعليها ما اكتسبت ربنا ال تؤاخذنا إن ال يكلف هللا وال نسينا أو أخطأنا ربنا وال تحمل علينا إصرا كما حملته على الذين من قبلنا ربنا

لنا ما ال طاقة لنا به واعف عنا واغفر لنا وارحمنا أنت موالنا فانصرنا على تحمالقوم الكافرين

صدق هللا العظيم

Web Fontsوتصميم تطوير عالم في ومهم جدا، رائع أمر عن سنتحدث الموضوع هذا في

...^_^ الخطوط عن سنتحدث نعم ،*^_ المواقع

معينة، واألوان بأشكال تصميم إعطائك هو المصممون، به يقوم ما إنعادة األمر هذا ويكون رونقه، التصميم ليعطي استخدامه تم خط الى باإلضافة

PSD شكل على File ^_^.. التي األجزاء واقتطاع وتفصيل تحديد يمكنك وبهذا *^_ الخط هو.. اآلن لموضوعنا بالنسبة وأهمها.. تريد

صحيح، بشكل يعمل حتى العميل جهاز لدى الخط يتوفر أن يجب السابق في كانmodule تصميم تم خاللها فمن ،css3 ال بوجود الماضي من أصبح الكالم هذا لكن

جهاز على موجودا يكون أن دون معين خط باستخدام للمتصفح السماح وظيفتهفي تضمينها ثم ومن server على الخط ملفات وضع هو يلزمنا ما وكل العميل،

^______^ لدينا التنسيق صفحات


Web Fontsالخاصية؟ هذه هي ما ،^_^ األهم والسؤال اآلن

font-face@ : هو الجواب Rule

له، المتاحة اإلمتدادات استخدامه، نريد الذي الخط هي هنا rules وال السيرفر على الملف موقع الى باإلضافة.. الخط هذا تدعم التي والمتصفحات

:*^_ المثال هذا شاهد ...^_^

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

“ “ داخل اإلسم بوضع تقوم أن عليك يجب ولكن ذلك، أردت اذا مقطع


Web Fonts:الموضوع على بسيط مثال

على الخط وجود موقع عن المتصفح تخبر التي هي الخاصية هذه2).5 و 4 و 3 مثل ومتعددة مثل مختلفة قيم على تحتوي وهي السيرفر،

(3Local األصلي اإلسم أخذ على المزية هذه وتقوم Source Name ،ومن للخط .*^_ ال أم الخط هذا يمتلك هل المستخدم جهاز قحص ثم

بتحميل ليقوم url ال دور يأتي المستخدم لدى الخط موجودا يكن لم إذا4) وجود مكان وضع يتم هنا أي( server ال خالل من المتصفح على الخط.)السيرفر على الخط

(5Foramt: ال تحديد يتم وهنا format ال من العديد وهناك... بالخط الخاص formats ال مثل open type وال svg وغيرها ...


Web Fonts^_^ سابقا ذكرنا ما على مثاال لنشاهد

:مالحظاتgoogle طريق عن الخطوط واستخدام البحث يمكنك1) font ..من العديد ستجد

.سهولة بكل واستخدامها تضمينها وبإمكانك الخطوط أي أو الموقع نفس طريق عن وهذا ذلك، فيمكنك.. الخط تحميل أردت اذا2)

.)الملكية لحقوق انتبه( آخر موقع الصيغة هذه بتحويل نقوم ونحن ttf تكون عادة اإلفتراضية الخط صيغة3)

طريق عن بالبحث قم.. اإلنترنت مواقع طريق عن وذلك webfont الىfont عن جوجل to webfont _^*


Web Fontsفهم لك يتسنى حتى وذلك نتائجه، وربط مثال أي بتنفيذ أقم لم اآلن، الى طبعا

عند لنا بالنسبة فستكون.. النهائية الشيفرة أما .. الخاصية هذه جزئياتالذي الشيء هو ما تدرك أن أرديك لكن ..^_^ ولصق نسخ مجرد العملالصيغة الى نصل حتى بالتدريج نكمل دعنا لذلك.. ولصقه بنسخه تقوم جاهزة الخطوط تحويل موقع من سنأخذها العادة في( عليها سنعمل التي

-_-( Defining وهو سابقا ذكر عما مهمة نقطة عن سأتحدث اآلن Different Faces

*^_ أوال الملف هذا بتحميل تقوم أن أريدك.. أتكلم ماذا عن ولتعرفOpen+Sans:use/Collection:com/fonts#UsePlace.google.//www:http هذا الى أدخل

google(.. الموقع font( الخط بتحميل وقم ^_^ )الشريحة في الصورة شاهد )التالية


http://www.google.com/fonts�

http://www.google.com/fonts�

Web [email protected] دورة مجانية(أنيس حكمت أبو حميد (

Web Fonts :الملفات هذه ستجد.. الخط بتحميل القيام بعد.. اآلن

تمثل كأنها بأسمائها الملفات هذه أن فستجد.. قليال النظر بإمعان قمت إذا font-weight ^_^...؟؟ هنا تظهر قد التي المشكلة هي ما اذا .. المقصد وهذا نعم

متنوعة قيم على أحصل لكي أنني هوجميع بتحويل أقوم أن يجب فإنه للخط،

استخدام ثم ومن webfont الى... الخطوطحدى، على خط وكأنها قيمة لكل font-face ال

مثل قيمة لكل اسم بتعريف وسأقومFont-family: open1 و open2 و open3 وهكذا

.. متعبة لكنها.. صحيحة الطريقة وهذهالقيم هذه تحديد فيلزمني ذلك، الى باإلضافة

ال مفهوم ظهر لذلك .. الخط تعريف عندDefining Different Faces


Web Fonts الشكل نوضح لكي مثاال لنشاهد لكن.. نعم.. غامضة زالت ما األمور ..!_! واآلن

^_^اليه وصلنا الذي

..الصورة في متوفرة جزئية لكل انتبه األول لكن .. التمضمينات من لكل متشابه تسمية الخط بتسمية قمت أنني الحظ

لذلك.. italic ال قيمة تضمين والثاني bold ال قيمة تضمين هو منه الهدف الملف لموقع يأخذني فكان url ال أما .. font-style وال font-weight ال استخدمنا*^_ قيمة بكل الخاص


Web Fontsقيم وبإعطائه اإلسم نفس استخدام بمجرد أنك هو الموضوع، في الجميل اآلن

:المثال شاهد.. التقليدية بالطريقة العمل هو به القيام عليك ما كل.. متنوعة

استخدامها عدم أو الخصائص استخدام يمكنني .. اليه أرمي ما فهمت هلتنفيذ أو جلبها سيتم التي الخطوط /الخط سيحدد والقيم اإلسم طريق وعن..

^_^ تنسيقها

..سابقا شرحناها نقطة عن بسيطة نظرة لنلقي لنعود اآلن ..*^_ ماذا.. واآلن


Web Fontsالخط يتوفر هل تفحص أنها وقلنا السابقة، الشرائح في local ال عن تحدثنا لقد

:منها نذكر عدة سيئات لها الخاصية هذه لكن .. ال أم العميل بجهاز -_- 9 من األقل IE ال إصدارات من أي تدعم ال المزية هذه1)mac على safari ال لمتصفح وخصوصا بالتنفيذ، وقت تأخذ2) os .. والسبب

postScript أن يجب mac ال أن الى يعود ذلك في name المتصفحات بينما Full ال تأخذ األخرى name ..يجب أنه يعني هذا !؟ يعني ماذا الكالم هذا

:مثال.. ثانية المشكلة وهذه.. -_-.. مرتين local بتعريف نقوم أن

*^_.. بهذا نكتفي لكن .. أيضا غيرها وهناك ؟ نفعل ماذا واآلن

^_^ عادة local ال نستخدم ال فإننا بساطة بكل



)الجزء األول(كتاب وحي القلم

Web Fonts جزئية الى ننتقل أن يجب.. *^_ local ال موضوع عن الشيق حديثنا بعد

فال تتعجب، فال نعم، ،!؟ خط بكل الخاصة اإلمتدادات وهي مهمة، أخرى*^_ هدف بدون عشاوئيا وإضافته تصميمه تم يوجد

:لنبدأ واآلن(1WOFF / WOFF2: ال هذا format ل اختصار Web Open Form Format، تم

أخرى منظمات مع مع بالتعاون ،^_^ Mozila قبل من النوع هذا تصميم ذلك في والسبب التحميل، في األنواع أسرع من النوع هذا ويعد ،*^_

TTF وهما نوعين بين يجمع مضغوط ملف هو النوع هذا أن الى يعودmeta اضافة إمكانية هو النوع هذا يميز مما أيضا ،.. OTF وال data و

lincies ال نفس داخل font -_- ... الشركات تسير الي هو النوع وهذا ...المتصفحات في مدعوما لجعله


Web Fonts(2OTF / TTF: ل اختصار وهما اإلمتداد من نوعان هذان OpenType Font and

TrueType Font.، تصميم تم وبسببهما الشائعان، النوعان هما النوعان هذان هذه نسخ سهولة الى يعود ذلك في والسبب ،)WOFF( السابق النوع

open ال نوع به يتميز بما ،*_* قانوني غير بشكل واستخدامها األنواع

type األنظمة لجميع دعمه هو cross-platform، ال بخصوص أما ttf نوع فهو apple بوساطة صمم & Microsoft هو يميزه ما وكان ..الثمانيات آواخر في

أن تجد ولذلك ...*^_ البكسل على بنائا الخط عرض بطريقة التحكم األنواع أن يعني ال وهذا ،ttf من يكون بتحويلها نقوم التي الخطوط أغلب

النوعين هذا بين جمعت السابقة فالخاصية ... المزية هذه تملك ال األخرى امتداد كل فكرة ذكرنا نكون بهذا...^_^ التقني التقدم هو .. واحد نوع في.. ^_^ صغيرة نبذة من هذه من


Web Fonts(3EOT: ل اختصار هو النوع هذ Embedded Open Type طريق عن وصمم

،font-face ال لموضوع األصليين المبتركيين هم ويعتبرو مايكروسفت، تجد لذلك .. وأقل IE8 ال متصفحات يدعمه الذي الوحيد هو النوع وهذا القياسية الصيغة سنرى(.. الخطوط تضمين عند EOT ال سنستخدم أننا.)تعالى هللا بإذن واألخيرة 4 النقطة من اإلنتهاء بعد

(4SVG / SVGZ: ل اختصار هو النوع هذا Scalable Vector Graphics يعتمد وهو بالحجم يتميز النوع هذا أن كما الخط، تمثيل أو لرسم vector ال على

IE وال IE ال أنه المشكلة لكن ،^_^ التحميل سهولة يعني وهذا الخفيف

mobile وال Firefox باإلضافة .. لهم األولى الصيغة ويستخدم له، داعم غير .. وأقل 4.1 اإلصدار من دعمه تم النوع هذا فإن ذلك الى


Web Fontsنعني ماذا تعالى، هللا بفضل نعي أصبحنا السابق، الحديث بعد واآلن،

هللا بإذن الصيغة استخدام اآلن علينا سيسهل وبهذا الخطوط، من األنواع بهذهمدعومة تكون بحيث الخطوط تضمين طريقة على مثاال معا لنشاهد.. تعالى

:^_^ جميعها الرئيسية المتصفحات من


Web FontsFontspring تسمى السابقة الصيغة :مالحظة Bulletproof Syntax أخرى صيغة وهناك

وهي الرئيسية المتصفحات لجميع داعمة أيضا وهي تراها أن يمكن أيضاBulletproof Syntax المثال هذا تشبه وهي:

منفذة غير local ال قيمة جعل على أوال يعتمد لكن السابقة، بالصيغة شبيه الصيغة هذه *^_ external الخارج من غالبا استدعائه ويتم )موجود غير الخط( األجهزة من^_^ هللا شاء إن تمام فالوضع.. الشكلين من أي رأيت فإذا..


Web Fonts w3schools موقع من الصورة( :font-face@ تدعم التي المتصفحات لنشاهد واآلن

)2015-2-9 تاريخ في

من انتهينا نكون بهذا واآلن ...^_^ العالمين رب ل الحمد أن دعوانا وآخرالسمات من العديد يوجد أنه مالحظة مع.. تعالى هللا بإذن الخطوط

عن بالبحث قم.. عنها البحث بإمكانك عنها الحديث يتم لم والخصائص “More Font Properties” ذكره تم ما يهمني ما لكن ..*^_ المثال سبيل على ^_^


Web Fontsموقع webfont الى font ال بتحويل يقوم جيد لموقع بالنسبة :مالحظةgenerator-com/tools/webfont.fontsquirrel.//www:http

في األولى القائمة ضمن ستجده األولى بالشرائح أخبرتك كما بالبحث قمت إذا *^_ جوجل بحث


http://www.fontsquirrel.com/tools/webfont-generator�

http://www.fontsquirrel.com/tools/webfont-generator�


اللهم صل وسلم على الحبيب المصطفى عليه أفضل الصالة والسالم

Text Effects and Typographic Styles الحلوى؟ تحب هلحتى حبها عليك فيجب وإال المثال، معنا فتابع الحلوى محبين من كنت إذا

^_^.. ههههه الحلوى قطع على التشبيه نكمل

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

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

.. ^_^ للزائر منك والمقدمة مشروع بأي الخاصة الحلوىالمواقع تصميم عالم في ويصنف بل الحلوى، قطع يتعدى األمر هذا وبالتأكيد

... مشروع وألي موقع ألي الفقري العامود أنه على


Text Effects and Typographic Stylesالتي والمحاور اإلحداثيات فكرة معا نسترجع أن به، سأبدء ما وأول واآلن،

.. سابقا الرياضيات دروس في تعلمناهانظام أو مبدأ استخدام على تقوم css ال أن هو به، إخبارك أحب ما أول

لدي يتوفر فإنه ديكارت، بنظام وبمعرفتنا وبهذا بديكارت، الخاص اإلحداثياتالصادي والمحور )x-axis( -األفقي- السيني المحور محورين،

والتي المحور نقطة في يتقاطعان المحوران، هذان.. )y-axis( -العامودي- الذي الشكل وليتضح .. )origin( ب تسمى:الصورة لنشاهد.. أذهاننا في أصبح

و الصورة اعلى الى يكون أن )-( الى انتبه()الصورة أسفل الى يكون (+)


Text Effects and Typographic Styles1 يعادل الشاشة على هو يظهر، مربع كل فإن السابق، الشكل على بنائا اآلن

–ذلك تخيل - بكسل

البعد مقدار تنمثل التي هي بالرسم الموجودة والموجب السالب إشارة اآلن ,تأكيد بكل المحور اتجاه على بنائا ،)origin( المحور نقطة عن والقرب

قمنا لو البسيطة المفاهيم هذه شرح وبعد اآلن،هي فما بتحليلها قمنا قم ومن التالية الصورة بأخذ ^_^ معا ذلك لنجرب بها؟ سنخرج التي النتائج

القيمتين من فيمة كل وموفع لقيمة انتبه *)*^_ الصورة على والمكتوبة


Text Effects and Typographic Styles :التالي فسنستنج السابقة القيم الحظت اذا

باتجاه أفقيا المحور نقطة عن بكسل 4 بمقدار نبعد أننا تعني 4,5 النقطة1).. بكسل 5 بمقدار ألسفل اتجه تعني 5 وال الموجب الخط

,3- النقطة2) في اليسار الى بكسل 3 بمقدار المحور نقطة عن ابتعد تعني 1-..بكسل 1 بمقدار األعلى الى واصعد الصورة،

ابتعد، مثل كلمات لذكر تطرقت فإني السابقة، اإلستناجات في الحظت اذا3) تكون حتى الشكل بهذا صيغ الكالم هذا الخ، .. اصعد أسفل، اتجاه،

هو shadow ال مثال تأثير أي تتخير أن أريدك ألني اليك، أقرب الصورة.. اإلتجاهات إلحدى سحب عملية مع بكسل تظليل عملية


Text Effects and Typographic Styles*^_ text-shadow ال وهو ... text بال يختص css3 أمر أول بتطبيق لنبدأ واآلن،

سابقا شرحناه ما على وممتاز عملي تطبيق هة فعليا الموضوع وهذا... *^_ المحاور بخصوص

:العامة الصيغة

)معروفة ووظائفهم اختياريات... inherit وال initial وال none ال( :العامة الصيغة شرح

(1x-axis: األفقي للمحور بالنسبة المحور نقطة عن اإلبتعاد القيمة هي )الزامي((2Y-axis: // // // // // // // // العامودي)الزامي((3blur-radius: لل الضبابية مقدار وهي shadow _^* .0 واإلفتراضي اختياري(4Color: ال لون تحديد يمكنك اختيارة قيمة وهي shadow خاللها من ..


Text Effects and Typographic Styles:^_^ الموضوع عن عمليا مثاال لنشاهد.. واآلن

بمقدار النظر ودقق .. shadow لل إخترته الذي اللون هو األحمر اللون أن الحظ قتم.. موجبة القيم.. )والصادي السيني المحور تذكر( ..األحمر للون اإلزاحة

شرحنا لذلك.. إلسفل بكسل 15 و بكسل 20 بمقدار لليسار السحب ... *^_ .. السابق الموضوع


Text Effects and Typographic Styles..^_^ الضبابية إلستخدام بتجربة لنقوم.. واآلن :2 مثال

كمية زادت.. الرقم زاد وكلما .. shadow لل الضبابة مقدار تمثل 7 القيمة^_^ التالشي


Text Effects and Typographic Styles لنفس shadow من أكثر إعطاء هي الجميلة واألمور الخصائص من :3 مثال

shadow ال من أنواع تصميم يمكننا خالله فمن جدا، رائع أمر وهذا النص، ما كل الحركة، بهذه نقوم ولكي .. كلي بشكل النص الشكل تغيير بحيثshadow ال بين الفاصلة استخدام هو فعله علينا values ...


Text Effects and Typographic Styles:4مثال

محفور وكأنه يبدو؟ كيف الحظ .. الصورة في الموجود النص في رأيك ما غير ال فقط CSS ال طريق عن التنسيق أو التأثير هذا.. الكرتون داخل

معا البرمجية الشيفرة لنشاهد...^_^ text-shadow ال استخدام طريق وعن..^_^



1520 -1470السلطان العثماني سليم االول

Text Effects and Typographic Styles كمصممين تخدمنا والتي النصوص، تنسيق في الرائعة الخصائص من أيضا، على تقوم الجميلة الخاصية هذه ،^_^ text-overflow خاصية هي الويب، لمواقع

ويكون يحتويه، الذي اإلطار حجم عن الزائد النص في بالتحكم امكانية اعطائنا أن الحظ ...ل الطالب ذهب مثل ^_^ .. للنص Trim عمل طريق عن هذا

الخيار أما ^_^.. ellipsis اسمه الخيار هذا .. بنقاط استبدالها تم النص تكملة clip هو text-overflow لل اإلفتراضي

:^_^ مثاال لنشاهد واآلن


Text Effects and Typographic Styles )التالية للشريحة انتقل ثم والنتيجة للتنسيق انتبه( :النتيجة هذه شاهد اآلن


Text Effects and Typographic Styles واعطاء الخصائص، من مجموعة باستخدم قمت فإني السابق، المثال في الحظت اذا

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

:خاصية منها أيضا الخصائص إخفاء على تقوم hidden وخاصية.. معروفة overflow ال ... white-space وال overflow ال .. الحاوي نطاق خارج سيخرج شيء أي أن تعني هذه nowrap ال خاصية لكن css1 ال خصائص من فهي :white-space ال أما

وال أي السطر، نفس على النص ويستمر واحدة، مساحة المساحات باعتبار يقوم .. br بوجود اال جديد، سطر على النص ينزل أن يمكن

التأكد أريد كنت اذا ... responsiove ال عند الخاصية هذه استخدامات أجمل من يكون قد تصغير أو التنسيق تغيير دون الوقت وبذات الحاوي، خارج يخرج لن النص بأن

^_^ الخط حجم :المثال تطبيق شاهد


Text Effects and Typographic Styles ال في والمضافة النصوص مع استخدامها يمكن التي الخصائص من أيضا

css3 ال خاصية هي Resize حالة في نستخدمها التي الخصائص من أيضا وهيكنا.. السابقة الخاصية في الحظت اذا(... الحاوي حجم من أكبر النص كانحجم تغيير لنا يتيح الخيار هذا فإن .. اآلن أما )... شكل على النص بجعل نقوم

.. ^_^ معا كالهما أو أوعاموديا أفقيا إما الحاوي

:العامة الصيغة شاهد

^_^ الجميلة الخاصية هذه على عمليا مثاال لنشاهد.. واآلن


Text Effects and Typographic [email protected] دورة مجانية(أنيس حكمت أبو حميد (


تذكر أن تتأكد من توافقية كل خاصية نتحدث عنها *^_بنفسك كما تعلمنا

:مثال

Text Effects and Typographic Stylesword-wrap ال خاصية

الخاصية هذه بالنصوص، تهتم والتي css3 ال خصائص من أيضا الخاصية هذه كلمة وجود حالة في وهي األحيان، من كثير في مزعجة مشكلة بحل تقوم

على asdasdqwejlkdjflskjdflkjdfljsldfkjlsdkfjcvb,cvn,mndf,we هذا مثل شكلها صغير، حجمه حاوي في جاء اذا الكلمة من الشكل هذا .. المثال سبيل

:التالي الشكل شاهد ..الحاوي خارج النصح فسيخرج

نفصل بطريقة المشكلة هذه لحل واآلن جديد سطر على لتنزل الكلمة بها

فراغات على تحتوي كلمة وكأنها^_^ word-wrap باستخدام سنقوم


Text Effects and Typographic Styles :العامة الصيغة

فهي normal أما.. الكلمة بتجزئة تسمح التي القيمة هي break-word ال تكون يحبث...اإلفتراضية الحالة

)الناتج التالية الشريحة( :المثال شاهدلحل أخرى طرق استخدام يمكننا :مالحظة

بأي أو سابقا تعلمنا كما .. المشكلة هذه*^_ أخرى طريقة



ال تنسى تطبيق ما تتعلمه وما تشاهده


تحت راية القرآن: الرافعي

Multiple Columns مهم موضوع الى سننتقل فإننا بالنصوص، الخاصة التنسيقات عن حديثنا بعد

سهولة، بكل المحتوى الموقع زائر يقرأ بأن اإلهمام وهو موقع، ألي بالنسبةأكثر ضمان الى باإلضافة للموقع، المستمرة الزيارة على دائما يشجعه مما

الموقع على اإليجايبة بالفائدة يعود مما الموقع، هذا لزائر تحقيقها يمكن فائدةالفقرات، عرض بطريقة كبير إهتمام تجد لذلك الموقع، لهذا الراعية والمؤسسة

–النصوص تقسيم هو النصوص لعرض حاليا المتواجدة األساليب أهم ومن بسبب وخصوصا ...Columns أعمدة شكل على موقع بأي الخاص المحتوى وهذا فعال، كبيرة بمساحات wide شاشات وظهور الشاشات، أحجام اختالف

وهو كبير حجم على ممتدا فسيكون محددات، بدون سيعرض النص أن لو يعني تعتمد والمجالت اإلخبارية المواقع أن نجد لذلك .. القارئ لعين مزعج شكل... ^_^ األسلوب هذا


Multiple Columns المحتوى، بهذا سهل بشكل التحكم الممكن من أصبح css3 ال باستخدام اآلن،

...أعمدة شكل على وتقسيمه :لذلك طريقتين وهناكPrescriptive ب الطريقة هذه تسمى :األولى Columns عدد فيها يكون طريقة وهي

)column-count(..محدد األعمدة

Dynamic الطريقة هذه تسمى :الثانية Columns عدد حساب فيها يكون طريقة وهيوجود حالة في الشكل هذا يستخدم ما أفضل ولهذا...تلقائي بشكل األعمدة

Flex Layout )column-width( .. ^_^


Multiple ColumnsPrescriptive بال تعالى هللا بركة على اآلن لنبدأ Columns: شكل على معين محتوى لتقسيم السهلة أو البسيطة الطريقة تعد الطريقة هذه

:هي لها العامة والصيغة أعمدة، columns وال تقسيمه، المراد المحتوى يحتوي الذي wrapper ال الى يرمز E ال

... عددها على المحتوى تقسيم المراد األعمدة عدد تمثلdiv المثال سبيل على يعني وهذا {coulmn-count: المحتوى بتقسيم قم أي {5

....^_^ أعمدة 5 الى div ال داخل المتواجد

: التالية الشريحة في المثال شاهد)الموقع هذا طريق عن عشوائية نصوص انشاء يمكنك(


http://www.lipsum.com/�

Multiple [email protected] دورة مجانية(أنيس حكمت أبو حميد (

الجزء األول هو الشكل أو..الحظ الشكل التالي، والذي يحتوى على جزئينcolumnsالناتج اإلفتراضي للمحتوى، أما الشكل الثاني فهو باستخدام ال

): الشيفرة البرمجية في الشريحة التالية( ^_^


:أما بخصوص الشيفرة البرمجية التي استخدمت في المثال السابق فهي

لكي تدعم أو تعمل هذه vendorأهم ما يجب مالحظته هنا، هو استخدام ال تابع >---) -webkit-, -moz-.. (الخاصية على المتصفحات المختلفة


وطبعا، وألهمية الموضوع سأكررها مجددا، ال تنسى استخدام موقع مثل caniuse ولكن كيف..حتى تتحق من دعم المتصفحات لخاصية معينة

: شاهد.. فذلك أيضا من خالل الموقع ! ؟ vendorعلمت بأنها تحتاج الى ال


أو كمطور مواقع Front end Developerأيضا، من الحركات الجميلة، ك هو انشاء آلية للتعامل مع هذه الخصائص المختلفة، دون الحاجة الى

تكرارها دوما، ويكون ذلك من خالل استغالل ما تعلمناه سابقا عن طريق فمثال، إن أكثر ما أقوم باستخدامه لتقسيم المحتوى الى .. selectorsال

لهذا أقوم بانشاء الشكل.. أعمدة 4أو 3أو 2أعمدة هو أن تكون بعدد : بالتنسيق

هذا الشكل يمثل نوعا لإلستخدامالجميل لما تعلمناه من خصائصدائما فكر بأن يكون عملك مرنا

ولكل شكل من الذي ذكر حسناتوسلبيات، وهناك أشكال كثيرة

أخرى، لكن أحببت لفت نظركم الى ^_^هذا الموضوع


:Dynamic Columns: column-widthالطريقة الثانية ه��ذه الطريق��ة الجميل��ة تس��تخدم لتقس��يم المحت��وى ال��ى أعم��دة بنائ��ا عل��ى ال

width ال�ذي س�نقوم بتحدي�ده لك�ل ع�امود، ول�يس ع�ن طري�ق تحدي�د ع�ددباإلض�افة .. Flexاألعمدة، وبهذا فإن هذه الطريقة فعالة جدا ألي تص�ميم

ال�ذي اعط�ي widthالى ذلك، فإن عدد األعمدة ي�تم تحدي�ده بنائ�ا عل�ى ال fillيق��وم المتص��فح بعم��ل .. ( parentلألعم��دة معتم��دا عل��ى حك��م ال

) widthلألعمدة بنائا على ال ^_^: الصيغة العامة وهي سهلة جدا


^_^لنشاهد مثاال ..واآلن إن ما تم ذكره بخصوص دعم المتصفحات

لكن الحظ.. للطريقة األولى ينطبق هناألن ال ..أعمدة 7كيف أنه تم تكرار

Width 1مثال 150الموجود هو


): انظر لعدد األعمدة(وانتبه للقيم اآلن ثم انتقل للنتائج.. اآلن لنشاهد مثاال آخر

2مثال


بكسل، وكان حجم 1000يساوي parentلل widthفي المثال السابق، كان ال * 8أي 8بكسل، لكن عدد األعمدة الذي ظهر كان يساوي 100العامود يساوي

!، إذن أين المسافة الباقية ؟800= 100بكسل تقريبا كمساحة افتراضية بين األعمدة16بمقدار gapأوال، يوجد هناك

عدد الفراغات بين..(112= 16* 1–8المنشأة، وبهذا يكون يصبح لدينا ) .. 1–األعمدة يساوي عدد األعمدة .. 912= 112+ 800وبهذا يصبح المجموع لدينا

حقيقة هذه الخوارزمية، تعد من الخوارزميات الذكية، لذلك فهي تقوم على تغيير، وبهذا فإن حجم األعمدة^_^تلقائيا parentحكم األعمدة بما يناسب ال

سيختلف بنائا على ما يكون مناسبا للعرض، ويكون gabsباإلضافة الى حجم ال * ^_) min-width(بكسل 100هنا هو widthالحد األدنى لل

لمثالن��ا فق��د أص��بحت تقريب��ا ) حس��اب تقريب��ي ول��يس فعل��ي(أم��ا القياس��ات الفعلي��ة gap .218 *7و ال 8* 109تساوي


:مالحظة مهمة أيضاعندما نقوم بانشاء أعمدة متعددة، وتحتوي هذه األعمدة على فقرات مثال،

ولذلك يمكنك.. فإن التنسيق األصلي لهذه الفقرة ال يذهب، بل يبقى موجودا : شاهد المثال.. التحكم بالمسافة بين الفقرات والهامش وغيرها

انبته لمواقع الفراغات والتي تمثل المساحة اإلفتراضية للمساحات بين..الفقرات

)النتائج في الشريحة التالية: (الشيفرة البرمجية


فإن الخصائص ال تضيع مع ال.. اذا وكما الحظنا من المثال السابق columns لذلك نقوم نحن بتصفيرها إن أردنا ذلك_^ *

*)_*الحظ كيف قمنا بتصفير القيم، واعطاء هامش : (شاهد المثال


.. ^_^ أيضا من المالحظات الجميلة على هذا الموضوع *^_!!! ماذا سيحدث لو قمنا بمدج الطريقة األولى والثانية معا ؟

: شاهد الشكل التاليإن أول ما نفكر به عند رؤيتنا لهذا

لكن في * .. _* Errorالشكل هو فهذا لن.. خوارزميتنا الرائعة هذه

^_^يحدث

ه��و عملي��ة دم��ج ب��ين الط��ريقتين، بحي��ث يك��ون الح��د .. ^_^وال��ذي س��يحدث فع��ال 100pxهو ) أو أقل حجم(، والحجم اإلفتراضي 4األعلى لعدد األعمدة هو

تابع


* ..^_، ماذا تتوقع أن تكون النتيجة ^_^وبنائا على ما تحدثنا به اآلن )جميعها مهمة وبها فكرة–ال تنسى مشاهدة النتائج : (_^ *شاهد النتيجة


)96–95(سورة النساء


وهي ال ^_^ نتابع موضونا أيضا وبجزئة جميلة جدا ..واآلن Column Gaps and Rules

ب�ين األعم�دة، ه�ذا ال Gapلقد تحدثنا في إحدى الشرائح السابقة ع�ن وج�ود Gap 1حجمه اإلفتراضي هوem ).. بكسل 16أي (

الى المساحة الت�ي أحتاجه�ا، 1emاآلن يمكنني تغيير حجم هذه المساحة من * .._* 1emوال يمكن أن تكون المساحة التي يتم وضعها أقل من

: الصيغة العامة هي


*) ^_الحظ المسافة بين األعمدة : (شاهد المثال


نكون انتهينا م�ن الش�ق األول م�ن ..اآلن بعدما شاهدنا هذه الخاصية الجميلة ^_^ Rules، وهناك شق آخر وهو ال ^^العنوان فقط

هي خاصية تتيح لنا انشاء خط فاصل بين األعمدة column-ruleال ، لكن هذه الخاصية تستخدم مع)من حيث المبدء borderشبيهة بال (

ألنك إن كنت تذكر،* .. ^_ borderاألعمدة، وال يمكننا هنا استخدام ال فهذه األعمدة تنشىء من قبل الخوارزمية الذكية، وتنظم المحتوى بنائا على

^_^ column-ruleشاهد الصيغة العامة لل ..^_^ حساباتها الحظ أن الصيغة الخاصة بها تشبه

، ومكنني اختصارها borderال ^^بسطر واحد فقط


: مثالالحظ أنني قمت باستخدام اإلختصار

، وال تنسى المتصفحات األخرى *^_


سنتحدث بإذن هللا تعالى عن موضوع مهم وآخر موضوع في هذه..وأخيرا Containing Elements within Columnsالجزئية وهو

سنتحدث عن جزئية مهمة جدا، وهي مبدأ اإلحتواء، ولكي يصل..اآلن هل الحظت أمرا في كل..المراد من هذه الكلمة، أريد أن أسألك سؤاالاألمثلة التي تطرقنا اليه في هذا الموضوع ؟

! هناك أمر مشترك في جميع هذه األمثلة

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

واآلن وقبل البدأ لنرى كيف ستظهر.. متصفح بطريقة مختلفة عن اآلخر ..بالشكل اإلفتراضي columnالصورة إن قمنا بوضعها داخل


قام بعرض الصورة فوق النص، أما FireFoxكما تالحظ، فإن متصفح ال ، طبعا ما ينطبق على الصور..للصورة cropفقام بعمل Chromeال

.. مثال headersاألخرى مثل ال htmlممكن أن ينطبق على عناصر ال راع هذه اإلحتماالت css3في ال moduleلذلك من قام بتطوير هذا ال

، لكن األمر المحزن أن الحلول المقدمة ليست مدعومة بعد من أغلب ^_^لذلك سنقوم بذكرها لكي يبقى ذلك في مخيلتك حتى يتم.. المتصفحات

column-spanمثل خاصية ..اعتمادها رسميا في المتصفحات الرئيسية

هي خاصية تحدد الحجم الذي يجب العنصر column-spanخاصية ال أخذه أو حجز مساحته، في الحالة اإلفتراضية العنصر يعرض في صف

...لكن هذا الخيار يمكن تعديله بواسطة هذه الخاصية الرائعة .. واحد فقط


:الصيغة العامةتعني اعرض العنصر على جميع allهي القيمة اإلفتراضية، و 1القيمة

.. األعمدةلم تكن مدعومة 2015-4-1هذه الخاصية حتى تاريخ كتابة هذه الشرائح

ل��ذلك اذا أردت مش��اهدة أو تجرب��ة ه��ذه الخاص��ية يج��ب .. FireFoxم��ن ال -webkit–مع خاصية ال +Chrome 4.0عليك استخدام ال

كما أنها غير داعمة لجميع العناصر، لذلك سنقوم بتجربة الخاصية مع ال H1 tag _^*


بعد مشاهدتك للخاصية السابقة، هناك أيضا خصائص.. واآلن صديقي ,break-after, break-beforeأخرى مثل and break-inside

يمكنك البحث عنها واإلطالع عليها ألنها ليست مدعومة حتى تاريخ كتابة، فهي من الخصائص التي اضفيت الى*_*هذه الكلمات

*.^_ moduleهذا ال

واآلن قد تتسائل يا صديقي، لماذا قمنا بطرح هذا الموضوع وذكرنا احدىالخصائص، وتطرقنا كذلك لذكر لمجموعة خصائص أخرى، علما أن هذه

الخصائص غير مدعومة، واإلجابة بكل بساطة، هي أن هذا العلم يتطور بشكلسريع، والخصائص الغير مدعومة اليوم، سيتم دعمها غدا، وهي خصائص لم

لذلك يجب عليك.. توضع لمجرد التسلية، بل لها وظيفة رائعة ومهمة ستقوم بها أن تعلم عنها أو بوجودها على أقل تقدير، أو المشاكل التي يمكنك حلها من خالل

*^_...استخدام تلك الخصائص


زهير بن أبي سلمى

Background Image And Decorative Properties


هذا الموضوع قد يكون من أجمل المواضيع التي أضفيت الى خصائص backgroundتنسيق صفحات الويب، وإن سألت عن السبب وأنت تقول ال

Image هي خاصية متواجدة منذ الcss فسأقول لك نعم، لكن في الcss3

أصبحت هناك مزية رائعة جدا، وتستخدم إلعطاء المصمم أو المطورة قدرة رائعة على التحكم بالتصميم، وهي إمكانية اضافة أكثر من

background-image ) أي أكثر من صورة كخلفية لنفس العنصر^_^(وهذه المزية لم تكن متوفرة من قبل، والمزية الثانية والخطيرة جدا، وهي

وبكل سهولة css3امكانية التحكم بحجم الخلفية وذلك عن طريق شيفرة ال ، وبإمكاننا القول أن هاتان المزيتان هما^_^... وبشكل منسجم مع التنسيق

يمكنك اإلطالع على المزيد من هناأجمل ما أضيف تحت هذا الموضوع و

http://www.w3.org/TR/css3-background�



واآلن أول جزئية في هذا الموضوع وهي ال Multiple Background Images ^_^

أوال ما أحب إخبارك به، هو أن هذه المزية الجديدة في الmodule Backgrounds and Borders هي ليست خاصية جديدة، وإنما

وخصائصها موجودة من backgroundمزية، فكما نعلم، فإن خاصية ال لكن المزية التي اضيفت بالسماح لوضع أكثر من صورة هي css3قبل ال

الجديدة، وبكل تأكيد ترافق مع السماح بتعدد الخلفيات الى تعدد أيضا\.. posوال repeatمثل ال ^_^ ..الخصائص التي ترتبط بكل خاصية

*^_واآلن لنشاهد الصيغة العامة ومثاال عليها



:الصيغة العامةكما تالحظ من الصيغة العامة، فإن المهم هنا أن القيم المتعددة يفصل بينها

: 1مثال... فاصلةالحظ كيف تم وضع صورتين كخلفية وتم الفصل بينهم بفواصل، كما أنه تم تحدي��د موق��ع ك��ل ص��ورة بنائ��ا عل��ى الترتي��ب الت��ي وض��عت ب��ه الص��ور،

وهك��ذا، كم��ا أن��ه يمكنن��ا .. 2nees.pngموق��ع الص��ورة % %85 95استخدام خاصية واحدة لكل الخلفيات وذلك عن طريق وضع قيمة واح�دة

... no-repeatفقط مثل



: شاهد المثال* ^_أيضا يمكننا استخدام الطريقة المختصرة : 2مثال



فإنه اإلصدارات css3بما أن هذه الخاصية من خصائص ال : مالحظةلذلك..ال تدعم هذه الخاصية -IE9القديمة من المتصفحات الرئيسية أو ال

يجب عليك ضمان أن تظهر صورة واحدة أو خلفية واحدة على األقل، لذلك.. نقوم بكتابة الصيغة التقليدية قبل اضافة الميزة الجديدة

: شاهد المثالالغير داعمة لهذه الخاصية، فإنها ستقوم ب�اختزال IEبالنسبة لمتصفح ال *)

التعدد في صورة واحدة، أم�ا المتص�فحات األخ�رى الغي�ر داعم�ة فس�تقوم ، ه��ذا ف��ي حال��ة اس��تخدام )وض��ع خلفي��ة واح��دة فق��ط(بتنفي��ذ الس��طر األول

*-backgroundالطريقة المختصرة، لكن اذا استخدمت الطريقة الطويلة اييه..لذلك وجب التنويه .. لن يقوم بإظهار أي صورة IEفإن ال

^_^شاهد الشريحة التالية



هذا الشكل هو الذي يجب عليك كتابة شيفرتك البرمجي�ة ب�ه، فف�ي ح�ال دع�م المتصفحات لمزية التعدد س�يتم التنفي�ذ ب�دون أي مش�اكل، واال س�يتم تنفي�ذ

...الخاصية لوضع صورة واحد فقط

ش�اهد .. IEطبعا هذا الكالم كما ذكرن�ا بالش�ريحة الس�ابقة ال ينطب�ق عل�ى ال ... IEالشريحة التالية لترى كيف ستعرض النتائج على ال



: شاهد المثال


دعاء



اآلن، وبعد حديثنا الجميع عن استخدام أكثر من صورة كخلفية ننتقل الىالمزية الثانية والرائعة وهي مزية ال التحكم بحجم الخلفية والتي تسمى ب

Background Size ^_^

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

...التغييرالتي يمكنني اتباعها : الصيغة العامة



أقص��د به��ا كلم��ات مث��ل valueف��ي الص��يغة العام��ة قم��ت بوض��ع ش��كلين، ال cover, contain ... لذلك قمت بوضعها على شكلvalue

أو %10أو autoأما السطر الث�اني فه�و يمث�ل الش�كل ب�القيم أو األرق�ام مث�ل 50px .. وهكذا

* ..^_طبعا هذا فقط للتوضيح : ^_^..شاهد مثاال على الصيغة العامة



: ^_^ sizeاآلن لنقوم بذكر وشرح القيم والحاالت الخاصة بال .وهو عرض الصورة: widthال 1).ارتفاع الصورة: heightال 2)وال width = 15%فهذا يعني أن ال % 15اذا جائت قيمة واحدة مثل 3)

height = 15% أيضا.heigh =autoوال widthلوح�دها فه�ذا يعن�ي أن ال autoاذا جائ�ت 4)

background-sizeوهي الحالة اإلفتراضية لل فإن الخلفي�ة سيص�بح حجمه�ا auto 50pxمع قيمة مثل autoاذا جائت 5)

حجمه بشكل تلقائي ص�غيرا بم�ا widthبكسل ارتفاعا، ويصبح ال 50^_^..يتناسب مع اإلرتفاع



(6Cover وتعن��ي اجع��ل حج��م الخلفي��ة يبق��ى أكب��ر م��ا يمك��ن بنائ��ا عل��ىويمك��ن ف��ي بع��ض .. المس��احة المعط��اة له��ا ويس��مح ل��ه بتج��اوز حجمه��ا

ه�ذه .. ( posالحاالت أن تختف�ي اج�زاء م�ن الص�ورة ف�ي حال�ة وج�ودة الس��مة نس��تخدمها كثي��را وخصوص��ا ف��ي التالع��ب البص��ري أثن��اء ال

parallax scrolling ((7Contain : وتعن��ي اجع��ل حج��م الخلفي��ة يبق��ى أكب��ر م��ا يمك��ن بنائ��ا عل��ى

وهذا يعني ل�و ... المساحة المعطاة لها دون أن يسمح للخلفية بتجاوزها وك��ان حج��م الح��اوي للخلفي��ة 1366* 640أن حج��م الص��ورة

ف��إن حج��م الص��ورة س��يتوقف عن��دما يص��بح ارتفاعه��ا 1000* 300 .. heightبنائ��ا عل��ى ال widthل��ل resizeوم��ن ث��م يق��وم بعم��ل 300

): وانتبه لكل مثال(واآلن لنشاهد مجموعة من األمثلة المتنوعة



)background-size _^) *1واآلن لنرى أمثلة على استخدام ال



به��ذا نك��ون انتهين��ا م��ن ه��ذه الجزئي��ة أيض��ا ب��إذن هللا تع��الى، وس��ننطلق ال��ى جزئية جديدة بنفس الموضوع، لكن قب�ل ذل�ك، أرج�وا أن تك�ون ق�د نف�ذت

.. جميع األمثلة السابقة، فهي أمثلة مهمة لفهم كل تطبيق

: واآلن يمكنك رؤية النتائج والشيفرة البرمجية من هنا


حديث شريف



واآلن بعد حديثنا الممتع عن المزيتان السابقتين، لنأخذ بعض اإلضافات^_^ css3الزخرفية الجديدة في عالم التنسيق والتي ترادفت مع ظهور ال

^_^ Background Clip and Originوالموضوع هو

بنائا relativeكان موقع الخلفية يحدد بشكل cssفي اإلصدار الثاني من ال قامت بتقديم css3لكن في ال .. paddingعلى العنصر الحاوي ووجود ال

خاصيتين جديدتين للتحكم بموقع الصورة ونقطة البدأ، واإلعتبارات... وغيرها من الخصائص borderوال paddingالمحيطة مثل ال



الخاصية األولى التي سنتحدث عنها في هذه الجزئية هي ال background-clipومن خالل هذه الخاصية وقيمها يمكننا تحديد الجزء ،

الذي سيسمح للخلفية بالوصول اليه كحد أقصى، وذلك بنائا على ال Box-model .. شاهد الbox-model ثم انتقل للشريحة التالية :



،contentثم paddingثم borderثم marginكما تالحظ فإن التسلسل هو تبدأ من ال) لون أو صورة(الخلفية فإن css3في الحالة اإلفتراضية في ال

Border ) يعني الpadding والcontent والborder سيتم شملهم بالخلفية (،واآلن، لنشاهد.. border-boxوهذه القيمة تسمى ب

: background-clipالصيغة اإلفتراضية لخاصية

وهو contentوال paddingوال borderيشمل ال : border-boxال .الحالة اإلفتراضية

.contentوال paddingيشمل ال : paddingال )box-modelكل هذه حسب ال .. (فقط contentيشمل ال : contentال



) 1مثال



) 2مثال



) 3مثال



^_^ background-originأما الخاصية الثانية في هذه الجزئية فهي ال من خالل هذه الخاصية يمكنني التحكم بشكل أكبر في الموقع الذي أرغب

والصيغة العامة والقيم مشابه للخاصية).. الصورة(بدء الحساب به للخلفية ! السابقة ؟

: شاهد الصيغة العامة

...padding-boxلكن القيمة اإلفتراضية هنا هي ال !!!!!ما الفرق بين الخاصيتين ؟! ..لكن السؤال المهم اآلن ؟

الجواب سيكون بعد استعراض تطبيق لألمثلة على هذه الخاصية ثم)انتبه جيدا لألمثلة، والفروقات* (^_.. المقارنة بإذن هللا تعالى



: 1مثال



: 2مثال



: 3مثال



إذن أرجوا منك اآلن.. واآلن يا صديقي هل أمعنت النظر الى األمثلة مرة أخرى وتلقي نظرة من جديد background-clipالذهاب الى أمثلة ال

*.^_ثم عد الى هنا

يقوم على اإلهتمام بنقطة البدء للخلفية، originالفرق الجوهري هو أن ال ..وبنائ��ا عل��ى ذل��ك يق��وم بوض��ع نقط��ة الب��دء ويكم��ل

يهتم بنقطة النهاية مع مراعاة أنه يقوم بعمل اقتطاع للصورة clipبينما ال ...اذا كانت أكبر من النطاق

اآلن لنستعرض الفروقات بمثال سريع يوضح الفكرة، صورة بالف كلمة:P


عن الصدق

Border And Box [email protected] دورة مجانية(أنيس حكمت أبو حميد (

، لم يكن هناك تغييرات كثيرة على موضوع الcss1منذ إصدار ال Bordersألن الفكرة التي وجد من أجلها نفذت ولم يكن يحتاج المطورين ،

ألكثر من ذلك، لكن في السنوات األخيرة، أصبحت هناك حاجة لتطويرهذه الخاصية، فتنسيق صفحات الويب أصبح أكثر إحترافية، ورغبة

الزبائن أصبحت أكثر الحاحا في طلب التفاصيل، ومع ذلك عندما تشاهد.. بعض األفكار البسيطة تكتشف أنها ستحتاج الى عمل برمجي معقد فعال

بتواكب متطلبات العصر CSS3لذلك تم اضافة خصائص جديدة الى ال الخ... cornerوال shadowوبشكل سهل، منها ال

^_^واآلن لنبدأ على بركة هللا تعالى


Border radius: أوالفكنا نقوم بانشاء صورة curveكنا إذا أردنا صنع css3قبل إصدار ال

مثال، ونستخدم هذه الصورة في الموقع، لكن photoshopباستخدام ال بحيث يجب أن يكون هناك وسيلة سهلة.. flexالمواقع الجديدة أصبحت

للتجاوب، فال أستطيع القيام بهذا العمل لكل صورة على حدا في الموقعفقط بخاصية ال css3لذلك في ال .. حتى أحافظ على النسق

border-radius سينتهي كل األمر وبشكل أجمل وأكثر احترافية*_...*

: الصيغة العامة


– top(أي ) تحت–فوق (ترمز اإلتجاه العامودي : vال bottom.(– left(أي ) يسار–يمين (ترمز الى اإلتجاه األفقي : hال right.(

فهما الطول اللزام لعملية القطع والذي يعتمد لحساب ال yو ال xأما ال curve .. باإلضافة الى أنه يمكنك مباشرة تحديد الcurve لإلتجاهات

وكما يمكنك استخدام أو وضع قيمة واحدة لل border-radiusاألربعة مثل x والy _^ ... *

^_^واآلن لنشاهد معا أمثلة متنوعة على الموضوع

من حجم العنصر% 50هو radiusأكبر حجم يمكن أن يكون لل : مالحظة


: 1مثال


: 2مثال


Border Image:ثانيا

من الخصائص الجديدة أيضا، والتي تمكننا من استخدام صورة كإطار بدال^_^واضحة وسهلة... Border Imageمن الشكل التقليدي، هي خاصية ال

: الصيغة العامة.هو رابط الصورة المراد وضعها كإطار لعنصر معين sourceال يعني marginأو borderمثل ال (هي قيمة أو مجموعة من القيم sliceال

)ممكن أن نضع رقم واحد أو رقمين أو ثالثة أو أربعة حسب المراد.ووظيفتها هو تحديد البعد أو المسافة لكل زاوية من زوايا اإلطار

وهي التي تستخدم لتكرار الصورة، وهنا يمكن وضع قيمة أخرى repeatال ..وتعني اجعل الصورة تساوي حجم اإلطار stretchوهي القيمة اإلفتراضية


ثم إنتقل : شاهد المثال *: ^_للشريحة التالية


اذا أمعنت النظر في المثال السابق ستجد اإلطار بأشكال متعددة، هذا، ويمكنني صناعة^_^اإلطار عبارة عن صورة، وصورة واحدة فقط

قمت بأخذ الصورة من موقع..(المزيد من األشكال بنائا على هذه الصورة w3schools.. ( هو لماذا اختلف الشكل بوجود ال..لكن ما أريد شرحه اآلن

slice أما ال .. حتى تتضح الفكرةwidth فقمت باستخدمها لجعل اإلطار..^_^أكبر حجما

وبهذا فإن.. topهي ال 32الحظ أن ال كل رقم منهم يمثل مسافة بين اإلطار

فقط هذا األمر طبق المثل*..^_والجهة المختارة *^_وشاهد النتائج بنفسك لتتضح الفكرة


*^_..واآلن سأكلفك بوظيفة بسيطة جدا

والتي يمكننا border-imageهذا الشكل يمثل جميع خصائص ال العدد األقصى للقيم التي يمكن commentاستخدامها، ويوضع بال

وهناك بعض المزايا..طبعا هنا لم نستخدم الطريقة المختصرة.. (استخدامها &_&قم بالبحث عن المزايا التي ال تعرفها ثم طبق هذا المثال .. الجديدة


: _$*مالحظات مهمة قبل المتابعة

ظه�رت مش�كلة عن�د التح�ديثات وه�ي firefoxفي بعض اص�دارات ال 1)ف��ي التنس��يق عل��ى متص��فحات ال border-imageع��دم ظه��ور ال

firefox وك��ان ح��ل ه��ذه المش��كلة باس��تخدام الborder-style: solid; border-imageم��ع خاص��ية ال

dashedأو dottedل curveعن��دما يق��وم بص��ناعة firefoxأيض��ا ال 2)مس�جلة bugوه�ذه .. ف�ي بع�ض المن�اطف solidفإنه يقوم بتحويله الى

.^_^ولم تعالج حتى تاريخ كتابة هذه الكلمات firefoxفي ال


^^ box-shadowوهي خاصية ال ^_^ ثالثا وآخر جزئية بهذا الموضوع عندما تحدثنا سابقا عن النصوص وخصائصها، ذكرنا خاصية جميلة جدا

واآلن على غرار هذه الخاصية،.. text-shadowوقتها، وهي خاصية ال هذه الخاصية تقوم على, box-shadowخاصية ال css3ويجد لدينا بال

) .box-element(^_^ اعطاء ظل على مستوى عنصر معين


وم�ع ذل�ك لنش�رح * _* text-shadowاذا الحظت فهي شبيه بخصائص ال *^_الخصائص من جديد ونوضح اإلختالفات في الشريحة التالية


(1inset : وهو كلمة اختيارية لتحديد على الظل سيكون خ�ارج الbox أم)وهي الحالة اإلفتراضية outsetأو insetالقيم إما .(boxداخل ال

(2Horizontal &vertical وهما القيمتان التان تح�ددان المس�افة ب�ين الbox والظل_^.*

(3Blur : وهي الخاصية المسؤولة عن مقدار التشتت أو الضبابية للظل..(4spread : وه��ي كزي��ة تس��مح بتغي��ر حج��م الظ��ل، كم��ا أن الق��يم الس��البة

*.^_مسموحة هنا، وتعني أصغر حجما من الحجم األصلي للظل (5Color : وهي خاصية تحديد لون الظل، هذه الخاصية الزامية في ال–

webkit- واختياري��ة ف��ي الfirefox ويك��ون اإلفتراض��ي أس��ود، لك��ن*^_أنت دائما قم بتحديد اللون لتعمل على جميع المتصفحات


)التاليةالشيفرة البرمجية في الشريحة (واآلن لنشاهد مثاال على هذه الخاصية


:وهذه هي الشيفرة البرمجيةال تنسى أن التطبيق هو.. (واآلن شاهد المثال، وقم بالتجربة العملية بنفسك

)المهم


سيد قطب رحمه هللا

Color And [email protected] دورة مجانية(أنيس حكمت أبو حميد (

إن األلوان بحد ذاتها، بحر من العلم يصعب حصره، ففيه من الجمالواإلبداع والرونق ما يعطي جماال لكل مخلوق بهذه الحياة والحمد ل،

وبعالمنا عالم الويب، فإن تناسق األلوان ودقتها لها األثر الكبير في جذبالمستخدمين، وكم يشعر المستخدم بالراحة أثناء نظره الى موقع، كم أنت

ألي عنصر قد تلعب دورا opacityمبدع، باإلضافة الى األلوان فإن ال الخاص animationجماليا للموقع، كما تعلب دورا مهما اآلن في عالم

، لهذا سنتطرق بهذا الفصل بإذن هللا تعالى الى موضوعين*^_بالويب : وهما

... opacityاأللوان وال


Opacityال : أوال

تمكننا هذه الخاصية الرائعة من التحكم بمقدار ظهور عنصر معين علىبحيث يكون عند 1وال 0شاشة العرض، وتكون القيم الخاصة به بين

^_^ 1غير مرئي ويزداد ظهورا كلما اقتربنا من ال 0النقطة


*^_ 1.0وال 0.0هو أي رقم بين : numberال


.. الحظ نتائج تطبيق هذا المثال : 1مثال نسبة الوضوح لهم 0.1المربع األول والرابع

والحظ أنه .. لذلك تجد أنها شبه معدومة الرؤية ، فإن المربع يصبح أوضح 1كلما اقرب العدد من

^_^ تدريجيا


الحظ هذا المثال الجميل، وانظر كيف أنني قمت بوضع خلفية: 2مثال ظهرت وكأنها توقيع رقمي على opacityوفقها خلفية، وبوجود ال

..^_^ إدمج دائما تعلمناه مع ما سنتعلمه بإذن هللا * ..^_.. الصورة لكن هنا في مالحظة أريدك أن تبقيها بذهتك هو أن هذه الخاصية تؤثر على

.. لذلك النص أيضا لن يكون شديد الوضوح .. جميع ما بداخلها


ممم، ستقول اذا النص كان ال يقرأ فماذا سنستفيد، والجواب هو، الخاصية هذه لها استخدامتها، وليس بالضرورة في كل األوقات أن يكون النص

فقد ينتج هذا عن طريق حدث معين أو.. مباشرة % 100ظاهرا بنسبة animation وهكذا ..معين..

منها..^_^بعدة طرق ) جدال(كما أنه يمكننا التحايل على هذه المشكلة أو وضع النص في حاوي ومن ثم وضع الخلفية في positionاستخدام ال

حاوي بداخله واعطاء هذا الحاوي الداخلي المخصص للخلفية الopacity .. واذا كانت الخلفية لون يمكن استخدام الrgba أو استخدام

صورة مفرغة وغيرها الكثير من الطرق التي يصعب احصائها ولكل منها^_^: واآلن شاهد المثال...^_^حالة يأتي زمان علينا لنقوم باستخدامها


فإن نظام css2بالإلضافة لما هو موجود بال css3في ال ..ثانيا األلوان وهي مقياس لمدى Alphaال ) استحداث(األلوان تطور بسبب استخدام

ونستخدم ال opacityوبهذا نحن سنستغني عن ال .. شفافية لون معين Alpha color .. هل اإلسغناء كامل ؟..لكن السؤال اآلن

الجواب طبعا ال، ألن هذه الخاصية سنستخدمها مع األلوان فقط، أما الopacity وستتضح.. لذلك انتبه أن تخلط ..فهي تستخدم على نطاق حاوي

..الموضوع سهل جدا..األمور مع األمثلة بإذن هللا تعالى

!؟ rgbaاآلن هل تذكر بالشريحة السابقة قلنا عن ال !؟ rgbaفي aلكن ما هذه ال ... نعرفها rgb(red, green, blue)ال


والتي من خاللها نستطيع تحديد نسبة alphaهي اختصار ل aهذه ال 1الى 0، ويجب أن تكون القيم الخاصة بها من ^_^الوضوح للون معين

^_^..


: مثال على القيم


هذا المثال يوضح الفكرة، لكن أثناء تطبيقي للمثال، خطرت ببالي: 1مثال شاهد المثال ونسبة الوضوح،.. فكرة لم يكن بخاطري الحديث عنها

والحظ أنه في حال أعطيت لون باستخدام ال alphaالخط خاصية

Rgba فإن الborder يتأثر أيضابنفس المعيار، اال اذا قمت بتحديد

… borderاللون لل


هذا المثال يقارن بين استخدام ال : 2مثال Opacity واستخدام الrgba ^_^


هذا المثال يوضح كيف يمكن دمج ما تعلمناه سابقا واستخدام: 3مثال طبعا سأترك لك المثال بدون تطبيق.. ^_^ rgbaخاصية اللون الجديدة

^_^لتقوم أنت بتنفيذه

): P:من غير هذا المثال (واآلن لنشاهد تطبيق األمثلة السابقة


..^_^مالحظة قبل مغادرة هذا الفصل

هذه الخاصية تقوم appearanceتدعى ب css3هناك خاصية جديدة بال على اعطاء عنصر معين تنسيق الشكل اإلفتراضي لعنصر ما كما يقرأ من

operaوال IEطبعا هذه الخاصية غير مدعومة من ال .. عند المتصفح mini ... وتعم��ل عل��ى المتص��فحات الرئيس��ية م��ع–webkit- وال–moz-



سيد قطب رحمه هللا


هي انتقال تدريجي بين مجموعة من cssتعني التدرج، وبال Gradientال : ويمكن تصنيفهما الى نوعين) على األقل لونين إثنين (األلوان

(1Liner Gradient : ،ويقصد به التدرج الذي يتك�ون ب�ين نقطت�ين اثنت�ينويكون مستوى التدرج مختلفا إعتمادا على المسافة بين النقطتين بحيث

.. يبق��ى الت��درج متناس��با عل��ى ط��ول الخ��ط ال��ذي ت��م تش��كليه

(2Radial Gradients : وه��و يمث��ل ت��درج عل��ى ب��ين ل��ونين إعتم��ادا عل��ىنقط��ة تمث��ل المرك��ز له��ذا الت��درج، وبأبس��ط ص��وره، يك��ون ه��ذا الت��درج

ويس��مى أيض��ا ه��ذا الن��وع بالت��درج ..عل��ى ش��كل دائ��ري أو بيض��وي .. P:الشعاشي


في هذه الخاصية يجب عليك مراعاة المتصفحات التي تدعم هذه: مالحظة: شاهد الجدول قبل البدء..الخاصية باإلضافة الى طريقة دعمها

*^_ 2015-04-05في تاريخ w3schoolsهذه الصورة أخذت من موقع وسأعتمد بالشرح األسلوب الخاص بهم أيضا لهذا الموضوع فهو سهل

^_^


^_^ لنبدأ بالحديث عن أول نوع وهو التدرج الخطي ..واآلن )Liner Gradient :( يمكن تحديد اإلتجاه للتدرج لهذا النوع بأحد اآلتي

down/up/left/right/diagonally _^*


.. هو اإلتجاه الذي سيسر به التدرج directionال ..هو اللون األول color-stop1ال ... هو اللون الثاني color-stop2ال

^_^ويمكنك اضافة أكثر من ذلك ..وهما أقل عدد من األلوان ممكن


الحظ المثال، لم يتم هنا تحديد اإلتجاه، والسبب أن اإلتجاه: 1مثال Top to Bottomاإلفتراضي هو من

: الناتج


الحظ جيدا هذا المثال، في هذا المثال نريد أن نبدأ التدرج من: 2مثال : اليسار، لكن هناك مالحظات مهمة وهي

leftخصوصا فإنه يتم تحديد البداية ب safariونستخدمه لل webkitال ) أ

بينما يتم تحديد المتصفحات األخرى أو الطريقة القياسية -حسب هذا المثال-من اليسار اذن اإلتجاه سيكون...( rightفتكون ..بالنقطة التي سنذهب لها

)لليمين).right to..(toأيضا فإن الصيغة القياسية يضاف له ) ب


في هذا المثال سنستعرض كيف يمكننا التدرج بين نقطتان تمثالن: 3مثال وكما انطبق على) ..عامودي(والمحور الصادي ) أفقي(المحور السيني

*..^_ bottomعكسها top..المثال السابق ينطبق هنا وهذا) top left(هذا المثال سيكون إلستعراض التدرج من أعلى اليسار

*^_ webkitللمتصفحات ما عدى ال ) Bottom right(يعني


، وتكون هذه)angle(هنا في هذا المثال سنقوم بوضع الزاوية: 4مثال وبهذا تتشكل لنا* ^_الزاوية بين نقطتين، الخط األفقي مع خد التدرج

وال bottom to topتمثل ال 0degزاوية، ولتبسيط األمر فإن الزاية 90deg تمثل الleft to right 180والdeg تمثلtop to bottom وال90deg تمثل الright to left ^_^..ومشاهدة المثال خير من الف كلمة

^___^ :


،^_^واآلن لنشاهد مثاال على كيفية انشاء تدرج بأكثر من لون : 5مثالوالطريقة بكل بساطة تكون عن طريق اضافة فاصلة ومن ثم لون جديد،

* ^_أو صيغ اللون المختلفة كقيم ...مثال rgbaويمكن طبعا استخدام ال


،*^_اآلن ما رأيك بأن نتالعب بالخصائص التي تعلمناها معا : 6مثال لنقوم اآلن بعمل تدرج، لكن هذا التدرج سيكون لنفس اللون من الدرجة

rgbaطبعا في هذا المثال سنقوم باستخدام ال * ..^_الفاتحة الى األغمق ، وكما تالحظ فإن الشفافية1–0حتى نحصل على مقدار وضوح بين

^_^تتدرج من اللون األبيض الى اللون المطلوب


الحظ في هذا المثال التدرج ألكثر من لون، وبالتحكم أيضا بمقدار: 7مثال *^_الوضوح الخاص بكل لون أثناء التدرج


اآلن، وآخر مثال ونقطة للجزء األول من هذه الخاصية وهو: 8مثال !التكرار، هل خطر ببالك أن تقوم بتكرار التدرج عند نقطة معينة ؟

أي repeating-linear-gradientطبعا يمكنك فعل ذلك باستخدام األمر : شاهد المثال* ^_.. linear-gradientقبل ال repeatingبإضافة كلمة


: ثم انتقل الى الشريحة التالية* ^_شاهد نتائج تطبيق األمثلة وغيرها


اآلن وقبل أن تذهب لمشاهدة الشيفرة البرمجية لألمثلة السابقة واألمثلة التيأريد أن أخبرك بأمر جميل، يمكنك من خالل بعض مواقع.. لم نذكرها

اإلنترنت انشاء التدرج الذي تريده بشكل سهل، كل ما عليك القيام به هوالتحكم بالواجهات التي أمامك، لكن هذا الشرح مهم جدا، ولم نعتمد على

هذه األداة في الشرح، وذلك لسببان، األول كيف يمكنك أن تستخدم شيفرةبرمجية ال تستطيع التعديل عليها أو معرفة القيم واإلحتماالت الممكنة أو

الصيغة الخاصة بها، والثاني هو لتوضيح أنه يمكنك بناء التدرج الذيتريده فقط بمعرفتك هذه األمور وبالتطوير من مهاراتك مع قليل من التأمل

فقد تحتاج في المستقبل وإن استخدمت األدوات الموجودة الى تعديل، قد.. ال تستطيع صنعه مع هذه األدوات، وهذا قد يحصل في كثير من المشاريع

لذلك وجب النتبيه، واآلن من هنا يمكنك مشاهدة احدى المواقع ومشاهدة المثال..

http://www.cssmatic.com/gradient-generator�

http://www.colorzilla.com/gradient-editor/�


الدؤلي


Radial Gradientsواآلن سنتحدث بإذن هللا تعالى عن النوع الثاني وهو

: لنشاهد أوال الصيغة العامة

*^_.. linerبدال من ال radial-gradientالحظ هنا أنني أستخدم ال الحالة (هو الشكل الذي سيستخدم لتركيز التدرج هل هو بيضوي shapeال

).circle(أم دائري ) ellipseاإلفتراضية كلمات 4هو الحجم الخاص بالتدرج ويمكن أن تستخدم مع sizeال

....، closest-side ،farthest-side ،closest-cornerمحجوزة وهي


farthest-corner وهي الخاصية اإلفتراضية للحجم...هي الموقع الذي سيحتوي نقطة المركز الخاصة بالتدرج، at positionال

*^_.. centerوبالحالة اإلفتراضية هي أي اللون األقرب لنقطة المركز، وكلما.. (هو أول للون start colorال

: 1شاهد المثال * ^_..ابتعد اللون بالترتيب، ابتعد اللون عن مركز التدرج

*^_لنشاهد المزيد ..هذا الشكل القياسي لهذا النوع من التدرج


وذلك عن) لون(يمكننا التالعب باألبعاد الخاص بكل اشعاع : 2مثال * ^_طريق اعطاء قيمة بعد اللون


واآلن لنقم بتغيير الشكل اإلفتراضي من البيضوي الى الشكل: 3مثال *: ^_الدائري


واآلن شاهد كيف يمكننا التالعب بالموقع والحجم الخاص بهذا: 4مثال *..^_النوع من التدرج


: نتيجة المثال: 4مثال


،*^_واآلن آخر جزئية بهذا الموضوع وهي الخاصة بالتكرار : 5مثال سنقوم بإضافتها هنا وذلك أيضا lienrوكما أضفنا خاصية التكرار على

*...^_ repeating-radial-gradientوبكل بساطة من خالل *: ^_واألخير بإذن هللا تعالى لهذا الموضوع 5لنشاهد المثال ال


،^_^واآلن بحمد هللا تعالى، نكون انتهينا من هذا الفصل والجزء المثير واآلن لننطلق لموضوع أكثر تشويقا وإثارة من هذا الفصل، الفصل الذي

يحبه المصمين والمطورين واألشخاص الذي سيقومون باإلطالع على، سأخبرك به^_^، إن أثار فضولك ما هو هذا الموضوع ^_^..موقعك

بإذن هللا تعالى بعد أن تطلع على األمثلة التي ذكرنها مع الشيفرة البرمجية،*...^_وانظر الى األمثلة التي نذكرها ونتائجها


متفق عليه

2D [email protected] دورة مجانية(أنيس حكمت أبو حميد (

يمثل مجموعة من الخطوط HTML، كان ال ^_^في عصر الويب القديم blockالعامودية واألفقية، والتي تشكل مساحات معينة وتحجزها على شكل

وكان األسلوب الذي يمكن أن نخرج عن هذا النمط أو باألحرى.. boxesأو نحسن أو نلعب بترتيب هذا الشكل عن طريق استخدام الصور، لكن هذاالكالم لم يعد كافيا أيضا، نحتاج الى ميزات جديدة تمكننا من التعامل مع

أطلقت 2008، فنذ عام ^_^المختلفة، وفعال ذلك ما كان blocksهذه ال موديول جديد يسمح باستخدام ميزات جديدة ورائعة مثل webkitال

rotate والresized ..الخ، وهذه الخصائص هي ما سنتحدث عنه بإذن هللا..تعالى في هذا الفصل

*^_فهي تعني تغيير الهيئة من شكل الى آخر Transformationsبالنسبة 8IEباستثناء ال * ^_هذه الخاصية مدعومة جميع المتصفحات الرئيسية .. أيضا


لنبدأ على بركة هللا تعالى بهذا الموضوع الجديد، والذي يعد من..واآلن طلعت كل الخصائص( ^_^ أجمل اإلضافات الجديدة على عالم الويب

) P:أجمل من بعض

و/ تمكنك من عمل تغيير على حجم العنصر أو Transformationsال وإما 3Dوطبعا هناك نوعان من هذا التأثر إما ..(و موقعه / تغير شكله أو

2D 2والذي سنتحدث عنه اآلن هوD.(



الخاصة بالمتصفحات تم vendorكما تالحظ من الصيغة العامة، فإن ال تختلف vendorالخ، هذه ال ... oوال msوال webkitاستخدامها مثل ال

من اصدار الى اصدار، فمثال في اإلصدارات الجديدة للمتصفحات لم نعدلكننا نبقي عليها للمستخدمين الذين لم.. vendorبحاجة الى استخدام هذه ال caniuse.comوال تنسى دائما استخدام -_-..يقوموا بتحديث متصفحاتهم

: شرح الصيغة العامةtransform هي الخاصية التي سنستخدمها للقيام بالتأثير على عنصر معين

*^_وهي التي تمثل موضوع هذا الجزء من الدورة Function(value) :وتمثل هذه اسم الدالة التي سنستخدمها مع القيم التي

*^_نرغب بارسالها


واآلن لنبدأ على بركة هللا تعالى في أول دالة لهذه الخاصية وهي ال 1 (rotate :هذه الدالة الرائعة تمكنني من تغيير زاوية العرض، أي تغيير

فأصبح بإمكاننا أن نجعل.. طريقة العرض األفقية أو العامودية فقط الخ ..درجة 180درجة أو مقلوب 45العنصر يعرض بشكل مائل

*^_واآلن لنشاهد مثاال *.. ^_لتحديد الدرجة degنستخدم ال

ex-37-1.الذي يحتوي الكالس divال : مالحظةفقط لتوضيح .. divيمثل الشكل اإلعتيادي لل

*^_المثال


يمكنك طبعا استخدام اإلشارة السالبة أيضا، كما تحدثنا سابقا في موضوع... Gradient: (P(التدرج

اآلن سأتحدث عن جزئية مهمة يجب أن تعرفها وأن تأخذها بعين اإلعتبارtransformوهو الموقع الخاص بهذا ال ..transformأثناء عملك على ال

والسبب في ذلك يعود الى إهمال هذه..بالنسبة للعناصر األخرى في الملف هو إنشاء..وما تقوم به هذه الخاصية فعال ..page layoutالخاصية لل

layer لهذا ستالحظ أن بعض العناصر يمكن أن تتأثر من جراء..جديدة..على اخفاء عنصر موجود layerاستخدام هذه الخاصية، فتقوم هذه ال

*^_شاهد المثال في الشريحة التالية


:2مثال حقيقة في خاصية كهذه

فإنها تقوم على جعل العنصر ذو موقع

Relative .. والنقطة أوالموقع األصلي يحتفظ به

حسب تسلسل العنصر في لذلك لو قمت بإطفاء..الملف

فإنه سيكون ..هذه الخاصية *^_في موقعه الطبيعي

شاهد الصورة في الشريحة..التالية


: 3مثال


يمكنك اتخاذ أكثر من أسلوب، لكن األسلوب الذي..ولحل هذه المشكلة يعالج هذه المشكلة بطريقة توافق هذه الخاصية، هو عن طريق تغيير

أي سنستخدم الخاصية.. النقطة التي تمثل المركز لهذا العنصرtransform-origin ..في هذه الخاصية يمكنني تحديد الموقع بإحدى

أو يمكنني استخدام ال left, right, top, bottom, centerالكلمات التالية px, em, % .. القيمة..ويمكن كتابة قيمة واحدة أو قيمتين لهذه الخاصية

..تعني اجعل النقطة للخط األفقي والعامودي يساوي هذه القيمة ..الواحدة والثاني��ة ..ف��األولى تك��ون للخ��ط األفق��ي ..أم��ا اذا قم��ت باس��تخدام قيمت��ين

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


transformالحظ اآلن كيف أنني قمت بالتحكم في موقع الخاص : 4مثال ويمكن اإلستفادة منها أيضا* ^_حلت المشكلة ..وهذه العملية .. topبتحديد

..أكثر من ذالك مع الخصائص األخرى


: 3و 2هي الحالة اإلفتراضية أما 1: (5مثال

2الحالة

2الحالة 3الحالة

3الحالة


159اآلية –سورة ال عمران


: ^_^الدالة الثانية 2 (translate :تقوم هذه الخاصية الجميلة على تغير موقع العنصر من

)originوليس نقطة positionهنا نتحدث عن ... (احداثي الى إحداثي آخرحقيقة هذه الدالة يمكن تقسيمها الى أجزاء وهي

translate وtranslateY وtranslateX .. ^_^ بحيثx المحور األفقي وy وال ..المحور العاموديtranslate هي للمحور األفقي والعامودي...



: 1مثال


: 2مثال


*:_- skewواآلن الى الدالة الثالثة وهي ال 3(skew : تسمح لك هذه الخاصية الغريبة:P من تغيير زاوية النظرلعنصر معين على مستوى المحور السيني أو الصادي أو) اإلنحراف(

degفيجب عليك استخدام ال ..وبما أننا نتعامل هنا مع زاوية .. كالهما معا ): ^_^ translateتشبه الصيغة الخاصة بال : (الصيغة العامة


: 1مثال الحظ هنا مقدار انحراف الزاوية للعنصر على مستوى المحور س

.. ^_^والمحور ص من هذا المثال -_-شعرت بالدوار :P :P :P :P :P


: 2مثال


وهي أن هذه الخاصية في^_^ skewمالحظة ظريفة على موضوع ال ويكون هذا عندما..^_^ rotateمرحلة من المراحل قد تشبه عملية ال

والمحور الصادي يحتوي.. نقوم بوضع قيمة الزاوية على المحور السيني .. xللقيمة inverseال

وعليه اذا استخدمت هذا inverse x = -15فإن x = 15اذا كانت : مثالمثل 15-بزاية rotateسيظهر عندك skew(15, -15)الشكل

rotate(-15deg) ... شاهد الصورة_^*


: ^_^ scaleوهي ال P:الى الدالة الرابعة لهذا اليوم ^_^ واآلن 4 (scale :هذه الدالة الرائعة واألكثر من رائعة تمكنك من تكبير أو تصغير

حجم العنصر حتى وإن كان هذا التغيير بالحجم على مستوى األفقي أو*^_... العامودي أو كالهما معا

وكما تالحظ، فهي تشبه أيضا الدوال السابقة من حيث: الصيغة العامةالشكل، لكن يجب عليك اإلنتباه

هنا الى نقطة وهي أن القيمة2تكون رقم فقط هذا الرقم مثل

تعني ضاعف 2ف .. 0.5أو صغر الحجم بمقدار 0.5الحجم، ..وقس على ذلك ... النصف


الحظ أن الحجم : 1مثال تضاعف مرتين على المحور

مرات على المحور 3س و ^_^ ...ص

الحجم األصلي

الحجم بعد التكبير


: 2مثال


:3مثال الحظ هنا في حال قمنا

بوضع قيمة واحدة فقط فإن الحجم scaleداخل ال

سيتضاعف على مستوىالمحور السيني والصادي

^______^ معا


! هل انتهينا من هذه الخاصية الجميلة ؟..اآلن بقي هناك أمر راااااااااااااااااااااائع جدا لهذه الخاصية،..^_^بكل تأكيد ال

!!!^_^ للعنصر flippingوهو إمكانية هذه الخاصية من عمل

على المستوى السيني أو الصادي أو flippingنعم، فال تتعجب ويكون ال ^_^ ما رأيك اآلن بروعة هذه الخاصية ..^_^كالهما معا أيضا

أنك ال تحتاج في عمل ذلك الى أي تغيير في..واألجمل من ذلك هو هو استخدام..فقط كل ما عليك القيام به .. الصيغة القواعدية لهذه الدالة

ألنه) 1(أيضا اذا استخدمت القيمة السالبة مع رقم غير ال ..القيمة السالبة ^_^و تغيير للحجم أيضا flippingفإنه سيقوم بعمل ..القيمة اإلفتراضية

...^_^ لنشاهد اآلن مثاال معا


باإلتجاه العامودي flippingالحظ في هذا المثال أنني قمت بعمل : 4مثال ....ومضاعفة حجمه أيضا

كما انني قمت بمضاعفة الحجمflippingاألفقي، لكن دون عمل

^________________^


هل يمكن استخدام أكثر من تأثير..ومهمة ^_^ لننتقل لنقطة جديدة ..واآلن ! وتغير الحجم ؟ rotateبذات الوقت، مثال

يمكنك ذلك من خالل استخدام الصيغة..والجواب بكل روعة هو نعم :التالية

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

*_*لنشاهد مثاال *... ^_معا


: مثال


واآلن سنتحدث عن آخر موضوع في هذه الجزئية بإذن هللا تعالى، وهي)...المصوفة( matrixدالة ال

5 (matrix :هذه الدالة لوحدها تجميع بين جميع الدوال التي تم ذكرها فيقيم لتنفيذ الدوال المختلفة 6وهي تأخذ .. Transformationsموضوع ال

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

ويمكنك التطوير من مهارات في..تعالى شرح الفكرة بأبسط أسلوب ممكن *..^_حال أردت المزيد


:واآلن، لنشاهد الصيغة العامة

لكن سلوكها مختلف.. 0جميعها ذات قيمة افتراضية a –Yالمتغيرات من ..بنائا على الموقع أو نوع التغيير الذي ستتركه

scaleما رأيكم في تجربة لعمل .. واآلن، ولتبسيط المسألة قدر اإلمكان

): ثم انتقل للشريحة التالية: (شاهد المثال األول..^_^ ؟ matrixباستخدام ال


scaleيجب عليك تحديد قيمة ال scaleأول نقطة لعمل aبحيث يمثل dو aومن ثم عليك تعويض هذه القيم مكان المتغيرين

*_*وبهذا يتضح المثال األول ..^_^المحور الصادي dالمحور السيني و ...^_^ بإذن هللا تعالى

، بنفس ^_^ translateفماذا عن ال ..اذن .. scaleهذا الكالم يتعلق بال ^_^ Yو Xاألسلوب نحدد القيم ونقوم بتعويض هذه القيم مكان المتغيرين

: شاهد المثال..^_^المحور الصادي Yالمحور السيني و Xبحيث ^_^ثم انتقل للشريحة التالية


:الشيفرة البرمجية الخاصة بالشكل السابق هي

لكن هناك مالحظات X & Yالحظ كيف تم تحديد القيم مكان المتغييرين : مهمة وهي

.pxاإلزاحة الناتجة من خالل هذه الدالة ستكون بال 1)جميع المتصفحات نكتب بها قيم اإلزاح�ة رق�م فق�ط، ويس�تثنى م�ن ذل�ك 2)

بجان�ب pxبحي�ث يج�ب علي�ك وض�ع mozاإلصدارات القديمة من ال ..&_&الرقم


rotateوال skewوهما ال matrixبقي لدينا أمران لم نتحدث عنهم في لهذا فإن) degزاوية (، هذه الدوال إن كنت تذكر، فهي تأخذ قيم مثلثية ^_^

..هي قيمة زوايا مثلثية cو bالقيم التي ستعوض مكان وال rotateللخاصيتين bو cكيف ..واآلن سيخطر ببالك سؤال مباشرة

skew !!واإلجابة على هذا السؤال فإننا نتعامل مع زوايا مثلثية، وبتالعبك بالقيم

^_^..ستستطيع بناء هذا الشكل ..الخاصة بالزوايا المثلثية

طبع��ا ه��ذه االمثل��ة تجم��ع أكث��رمن خاص��ية لك��ن أهمه��ا ه��و : (ش��اهد المث��ال...الى الشريحة التالية) ... rotateوال skewموضوعنا ال


: مثال أ


: مثال ب


..بهذا والحمد ل نكون انتهينا من هذا الموضوع الشيق واألكثر من شيق

: مالحظاتفهذه الدالة لها عالم، ولم ننتهي منه بعد matrixبخصوص دالة ال ) 1لكن هذه األمثلة والشرح هو مدخل لهذه الدالة، ولكن إن أردت المزيد..

..^_^يمكنك القرائة والبحث حول الموضوع

..^_^ يمكنك من تشكيل مصفوفة هذا الموقع من خالله ) 2

*^_شاهد األمثلة السابقة ..واآلن

http://peterned.home.xs4all.nl/matrices/�


حسن البنا رحمه هللا

Transition & [email protected] دورة مجانية(أنيس حكمت أبو حميد (

3كنا نقوم بتقسيم صفحة الويب الى CSS3قديما، وقبل دخولنا عالم ال أجزاء أو طبقات رئيسية وهي المحتوى والذي يمثل عن طريق ال

HTML والعرض والذي يمثل من خالل ،css والسلوك والذي يمثل من ،وكان بشكل عام، هناك فهم بأن كل وسيلة من هذه...^_^ JSخالل ال

بحيث يبقى لكل طبقة..الوسائل يجب أن تبقى منفصلة نوعا ما عن األخرى استخدامها التي صممت له، لكن هذا الفهم تالشى تدريجيا مع تطور عالم

أن نقوم بعملية دمج بين هذه CSS3الويب، وأصبح اآلن من خالل ال بحيث أمكننا دمج العرض والسلوك معا..الطبقات بأسلوب رائع وسهل

..^_^ Transition & Animationلتغيير شكل المحتوى من خالل ال *_* Transitionوما هو ال Animationواآلن ما هو ال


الTransition هي وسيلة تسمح لك بتغيير قيمة معينة لعنصر معينمن قيمة الى أخرى، ) ^_^بشكل سلس ورائع للعين (بشكل تدريجي

.^_^وضمن فترة زمنية معينة

الAnimation ه��ي وس��يلة تس��مح ل��ك يتغيي��ر س��لوك العنص��ر وإث��راء*^_ flashأو jsالحركات عليه دون الحاجة الى استخدام ال

وال Transitionوأول ما سيخطر ببالنا اآلن ما هو الفرق بين ال Animation ؟^_^


قد يكون دقيق نوعا ما، ألن ال Transitionوال Animationالفرق بين ال Transition هو صورة مصغرة عن الAnimation ،إن صح التعبير

محددا بين نقطتين أي بين حالتين، Transitionبحيث يكون ال End Start to ضمن فترة زمنية معينة، مثل عملية تصغير الwidth

باإلضافة الى ماسبق يمكن التحكم به animationوإعادة تكبيره، لكن ال بشكل أكثر، وتقطيعه الى فترات زمنية أكثر، وتختلف بنوع التغيير أو

،*^_ freamsوهذا يعني أننا نعمل مع ..الحدث الذي يحصل بكل جزئية باإلضافة الى أنه يمكنني تحديد التكرار هنا وال استطيع تحديده بال

transition _^* وفي الغالب فإننا نستخدم ال ،transition في حاالتتأثير بدأ ونهاية والتي تنطلق عند–حجم –مهمة وسريعة مثل تغيير لون

تحتاج الى شيفرة Transitionوذلك ألن ال (الخ .. hover, active, focusال ^^واآلن لنبدأ معا *..^_ولكل خاصية مكانها ) ...^_^برمجية أقل لتنفيذها عادة


:Transitionأوال ال علينا القيام بخطوتين رئيسيتين Transitionاآلن لتعريف أو للقيام بأي

: وهما*^_لها effectتعريف الخاصية التي سنقوم بعمل ال 1)*^_ Effectمدة التنفيذ الخاصة بال 2)

* ^_واآلن لنشاهد مثاال يوضح الفكرة، قبل شرح الخصائص هنا سيتم تغيير الخلفية من اللون البرتقالي

ثانية 2الى اللون الفضي بزمن مقداره *^_راائع .. hoverعند حدوث ^_^


: وهي Transitionواآلن لنتحدث عن خصائص ال (1transition-property : وهنا نق�وم بوض�ع اس�م خاص�ية الcss الم�راد

أي لجمي��ع allله��ا والقيم��ة اإلفتراض��ية له��ا ه��ي effectتنفي��ذ ال ، ويمك��ن أن تحت��وي خاص��ية واح��دة أو أكث��ر يفص��ل ^_^الخص��ائص

...بينها فواصل عادية

ب�ال Transitionطبعا يجدر هنا مالحظة ليس كل الخصائص تدعم ال css ... والذي يمكن أن يتأثر من الخصائص هو عادة من يملك نقطتين

* ^_ش�اهد أش�هر الخص�ائص .. Transitionكما ذكرنا في تعري�ف ال : في الشريحة التالية


(2transition-duration : هذه الخاصية هي المسؤولة ع�ن تحدي�د الوق�ت، والوق�ت اإلفتراض�ي هن�ا ص�فر، *^_معين Transitionالالزم لتنفيذ

فع��ال، Transitionأي أن��ه يج��ب علي��ك تحدي��د الوق��ت حت��ى يص��بح ال بحي�ث تمث�ل ) ms(أو أج�زاء الثاني�ة (s)ووحدة ال�زمن هن�ا ه�ي الثاني�ة

تعن�ي 3250msث�واني و 3تعن�ي 3sلذلك ... واحد ثانية 1000msكل ، وفي حالة تحدي�د ه�ذه الخاص�ية *^_جزء من الثانية 250ثواني و 3

ف��إن جمي��ع العناص��ر تأخ��ذ نف��س الوق��ت، واذا اس��تخدمنا ف��ي ال transition-property أكث��ر م��ن قيم��ة ونري��د إعط��اء ك��ل قيم��ة وق��ت

مختلف فيمكننا هنا ايضا استخدام الفاصلة، وبنفس الترتيب الذي وضع :^_^شاهد المثال .. يكون هو ترتيب الزمن عند التنفيذ


: مثال


(3transition-timing-function:، *^_أوال Time Functionولش��رح ه��ذه الخاص��ية، يج��ب ش��رح ال

أي ل��ن أعي��د (أيض��ا animationوه��ذا الش��رح مه��م ألن��ه س��يكون ل��ل *_*ل��ذلك انتب��ه جي��دا ) ..animationش��رحه ف��ي موض��وع ال

ه�و ال�تحكم بالس�رعة اعتم�ادا عل�ى time functionنعني باس�تخدام ال أي أن السرعة لتنفيذ حركة أو حدث معين قد تزي�د أو .. منحنى الوقت

تنقص ف�ي فت�رة زمني�ة معين�ة بم�ا ي�تم تحدي�ده م�ن قب�ل المط�ور، وله�ذا الشكل أسلوبان لكتابته وهما

keyword أوcubic-bezier ...: واآلن انتقل الى الشريحة التالية


: هي keywordالقيم الخاصة بال ease : وهذه تعني بداية بطيئة ثم سرعة ثم نهاية بطيئة من جديد، وه�ي

*.^_الحالة اإلفتراضية linear : وه��ذه تعن��ي أن الس��رعة متس��اوية م��ن البداي��ة ووص��وال ال��ى

*.^_نهاية الحركة ease-in :وهذه تعني بداية بطيئة ومن ثم يسرع حتى ينتهي_^*ease-out : وه��ذه تعن��ي نهاي��ة بطيئ��ة، أي يب��دأ بس��رعة وعن��د النهاي��ة

.^_^ينتهي ببطئ ease-in-out : وهذه تعني دم�ج ب�ين الخاص�يتين الس�ابقتين، بحي�ث أنه�ا

تب��دأ ببط��ىء ث��م تتس��ارع ت��دريجيا حت��ى تص��ل نقط��ة معين��ة قب��ل النهاي��ة ش��اهد easeولفه��م الف��رق ب��ين ه��ذه الخاص��ية وال ..لتتب��اطئ مج��دد *^_الشريحة التالية


*: ^_ keywordصورة تمثل الفارق بالسرعة إعتمادا على ال

، وفعليا إن الخصائصcubic-bezierاما األسلوب الثاني لتحديد الوقت فهو هي مسميات لقيم تم استخدامها keywordالقيم التي تم ذكرها سابقا في ال

... cubic-bezierوتعويضها من ال هو منحنى تم تصميمه من بيزييه الفرنسي، ويستخدم cubic-bezierال

بشكل كبير في الرسوم الحاسوبية، والصيغة العامة لهذا المنحنى هيcubic-bezier(n,n,n,n) بحيث تمثل كل ،n واذا كانت القيمة1–0قيمة بين ،

)..رجوع عكس الحركة أيضا(سالبة، فهذا يعني أنها خارج النطاق


: بالمحاور فيصبح لدينا الشكل التالي nاذا قمنا باستبدال cubic-bezier(x1, y1, x2, y2);

يمكنك مشاهدة العديد من األمثلة وإنشائها وتطبيق قيم مختلفة من خالل هذا*^_الموقع الجميل

*^_شاهد ناتج على تطبيق مثال من الموقع

*^_واآلن لنتابع موضوعنا األصلي من جديد transition-timing-functionولنتحدث عن

http://cubic-bezier.com/�


تمكننا من التحكم بسرعة تطبيق اإلنتقال transition-timing-functionإن الخاصة بالحركة التي قمنا بتحديدها، والسرعة تختلف بنائا على ال

keyword أوcubic-bezier كما يمكنك استخدام* ..^_التي تم تحديدها..الفاصلة للفصل بين القيم في حال وجود أكثر من خاصية

*^_واآلن لنرى طريقة التطبيق


) انتبه لمعدل سرعة الحركة واتجاهها..عند تنفيذك لهذا المثال: (مثال


(4transition-delay : تستخدم ه�ذه الخاص�ية لتحدي�د وق�ت لت�أخير عملي�ة، وتكون القيمة الخاصة بها زمني�ا إم�ا ب�الثواني Transitionانطالق ال

أو بأجزاء الثانية، كما أن الفاصلة هي التي تفصل بين الق�يم اذا وج�دت ، كما أن هذه الخاصية يمكنها أن تحت�وي عل�ى وق�ت -_-أكثر من قيمة

، وهذا يعني قم بطرح أو أخفاض ال�زمن ال�الزم للحرك�ة *_*بالسالب ، ..ويك��ون ه��ذا مباش��رة لحظ��ة الب��دأ بالح��دث delayبمق��دار يس��اوي ال

..._^*ستتضح الصورة اذا قمت بتطبيق مثال على هذه العملية : مثال على الصيغة العامةوهذا يعني 2-الحظ هنا أن زمن التأخر هو : مثال على القيمة السالبة

^_^ثانية 2، فعند البدء سنختصر مباشرة 2= 4-2


:مثالعند تطبيقك لهذا المثال

الحظ المدة الزمنية المستغرقة transitionحتى ينطلق كل

والحظ ما هو أثر القيمة السالبة على التأخير بالنسبة

.. durationلل


سنتحدث عن آخر جزئية بإذن هللا تعالى..^_^وأخيرا، وليس آخرا لكتابة) الطريقة المختصرة( shorthandوهو ال transitionبموضوع ال

... transitionال

: شاهد الصيغة

وكل ما عليك فعله هو..الحظ بهذه الطريقة نختصر الطريقة التقليدية ومن يتم الفصل بينهم) الترتيب مهم..(وضع القيم مكانها بهذا الترتيب

>--تابع الشريحة التالية* ..^_بفراغات


لكن هناك مالحظة مهمة يجب أن تنتبه لها، وهي في حالة وجود أكثر منTransition في الshort hand _^ ..* ولم نقم باستخدام الallفي هذه ،

: الحالة يجب عليك كتابة الصيغة بالشكل التالي



خطرت في نفسي فكرة جميلة ألضعها هنا قبل أن أنهي هذه الجزئية..اآلن ، وهي هل يمكن^_^ال أدري إن خطرت ببالك بعد ..^_^بإذن هللا تعالى

معا ؟ transformوال transitionاستخدام ال

، وبهذه الطريقة نعطي رونقا وجماال^___^وهو نعم ..هذا الجواب مهم .. لما تعلمناه في الموضوع السابق

: قم بتجربة هذا المثال


وبهذا، نكون انتهينا بإذن هللا تعالى من أول جزئية بهذا الموضوع وهو الTransition لننتقل الى الجزئية الثانية بعد ذلك وهي الanimation *_*

لكن أرجوا أن تكون قمت بتطبيق والمحاولة في جميع األمثلة والنقاط التيانتبه لذلك..لن تستطيع كتابة أي شيفرة مستقبال ..تم ذكرها، بدون تطبيق

كما يمكنك مشاهدة جميع األمثلة السابقة من هنا، لكن إنتبه أنني لم أراعياألمثلة تعمل على احدث اصدار من..(ألجل السرعة vendorاستخدام ال

chorme وfirefox بدون مشكلة بإذن هللا تعالى..^_^.. (


حكم عن العمل التطوعي


واآلن، animationوال Transitionتحدثنا في بداية هذا الموضوع عن ال ، والذي يعد منAnimationلنتحدث بتخصيص أكثر حول موضوع ال

..أجمل المواضيع في عالم تنسيق صفحات الويبتسمح لك بتغيير تنسيق معين من شكل آلخر، بحيث Animationإن ال

بالعدد الذي تريده، وبالوقت الذي تريده cssيمكنك تغيير خصائص ال وعلى أكثر من مرة أو فترة زمنية، وللقيام بهذا األمر، يجب علينا أن

...keyframesنعرف عن ، ويحتوي على نقطةanimationهي أول خطوة النشاء أي keyfreamsال

إنطالق وانتهاء التأثير أو الحركة، ويكون اختالف التنسيق بنائا على الزمنأي 2هو frameوالحد األدنى لل frameالذي أقوم بتحديده له داخل ال

*_*ويمكن تفصيلها أكثر من ذلك كما نريد ..وجود نقطة بداية ونهاية


واآلن لنبدأ بتفصيل الموضوع بشكل أكبر نوعا ما، وذلك بتقسيم ال Animation الى :

(1@keyframes :: وه��ي animationخص��ائص ال 2)

animation-duration) ب animation-name) أanimation-delay) د animation-timing-function) جanimation-direction) ه animation-iteration-count) نanimation-fill-mode) ي animation-play-state) و

وال animationلل shorthandوبعد ذلك سنتحدث بإذن هللا تعالى عن ال Multiple Animations ^___^


: keyfreams@أوال ال : الصيغة العامةثم يتم كتابة keyframes@أوال يتم كتابة

وفضل أن keyframesاسم مميز لهذا ال ، وهذا اإلسم يجب أنmoveCarمثل animtionيكون االسم ذو عالقة بال

^_^آخر بكل تأكيد animationيكون فريد، أي ال يجب أن يتكرر ل أو تكون بالنسبة المئوية مثل from/toفهي إما أن تكون keyfreamأما ال

0 %- 10 %- 50 %- 100 %المراد عمل cssخصائص ال /فهي خاصية property: valueأما ال

animation لنشاهد مثال...^_^لها--<


انتبه : للمثال


: 2مثال

شاهد تطبيق األمثلة السابقة


وقبل البدء أرغب بإيضاح نقطة، وهي animationواآلن الى خصائص ال وهنا controlيجب أن يتواجد هناك animationأنه بتشغيل والتحكم بال

هي مجموعة الخصائص التي تستدعي وتتحكم بال controlال keyframes .. لذلك دائما بعد كتابتك للkeyframes يجب عليك أن

واآلن سبدأ بإذن هللا تعالى.. تستدعيه وهذا ما وجدته في المثالين السابقين animation-nameفي شرح أول خاصية من هذه الخصائص وهي ال

1 (animation-name :المراد keyframeتستخدم لإلشارة على ال animation-nameال

...استدعائه وبهذا فهي تحمل نفس اإلسم انتقل للشريحة التالية.. animation-name: keyfream-example: مثال


وكما استخدمنا ال ..أيضا يجب عليك أن تراعي الدعم للمتصفحات األخرى Vendor للkeyframe شاهد المثال..نستخدمه للخصائص :

الحظ أن اإلسم هو نفسهوأن keyframeاسم ال

أيضا موجود vendorال كما هو موجود لل

keyframe


2(animation-duration :وهي الخاصية المسؤولة عن تحديد الزمن، والقيم*^_ transition-durationوهي تشبه ال ... animationالكلي لل

والقيم السالبة تعد صفرا..الخاصة بها أيضا هي بالثواني أو أجزاء الثواني : شاهد مثال

: 2مثال


3 (animation-timing-function : ^_^هذه الخاصية تم شرحها سابقااذا transitionالموجود بال timing functionراجع درس ال ..أيضا

*^_كنت ال تذكرها : الصيغة العامة

: مثال


4 (animation-delay :هذه الخاصية المسؤولة عن وضع فترة زمنية قبلوهي تشبه أيضا خاصية ال) تأخير أو انتظار..( animationتنفيذ ال

transition-delay ..^_^ .. صفر يعني ال يوجدdelay وهي الحالةكما أن القيم السالبة.. اإلفتراضية، ويمكن استخدام الثواني وأجزاء الثواني

durationلجزء من الوقت المخصص لل skipتعني اختصر أو اعمل

*^_..وهذه األمور تم شرحها سابقا ..

: مثال


..اآلن لنفيذ األمثلة التي ستأتي بالشرائح التالية : -webkit–التالي وال تنسى اضافة أيضا ال keyframesقم بكتابة ال


5 (animation-iteration-count : ^_^هذه الخاصية جديدة، ولم تكنالتي ذكرناها animationوهي إحدى مميزات ال Transitionموجودة بال

عدد معين من animationفمن خالل هذه الخاصية يمكننا تكرار ال أو عدد infiniteهذا العدد إما أن يكون ال نهائي باستخدام ال ..المرات

،1الخ، والحالة اإلفتراضية له هي .. 145أو 7أو 5معين من المرات مثل ..ثم يتوقف ..من البدء وحتى النهاية animationأي يقوم بعرض ال

*^_لن يتم التنفيذ ...animationفهذا يعني توقف ال ..0واذا تم استخدام



: مثال


6 (animation-direction :أيضا هذه الخاصية لم نتحدث عنها وهي من، تقوم هذه الخاصية على تحديد * ^_الرائعة animationمميزات ال

يعني.. طريقة العرض أو اإلنتقال من البداية الى النهاية وبالعكس فإن الحالة اإلفتراضية animationوبأسلوب آخر، في الطريقة التقليدية لل

ومن ثم تجد..من البداية وصوال الى النهاية animationهي أن ينطلق ال .. Transitionأنه عاد الى نقطة البداية فجاة دون تدرج بالعودة مثل ال

animation-directionلكن هذه الخاصية يمكن تغيير قيمتها باستخدام الأو alternateب ) القيمة اإلفتراضية( normalوذلك من خالل استبدال ال

Reverse ... ثم نعود لشرح هذه القيم .واآلن لنشاهد الصيغة العامة^_^: الصيغة العامة


: animation-directionشرح القيم الممكنة لل (1normal : وهي القيمة اإلفتراضية، وتعني أن يبدأ الanimation ومن

..ثم ينتهي ويعود مباشرة الى نقطة البداية دون تدرج أو أي تأثير(2reverse : وهذه القيمة تعني أن يبدأ الanimation بشكل عكس�ي، م�ن

^_^..نقطة اإلنتهاء رجوعا الى البداية (3alternate : ه��ذه القيم��ة تعن��ي أن الanimation س��يعمل بالش��كل

ال��خ وس��يعمل .. 5–3–1اإلعتي��ادي عن��د األع��داد الفردي��ة مث��ل reverse األرقام ترمز ال�ى (الخ .. 6- 4–2عند األعداد الزوجية مثلألن ش�كل الحرك�ة .. وهذه الخاصية رائع�ة ومهم�ة ج�دا*)..^_التكرار

*...^_هنا يصبح على شكل ذهاب وإياب (4alternate-reverse :هذه القيمة هي عكس للقيمة الalternate ..


:مثالال تنسى تطبيق المثال

فالتطبيق مهم جدا جدا وكتوضيح أخير.. هنا

alternateلفكرة ال فهي عند البداية هنا

keyframeوحسب ال سيبدأ من ..الذي نستخدمه

ثم) 1(اليسار الى اليمين )2(من اليمين الى اليسار

ثم من اليسار الى اليمين ثم من اليمين لليسار ) 3(^_^وهكذا ينتهي )..4(


رحهم هللا جميعا.وعروة ابن شهاب، مالك، وشيخه نقل ذلك عن اإلمام


7 (animation-play-state :تستخدم هذه الخاصية الرائعة إليقاف الanimation في مرحلة معينة، وهي تملك قيمتانpaused وrunning

.. وهي الحالة اإلفتراضية


: مثال


7 (animation-fill-mode : وآخر خاصية بإذن هللا تعالى في هذا...animation-fill-modeالموضوع الشيق، خاصية ال

هذه الخاصية تستخدم لتحديد التنسيق الخاص بعنصر ما، بعد انتهاء تنفيذه .. حسب القيمة المراد وضعها delay timeأو في حالة وجود

و backwardsو forwardsويمكن أن تحتوي هذه الخاصية على القيم none .. بحيثnone هي الحالة اإلفتراضية وboth..

: هذه القيم تعني1 (forwards : سيتم أخذ التنسيق الذي تم انتهاء الanimation عنده

)^_^وهذه هي أهم قيمة ..(وإبقائه على العنصر2 (backwards : سيتم أخذ التنسيق ألولkeyframe سيتم تنفيذه لل

Animation...


3 (Both : هذه القيمة تقوم على الدمج أو تنفيذ خاصية الforwards والbackwards ...^_^

4 (none :هنا لن يتم جلب أو تنفيذ أي تنسيق قبل أو بعد انتهاء الanimation وهي الحالة اإلفتراضية_^*

لها تأثير على وضوح فائدة directionsأو delayهنا ال : مالحظة مهمةكما أن.. delayمع ال backwardsفمثال تتضح جليا ال .. هذه الخصائص

يؤثر على النتيجة النهائية للخاصية بنائا iterationsوال directionsال : واآلن لنشاهد مثاال في الشريحة التالية...على القيم المستخدمة


: forwardsمثال على

لتشاهد الفرق backwardsلكن تطبيق ال *..^_.. forwardsاآلن هذا المثال لل يمكنك البحث عن أمثلة..لذلك سأدعها لك كوظيفة لتشاهد الفرق ..دقيق نوعا ما

وللمساعدة هذه مواقع تحتوي أمثلة رائعة..عن طريق اسم الخاصية هذه الروابط قمت بجلبها من عملية البحث التي(الموقع الثاني الموقع األول

*)^_مباشرة .. أخبرتك بها من جوجل

http://www.sitepoint.com/understanding-css-animation-fill-mode-property/�

http://valhead.com/2013/01/04/tutorial-css-animation-fill-mode/�


هناك نقطة مهمة، وهي أنني اذا..واآلن وبعد حديثنا عن الخصائص فهذا يعني أنني أحتاج لكتابة..احتجت الى كتابة هذه الخصائص جميعها

واذا أردنا أن تدعم) عدد الخصائص(مرات animattion 8أوامر ال 2* 8مع الصيغة القياسية فسيصبح لدينا -webkit–المتصفحات مثل ال

هذا األمر..أسطر 8قمنا بكتابة ..الحظ الشريحة السابقة ..سطر 16= لذلك وجدت طريقة جميلة وسهلة تختصر علينا هذا العناء..مزعج حقيقة

... Animation Shorthandوهي باستخدام ال وقلنا سنشرح keyframeهل تذكر أول مثال تطرقنا له عند حديثنا عن ال

: شاهد..سأضعها هنا ..وللتذكير فقط ..السطر فيما بعد


ال نستطيع التطرق اليها أو شرحها... هذه الطريقة المختصرة كما تالحظ ..الى بعد شرح الخصائص كل واحدة على حدا، وهذا مهم جدا

)الترتيب مهم جدا: (واآلن ما هي الصيغة العامة للطريقة المختصرة

طبعا اإلسم والمدة اجباري عدا ذلك(القيم اإلفتراضية للصيغة السابقة هي ..شاهد القيم اإلفتراضية بالترتيب)... فهو اختياري


:1مثال

: ناتج تطبيق هذا الثمال هو ذاته هذا المثال


:2مثال

فإني اختزلت الصيغة بشكل سهل، وبما أنني ال أحتاج .. الحظ هذا المثالكقيم افتراضية 1أو 0لم أقم بوضع iterationوال يوجد delayالى ال

..لهم، لذلك أحببت أن أنه الى هذه الفكرة ^_^.... واآلن لننتقل بإذن هللا تعالى الى فكرة جديدة وهي


..^_^ Multiple Animationsال يسمح لك باستخدام أكثر من Animation، فال ^_^نعم يا صديقي العزيز

animation لنفس العنصر، وهذه من الخصائص الرائعة فعال_^..*فقط كل عا عليك القيام به هو السير على animationولكتابة أكثر من

) Transitionتشبه ال * ( ^_: هذه الصيغة العامة


: مثال


، وبفضلAnimationنكون انتهينا من موضوع ال ..هكذا بحمد هللا تعالى ..هللا تعالى، نكون قد تطرقنا لموضوع قد يكون من أكثر المواضيع أهمية

واآلن جميع األمثلة السابقة يمكنك مشاهدتها مباشرة من هنا، لكن أحيطكعليك أن تسير على األمثلة.. علما لكثرتها وبسبب تواجدها بنفس الصفحة

بعد ذلك إما أن تحذف األجزاء التي تنتهي من دراستها لتشاهد..جزء جزءبعد قيامك بال refreshأو أن تقوم بعمل .. المثال الذي بعدها بوضوح

scroll _^..*


أبو بكر الصديق رضي هللا عنه


فإننا سننتقل معا 2D Transformationsبعد حديثنا الجميل عن موضوع ال .. 3D Transformationsبإذن هللا تعالى الى مفهوم جديد وهو ال

نتطرق cssكنا سابقا وفي أي أمر أو خاصية تطرقنا اليه من خصائص ال وعندما نتحدث عن العناصر كنا نكتفي.. فقط yوالمحور xالى المحور

والتكنولوجيا تطورت..لكن هذا لم يعد كافيا .. فقط بذكر الطول والعرض ولم نعد نكتفي فقط بالطول zفأصبح لدينا محور جديد وهو المحور ..أيضا

) ...depth(وإنما أيضا أصبحنا نهتم بالعمق ..والعرض *_*أي ثالثي األبعاد .. 3Dهي باألصل ما يعني ..هذه اإلضافات الجديدة


وبما.. طبعا بما أننا نتحدث عن تقنية جديدة ومطورة حديثا في عالم الويبإلغن هذا يحتاج الى القيام.. أنها تتعامل على مستوى ثالثي األبعاد

بعمليات معالجة كبيرة من قبل الحاسوب، باإلضافة الى الحاجة الى وجود...متصفح حديث ويدعم هذه الخصائص

هم 3D Transformationإلعتماد ال w3cالذين قاموا بتقديم توصية لل وبنائا على هذه التوصية والفائدة التي يمكن أن*..^_ webkitجماعة ال

والبدء بالعمل* _* W3Cتقدمها مستقبال تم اعتماد هذه التوصية ضمن ال واآلن لنبدأ بعد هذه المقدمة... وإن لم يكن على كافة القواعد التي وضعوها

* _...*البسيطة بهذا الموضوع الجميل على بركة هللا تعالى


لتتخيل كيف يمكن أن يكون..اآلن أو العنصر اذا 3Dشكل ال

عليك بتأمل الصورة 3Dكان التالي، والنظر الى المحاور

*^_ 3ال


، هذهTransform Styleأول خاصية سنتحدث عنها بإذن هللا تعالى هي ال الخاصية رغم أنها بسيطة جدا، اال أنك إن لم تقم بتعديل قيمتها فلن يعمل

3Dأو لن يظهر التداخل الخاص بال 3D Transformationsمعك ال parent، أي سيعمل على *^_) لألبناء( Childبشكل صحيح للعناصر ال

..فقط بالحالة اإلفتراضية :الصيغة العامة

: وهناك قيمتان لهذه الصيغة العامة(1flat : وه��ي الص��يغة اإلفتراض��ية، وتعن��ي أن األبن��اء ل��ن ي��تم تطبي��ق ال

3D عليهم(2preserve-3d : هذه القيمة تعني أن األبناء س�وف تح�افظ عل�ى نم�ط ال

3D .. 3أي سيتم تطبيق الD لهم ترادفا مع الparent


هذا الشكل يوضح الفرق بين الشكلين من خالل استخدام العنصر ...الحظ : 1مثال ... الحظ التفاصيل بدقة ... transform-styleال

لنذهب لنشاهد مثال عملي على الموضوع في..بعد مشاهدتك لهذا الشكل الشريحة التالية، وانتبه كيف لم يظهر تأخير للمربع األول والثاني، واختلف

)ال تنسى النظر للشيفرة البرمجية...(والرابع 3الكالم لل


: 2مثال

: ^_^طبق المثال


عن 2Dطبعا تحدثنا بموضوع ال Transformation Functions..واآلن الخ، لكن اآلن.. scaleوال rotateالدوال التي يمكن استخدامها مثل ال

*^_ 3Dسنعود للحديث عن الدول لكن بوجود خصائص ال

*: ^_ 3D Rotateوأول خاصية هي ال : الصيغة العامة

: لنشاهد المثال اآلن


الح�ظ كي�ف ش�كل ال ..يمث�ل مح�ور x, y, zالح�ظ هن�ا أن ك�ل م�ن : 1مث�ال rotate 3في الD


: 2مثال


طبعا يمكنك اختصار األسلوب السابق على شكل Rotate3d(x, y, z, angle) ..لكن سأدع لك عملية البحث واإلطالع على

اإلختالف فقط أن المتغيرات ستمثل نقاط على المتجه وال..(هذه الصيغة angle هي الزاوية.. (..

أيضا الخصائص التي تعلمناها سابقا والتي ال تختلف عن األسلوب الذي..scaleوال translateذكرناه هي دالة ال


غير ظاهر لك بسهولة3Dقد يكون تطبيق الخصائص السابقة على شكل يحتوي العديد منلكنها مهمة وتختلف عند تطبيق عملية فعلي..

فكانت لتوضيح فكرة rotateوعندما قمت بوضع مثال ال .. الخصائص *.. ^_اإلختالف عن تطبيق معين

.. translate & scaleلل 3Dاآلن لمشاهدة الشكل


الحظ هنا، ان سبب أخذ هذه الصور من الكتاب كما هو، .. translateوال ..أو التطبيق .. لتوضيح كيفية ظهور التنفيذ


Perspective :تقوم هذه الخاصية على تحديد مقدار العمق الالزم لعنصرمعين عن زاوية النظر أو يمكننا القول بأنها موقع العنصر بالنسبة لموقع

: العرض ، شاهد الصيغة العامة

، باإلضافة الى أن القيمةvendorطبعا من المهم هنا أيضا استخدام ال 0أو noneاإلفتراضية هنا هي

^_^لنشاهد مثاال ..واآلن


: مثال



]11: المجادلة [ سورة

الخاتمة

دورة CSS3 باللغة العربية

Education

Transcript of دورة CSS3 باللغة العربية