#26 شرح بالتفصيل عن خاصية linear gradient

[0:00]السلام عليكم ورحمه الله وبركاته. تكمله لدروس الباك جراوند هنتكلم النهارده عن الليينير جريدنت أو فكره ان انت تدمج عده الوان مع بعض. اللي هو بدل ما انت بتحط لون ثابت للخلفيه بتاعتك، انت ممكن ان انت تدمج لونين مع بعض او ان انت تدمج عده الوان مع بعض. طيب ازاي بنعمل كده؟ تعالوا دلوقتي لما نشوف. هنعمل هنا ديف، وهنروح دلوقتي علشان ندي خلفيه للديف ده، فهنيجي عندنا هنا وهقول لك دلوقتي انا محتاج الاول ان انا اعمل طول للديف ده وليكن 200 بكسل، وانا علشان كنت اعمل لون ثابت للديف ده كنت بستخدم الباك جراوند كلر وكنت بكتب اللون اللي انا عاوزه وليكن مثلا ازرق او وات ايفر يعني اللون اللي انت عاوزه ان انت تحطه فبتحط اللون بتاعك وبالشكل ده انت حطيت لون ثابت. ولكن لو انت عاوز تدمج عده الوان مع بعض ما بتستخدمش عندك الباك جراوند كلر. بتستخدم عندك الباك جراوند ايميدج واستنى عليا هقول لك كل حاجه دلوقتي. دلوقتي انت لو فتحت موقع w3schools احنا عندنا حاجه في السي اس اس اسمها سي اس اس جريدينتس او التدرج زي ما انت شايف قدامك هنا او زي ما هو موضح لك في موقع w3schools. تمام؟ طيب ازاي بنستخدمها؟ علشان تستخدمها بتيجي عندك هنا على السينتاكس هتلاقيه هنا بيقول لك ان انت علشان تستخدمها بتستخدم عندك الباك جراوند ايميدج، الباك جراوند ايميدج هي اللي بتسمح لك ان انت تعمل تدرج في الالوان عندك بالشكل ده. وعلشان تستخدم عندك التدرج بتستخدم عندك الليينير جريدينت او التدرج الخطي، لينير يعني تدرج خطي. طيب إيه اول حاجه انا بكتبها هنا؟

