التفكير في طرق لحل نص خيال علمي ثلاثي الأبعاد
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
في تحدّي واجهة المستخدم التصويرية اليوم، يضيف @AdamArgyleInk #CSS إلى تأثير نصّي كلاسيكي لأفلام الخيال العلمي من خلال جعله تفاعليًا أثناء التنقّل. تدعم هذه الحركة الرسوم المتحركة المرتبطة بالتمرير في CSS كما هو محدَّد في أحدث مواصفات Scroll Animations 1، ويمكنك مشاهدة هذا الفيديو أثناء تمرير بعض النصوص وجعله يختفي في حواف المجرّة، أو um، إطار العرض.
الفصول:
- 0:00 - مقدمة
- 0:29 - مقدمة
- 1:00 - وقت القصة
- 2:20 - الانتقال للأعلى أو للأسفل في الصورة المتحركة
- 3:21 - HTML
- 4:00 - لغة CSS
- 8:58 - تصحيح الأخطاء
- 10:52 - الخاتمة
المراجع:
مشاهدة المزيد من تحدّيات واجهة المستخدم التصويرية ← https://goo.gle/GUIchallenges
الاشتراك في Google Chrome Developers ← https://goo.gle/ChromeDevs
arrow_back الرجوع إلى كل الحلقات
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2023-04-12 (حسب التوقيت العالمي المتفَّق عليه)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"لا يحتوي على المعلومات التي أحتاج إليها."
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"الخطوات معقدة للغاية / كثيرة جدًا."
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"المحتوى قديم."
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ثمة مشكلة في الترجمة."
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشكلة في العيّنات / التعليمات البرمجية"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غير ذلك"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"يسهُل فهم المحتوى."
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"ساعَدني المحتوى في حلّ مشكلتي."
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غير ذلك"
}]
{
"last_modified": "تاريخ التعديل الأخير: 2023-04-12 (حسب التوقيت العالمي المتفَّق عليه)",
"state": ""
}