CSS: القوائم والرسوم المتحركة

Name: CSS: القوائم والرسوم المتحركة
Author: Cliff Brozo

كيف تجعل تصفّح موقعك أسهل باستخدام القوائم والرسومات المتحرّكة

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ6.

دورة تدريبية: عند الطلب

القوائم الجزء الأول أهلاً بكم من جديد في دورة نوليدج سيتي على أوراق الأنماط الانسيابية أنا كليف بروزو، أنا معلمك واليوم توقعتم ذلك سنتحدث عن القوائم سنلقي نظرة على بعض القوائم المنسدلة سننظر إلى الرسوم المتحركة على شكل دائرة سنقوم بتمرير قائمة الشريط الجانبي سنستكشف ما هي القائمة السفلية اللاصقة وسيكون هناك جزء إضافي في النهاية هل أنتم مستعدين للتعلم؟ أنا مستعد، دعونا نبدأ سنبدأ بقائمة منسدلة بسيطة ويمكن أن تحتوي القائمة المنسدلة على العديد من القوائم المنسدلة كما تحبون في هذه الحالة، هذا على الجانب الأيمن من الشاشة سنلقي نظرة على الرسوم المتحركة وعندما يمكنكم النقر فوق قائمة الهامبرغر فإن لدينا قوائم فرعية تنبثق وسأطلب منكم محاولة تذكر بعض من هندسة الصف العاشر بينما نناقش الكائنات x وy وz في مساحة ثلاثية الأبعاد قائمة منسدلة للتنقل تخرج من الجانب عند النقر فوق قائمة فتح ولديكم خيار من القوائم الفرعية بمجرد فتح تلك القوائم بالطبع، بعد ذلك يمكنكم إغلاق القائمة القوائم السفلية اللاصقة هي الأشياء التي اعتدنا عليها إذا استخدمتم هاتفكم من قبل كل التنقلات في الأسفل ووفقًا للنموذج يمكنكم القيام بذلك على صفحة ويب أيضًا أخيرًا، تحدثت قليلاً عن جزء إضافي سننظر في كيفية وضع الأيقونات كجزء من قائمتكم دعونا نلقي نظرة على كيفية عمل كل هذه الأشياء سنبدأ بقائمة منسدلة يحتوي الترميز الخاص به على قائمة HTML غير مرتبة مباشرة التي تضم عنصرًا واحد، اثنين، ثلاثة عناصر وعنصر رابع يقوم بعمل القائمة المنسدلة لقد أنشأت فئة باسم الزر المنسدل drop button وذلك في CSS وهذا ما سأدعوه من أجل جعل خاصية القائمة المنسدلة تعمل دعونا نلقي نظرة على كيفية عملها لا شيء يحدث عندما أحوم فوق knowledge city لا شيء يحدث عندما أحوم فوق computer programming لا شيء يحدث لأيقونة navbar ولكن عندما أصل إلى CSS هذا هو الذي يحتوي على الفئة الزر المنسدل وذلك يسمح لي باختيار القوائم الفرعية من هذه القائمة عندما أحوم فوقهم، تتغير الألوان وهذا ما يتم التعامل معه في CSS ها هو الترميز الجزء الرئيسي من هذا الترميز يتعامل مع المحتوى المنسدل الباقي مشابه لقوائم التنقل العادية لكن المحتوى المنسدل لدينا يسمح لي بالتحويم فوق شيء ما وتتغير الألوان بسبب قسم التحويم هذا بينما عادةً ما يكون لون خلفيتي هو lemon chiffon في القائمة المنسدلة عندما أحوم، أقوم بتغيير لون الخلفية إلى Dodger blue يحدث ذلك في السطر 56 في CSS، يصبح اللون lemon chiffon ولون الخلفية باللون Dodger blue عندما ابتعد وأنا لا أحوم فوق تلك العناصر ثم لون الخلفية هو lemon chiffon ولون النص هو Dodger blue شيء آخر حول مربع القائمة المنسدلة هذا لدينا بعض تظليل الخلفية وكما ترون، لدي مربع ظل في السطر 41 هنا تذكرون مربع الظل من درس سابق حيث تحدثنا عنه إلى أي مدى يذهب الظل إلى اليمين إلى أي مدى للأسفل ومدى الإزاحة وما هو لون الظل في الواقع وهذا يسمح لنا بإنشاء قائمة منسدلة التالي هو قائمة دائرتنا يتم عرض قائمة دائرتنا في متصفح كامل الحجم في المنتصف لدي دائرة بها ثلاثة أسطر ويبدو أن قائمة هامبرغر عادية وقد أضفت الكائنات x وy وz لتوضيح كيف ستتحرك هذه الخطوط بالفعل كلما أحوم فوق القائمة زاد حجمها عندما أنقر عليها تظهر القوائم الفرعية عندما أنقر مرة أخرى لإغلاقه تختفي القوائم دعونا نلقي نظرة على ترميز HTML الترميز standard أبدأ بالصورة التي تظهر لي الرسم البياني الصغير من x وy وz ثم أستخدم نوع الإدخال لمربع الاختيار حتى أعرف متى تم النقر على شيء ما وعندما ينقرون على القائمة "فتح" أعلم أنه من المفترض أن أسمي هذه الوظيفة عندما ينقرون على X أعلم أنه من المفترض أن أغلق القائمة يأتي الجزء المتعلق بهندسة الصف العاشر الآن لدينا ثلاثة أسطر وهذه الأسطر الثلاثة سوف تتحرك الوسط سيختفي الاثنان الآخران سوف يدوران لأعلى ولأسفل وعليكم الانتباه جيدًا لما يحدث العناصر التي ستظهر هي العناصر الموجودة في ارتباطاتي بالصفحات الأخرى دعونا نضغط على هذا عدة مرات لنرى حدوث ذلك الآن عليكم المراقبة بعناية ما سيحدث هو الزاوية اليمنى العليا ستنخفض 45 درجة الزاوية اليمنى السفلية سترتفع بمقدار 45 درجة وهذا سيشكل الحرف X كما يحدث ذلك سيختفي الخط الأوسط لنشاهد بضع مرات انظروا عن كثب عندما أنقر على هذا عدة مرات لنلق نظرة على ترميز CSS نبدأ مع زر "فتح" ويتم ترميز الزر "فتح" بحد نصف قطري 100٪ وهذا يعطيني دائرة كاملة أقوم بإنشاء عرض وارتفاع تلك الدائرة بمقدار 80 بكسل وأضعها في الوضع المطلق أنا أنقلها بمقدار 85 بكسل من الهامش الأيسر وعندما تفتح أريد تسهيل الانتقال الآن ستلاحظون أن هذا الرمز من السطر 32 إلى 37 يبدو أنه كتب مرتين وذلك لأن المتصفحات مختلفة وبحاجة لرؤية الترميز بطرق مختلفة قسم -Web Kit- مصمم للمتصفحات التي تحتاج إلى رؤيته بهذه الطريقة لأن المتصفحات الأخرى يمكنها أن تتعامل مع التحويل المباشر سأقوم بترجمة الأشياء إلى مسافات ثلاثية الأبعاد ولدي موقع x وموقع y وموقع z إذا كنتم تعتقدون أن x ذهابًا وإيابًا، فإن y يسار ويمين وz لأعلى ولأسفل ستحصلون على فكرة عن كيفية تحرك هذه الأشياء في مسافات ثلاثية الأبعاد

متوسط مقدِّم الخدمة : Cliff Brozo 6 الدروس · 42m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

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

ما ستتعلمه

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

النقاط الرئيسية

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

الأسئلة الشائعة

ما الذي يتناوله هذا الكورس؟

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

ما أنواع القوائم التي سأتعلم بناءها؟

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

ما المهارات التي سأكتسبها من هذا الكورس؟

يتناول الكورس مهارات مثل الرسوم المتحركة، ورسوم CSS المتحركة، وأكواد CSS، وأطر عمل CSS، وCSS الموجه للكائنات، وAdobe Animate.

كيف يكون هيكل الكورس؟

ينقسم الكورس إلى ستة دروس: القوائم الجزء الأول، والقوائم الجزء الثاني، والرسوم المتحركة من الجزء الأول حتى الجزء الرابع.