[2:09]بص يا معلم، أول حاجه انت بتكتبها هنا هي الدايركشن أو اتجاه التدرج. لأن انت ممكن يكون عندك تدرج من فوق لتحت او من اليمين للشمال او من الشمال لليمين او في الاتجاه اللي انت بتحدده. فأول حاجه انت بتكتبها، تعالى كده لما أوريك، أول حاجه انت بتكتبها هي الدايركشن الاتجاه، وبعد كده بتكتب عندك الألوان اللي انت عاوزها، سواء لون أو اتنين أو تلاته أو اللي انت عاوزه. طيب تعالى دلوقتي لما نشوف مع بعض. انا دلوقتي علشان أعمل عندي الجريديانت فا بكتب عندي الباك جراوند ايميدج، تمام؟ وبعد كده بستخدم عندي الليينير جريدينت او التدرج الخطي، لينير يعني تدرج خطي. طيب إيه اول حاجه انا بكتبها هنا؟ بص يا معلم، أول حاجه انت بتكتبها هنا هي الدايركشن أو اتجاه التدرج. لأن انت ممكن يكون عندك تدرج من فوق لتحت او من اليمين للشمال او من الشمال لليمين او في الاتجاه اللي انت بتحدده. فا أول حاجه انت بتكتبها، تعالى كده لما أوريك، أول حاجه انت بتكتبها هي الدايركشن الاتجاه، وبعد كده بتكتب عندك الألوان اللي انت عاوزها، سواء لون او اتنين او تلاته او اللي انت عاوزه. طيب تعالى دلوقتي لما نشوف مع بعض. انا قلت لك ان انت أول حاجه بتكتبها هي الدايركشن، فأنا هقول لك هنا انا عاوز التدرج ده يكون لليمين. ممكن ان انت تكتبها لليمين، ممكن ان انت تكتبها للشمال، تكتبها لفوق، تكتبها لتحت للي انت عاوزه. وبعد الدايركشن بتكتب عندك الألوان اللي انت عاوز تعمل لها جريدينت، فأنا هكتب لك هنا مثلا اللون الاحمر وهقول لك اعمل لي تدرج مع اللون الاخضر. ممكن تكتب لونين او تلاته او اربعة او اللي انت عاوزه. طيب لو انا عملت لك ريلود هتلاقي دلوقتي ان في تدرج عندك من اللون الاحمر واللون الاخضر للشمال، التدرج ده الاتجاه بتاعه للشمال. طب لو انا عكست، لو انا كتبت لك هنا تو رايت، لو انا كتبت لك تو رايت هتلاقيها بدأت عندك من هنا وراحت عندك للرايت، راحت عندك لليمين. خلي بالك بدأت باللون اللي انت كتبته في الاول، بدأت باللون الاحمر وراحت عندك لاتجاه اليمين زي ما انت كاتب. لو انا قلت لك تو توب، معنى تو توب انها تبدأ لك من تحت وتطلع لفوق. يعني لو عملت لك ريلود هتبدأ عندك بأول لون انت كتبته وهتطلع عندك لفوق. لو انا كتبت لك تو بوطم، بالشكل ده هتروح عندك في الاتجاه المعاكس. اللي هو من فوق لتحت. خلي بالك ان هو ده الديفولت اصلا يعني لو انت ما كتبتش عندك الدايركشن بالشكل ده هيكون هو ده اصلا الديفولت بتاعك زي ما هو موضح لك هنا. قال لك دلوقتي ان الديفولت بتاعك بتاع الدايركشن هو توب تو بوطم، يعني من فوق لتحت. قال لك ان هو ده الديفولت فاليو بتاعك تمام من فوق لتحت. طيب افرض انا عاوزها تنزل لتحت على الشمال او لفوق مثلا على اليمين فاهم؟ اعمل الكلام ده ازاي؟ انا ممكن ان انا بدل ما اقول لك تو توب او تو رايت او الكلام ده كله ممكن ان انا اقول لك مثلا تو توب رايت الاتنين مع بعض، يعني ايه الكلام ده؟ يعني انا بقول لك ان اتجاه الجريديانت هيكون لفوق على اليمين، تو توب رايت. فهتلاقيها دلوقتي بص بدأت من هنا وراحت لفوق على اليمين. طيب لو انا عاوزها مثلا تنزل لتحت على الشمال، فهكتب لك هنا تو بوطم انا بقول لك لتحت يبقى تو بوطم ليفت لتحت على الشمال. فهتنزل لك هنا هتبدأ لك من هنا وهتنزل لك لتحت على الشمال. طب لو انا عاوزها لتحت على اليمين فا بكتب عندك تو بوطم رايت وبراحتك اكتب الاتجاه اللي انت عاوزه. كمان انت ممكن ان انت تريح دماغك وتكتب عندك الدرجه زي مثلا 90 درجه او 80 درجه او 180 درجه زي ما انت عاوز. ممكن ان انت تعمل كده بان انت تقول لي مثلا 90 دجري تمام 90 دجري بالشكل ده. فالو عملت لك ريلود هيجيب لك 90 درجه بالشكل ده. ممكن بقى ان انا العب فيها واخليها 30 تمام ممكن ان انا اخليها مثلا 180 180 درجه زي ما انا عاوز. وتعالى نسيبها عندنا هنا على تو رايت علشان ننتقل للجزئيه اللي بعد كده. عاوزك تفهم ان انت ممكن الالوان تكون متساويه عندك بالشكل ده. او ان انت مثلا تخلي اللون الاحمر ياخد 80% من الباك جراوند. عادي جدا ممكن ان انت تيجي هنا عند اللون الاحمر وتقول لي ان اللون الاحمر هياخد عندك 80%. فلو عملت لك ريلود هتلاقي دلوقتي ان اللون الاحمر خد عندك 80%. ممكن ان انت تكتبها بال% او ان انت تكتبها بالبكسلز. فممكن ان انا اقول لك مثلا 200 بكسل تمام بالشكل ده او ان انا اكتب لك مثلا هنا 100 بكسل تمام زي ما انت عاوز. طيب عاوزك تفهم ان انت لما بتكتب عندك 50% للون الاحمر و 50% للون الاخضر، ده هنا مش هيعمل اي جريدينت تمام؟ مفيش فرصه ان يحصل في اي تدرج في الالوان، ده اوريدي خد عندك 50% وده 50%. لو انت عاوز ان يكون في اي تدرج فبتدي مساحه للتدرج ده. فممكن اقول لك مثلا ان اللون الاحمر هياخد 20 واللون الاخضر هيبدأ عندك من 50. هيبدأ من 50 للنهايه فاهم؟ ففي فرصه عندك هنا ان يحصل اي تدرج للالوان في بعض.

[9:02]طيب عاوزك برضه تفهم ان انت ممكن ان انت تحط عندك لونين بالشكل ده. او ان انت مثلا تحط عندك تلات الوان، بلو. او ان انت تحط عندك اربع الوان او خمس الوان او اللي انت عاوزه تمام وبراحتك وزي ما انت عاوز. وممكن ان انت تفضل لون معين مثلا وتخليه مثلا ياخد 80% او اللي انت عاوزه. انا فهمتك الفكره وانت براحتك ابدع فيها زي ما انت عاوز.

[9:39]دلوقتي علشان ما تتلخبطش انت لو كتبت عندك هنا لونين. وقلت لي انا هعمل لك ريلود فهتلاقي دلوقتي ان هو قسمهم الاتنين على بعض. لو انا مثلا عاوز اللون الاحمر ياخد 90% من حجم الباك جراوند فبالفعل هياخد عندك 90%. لكن انا لو عاوز اللون الازرق هو اللي ياخد 90% وكتبت 90% فأنا كده غلطان. شايف هو هنا ما عمل لكش نفس الافكت. طيب ليه الكلام ده؟ ببساطه انا دلوقتي لما بكتب لك هنا 20%. دي معناها ايه؟ لما انا بكتب لك هنا في اللون الاحمر 20%. ببساطه دي معناها ان انت بتبدأ عندك من صفر لحد 20%. بما ان ده هو اول لون، ده معناها بالظبط ان انت بتقول له انا دلوقتي ببدا لك اهو من صفر، ببدا عندك من اول هنا لحد 20%. خلي بالك اللي بعد كده ده الجريدينت، ده التداخل، يعني هو مش لحد هنا لا، هو لحد 20% واللي بعد كده ده هو الجريدينت. وبما ان ده اول لون فمش لازم ان انت تكتب صفر. يعني سواء هتكتبها او هتكتب 20%، ده معناها 0 20%، هو فهمها كده. طيب اخر لون؟ بما ان ده اخر لون فالرقم اللي انت بتكتبه هنا لو انا مثلا كتبت 20%. بما ان ده اخر لون، فبالظبط كان انت بتقول له انت هتبدأ من 20% وهتنتهي عند 100%. فا ال 100% دي سواء انت كتبتها او ما كتبتهاش فكده كده هو هيبدأ اهو بص هيبدأ من عند ال 20% وهيكمل للأخر، هيكمل لحد ال 100%. طيب انا مش فاهمك، بص يا معلم، سيبك انت من كل الكلام ده وهشرحها لك بطريقه تانيه. دلوقتي لو انت عندك هنا مثلا تلات الوان، الأخضر والاحمر واللون الأزرق، تمام؟ وانا دلوقتي حابب ان اللون الاخضر يبدأ من صفر لحد 30. بما ان اللون الاخضر هو اول لون، فممكن ان انا اكتب 30% بس تمام؟ هو كده فهمها ان هو من صفر لحد 30، فلو انا كتبتها كده تمام هيدي لك نفس الافكت، ولو انا شلت الصفر برضه تمام وهو هو نفس الافكت بالظبط كان انت كتبته. لأن ده هو أول رقم. طيب انا مثلا عاوز تاني رقم اللي هو اللون الاحمر يبدأ من 30 وينتهي عند 50. فأقول لك ابدأ من 30 وانتهي عند 50 لان ده تاني رقم، فهيبدأ عندك من 30 اهو مفيش اي جريدينت لان المكان اللي انتهى عنده اللون الاخضر هو المكان اللي بدأ عنده اللون الاحمر، دي قيمه الاستارت اللي هي البدايه ودي قيمه الاند اللي هي النهايه، فأنا هنا بقول لك انت هتنتهي عند ال 50%. طيب انا عاوز اقول لك ان اللون الازرق هيبدأ من 50% فهكتب لك 50% وهينتهي فين؟ ممكن ان انا اكتب لك 100% او ممكن ان انا ما اكتبهاش بما ان ده هو اخر رقم، فلو عملت لك ريلود هتلاقي دلوقتي ان مفيش اي جريدينت ما بين اللون الازرق واللون الاحمر. لان القيمه اللي انتهى اهو اللي انتهى عندها اللون الاحمر هي القيمه اللي بدأ عندها اللون الازرق. ممكن لو انا عاوز شويه جريدينت اوسع الفرق ما بينهم. اخليه مثلا 10% فرق ما بين اللون الازرق واللون الاحمر فهيكون في عندك جريدينت بنسبه 10% بالشكل ده. طيب قبل ما ندخل في النقطة التانيه تعالوا دلوقتي لما نعمل اختبار مع بعض. هنفتح دلوقتي موقع ونحاول ان احنا نقلد الليينير جريدينت بتاعته. علشان على الاقل نعرف احنا فهمنا ولا ما فهمناش.

[14:30]طيب الموقع اللي قدامك ده طبعا انت هتركز على الباك جراوند، سيبك انت من كل الكلام ده والصور وكل ده مش شغلنا. انا عاوزك تركز على الليينير جريدينت اللي معمول في الباك جراوند. هتلاحظ دلوقتي ان هو عامل لينير جريدينت بدا عندك من لون معين، ايا يكن اللون ده. وانتهى عندك بدرجه شفافية. خلي بالك اللي تحت ده مش لون، دي درجه شفافية. هنحاول دلوقتي ان احنا نعملها ونشوف هنعرف نعملها ولا مش هنعرف. فتعالى دلوقتي لما نشوف مع بعض.

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