اطّلعنا في المقالة السابقة على خاصيات الحركات، ورأينا كيف أنَّها تعتمد على الإطارات المفتاحية (keyframes). سنلقي في هذه المقالة نظرة أعمق على الإطارات المفتاحية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات …

التحريك في css خاصيات الحركات

بواسطة محمد بغات، في CSS،

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

دليلك إلى منهجية BEM

بواسطة سجى الحاج، في CSS،

هذا المقال تمت كتابته بتعاون بين Joe Richardson و Robin Rendle ومجموعة من فريق موقع CSS-Tricks. أراد Joe إضافة مقال بخصوص BEM التي أحببناها وكان لدى كل منا أفكارًا وآراءً حولها، لذلك قررنا أن نتعاون سويًا لكتابة هذا المقال. تُعدُّ منهجية BEM (وهي اختصار لهذه الكلمات معًا Block و Element و Modi…
استخدمنا في المقالات السابقة الخاصية transition للقيام بالتحريك بين حالتين، حالة عدم التحويم (non-hover state) وحالة التحويم (hover state). تحدُث تلك الانتقالات عند التحويم (تمرير مؤشر الفأرة) فوق العنصر. بيْد أنّ هذه ليست الطريقة الوحيدة لبدء التحريك، سنغطي في هذه المقالة طريقتين لفعل ذلك عبر…
لقد ناقشنا في المقالات السابقة كيف يخلق الانتقال (transition) الحركة عبر الانتقال من حالة إلى أخرى. في هذه المقالة سنرى ما يحدث عندما نطبق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات، وكيفية استخدام عدة انتقالات معًا لتحسين التحريكات. هذه المقالة جزء من سلسلة من المقالات حول التحريك ف…
دالة التوقيت (timing function) تتحكم في وتيرة وسرعة التغيرات التي تحدث إبّان الانتقال (transition). باستخدام دوال التوقيت، يمكن جعل الانتقالات أكثر حيوية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات الت…
تعلّمنا في المقالة الماضية كيفية عمل الخاصية transition، وسنلقي في هذه المقالة نظرة على خاصيات الانتقالات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق ع…
الآن وبعد أن قدمنا الخاصيتين transition و animation، فقد حان الوقت للتعمق أكثر في الانتقالات (transitions)، ومطالعة بعض الأمثلة. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحركات التح…
لقد ناقشنا في المقالات السابقة استخدامات وفوائد التحريك (Animation)، ووجدنا بعض مصادر الإلهام، وألقينا نظرة على الأدوات والمواقع التي قد تكون مفيدة في التطوير، وتعرّفنا على كيفية تطبيق حركة عبر نقل عنصر من حالة إلى أخرى (transitions). هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: …
سنلقي في هذه الفقرة نظرة على خاصية الانتقال transition. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقُّل بين الحالات التحريكات الانتقالات بشكل عملي خاصيات الانتقالات دوال …
سنتعلم في هذه الفقرة كيفية إنشاء تحريكات CSS ‏(CSS animations) ومشاهدتها في المتصفح. ولكن قبل البدء في كتابة الشيفرة، من الجيد أن نحدد سير العمل. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التحويلات …
هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاس…

أفضل 25 مكتبة تحريك في CSS

بواسطة Bian Alabras، في CSS،

سنتكلم في هذا المقال عن أفضل مكاتب التحريك في ‏CSS، والتي تساعدك في حفظ وقتك عند تصميم ‏موقع الويب الخاص بك من خلال استخدامك لهذه المكاتب التي تضفي بعض الديناميكية والتفاعل إلى ‏عملك، حيث تحوي هذه المكتبات على العديد من عناصر ‏التحريك والمؤثرات لأي نوع من أنواع عناصر صفحات الويب كالنصوص، الصور، ال…
تحدثنا في الدرس السابق عن انتقال وتحول العناصر باستخدام CSS3، وفي هذا الدرس سنتحدث عن التّحريك: التحريك Animation تقوم خاصية الانتقالات transition في CSS3 بعمل عظيم من خلال بناء التفاعلات البصرية عند الانتقال من حالة إلى أخرى وهي مثالية من أجل هذا النوع من التّغييرات المبنية على تغيّر وحيد…
أهم التّطورات التي ظهرت في CSS3 هي القدرة على نقل العنصر من شكل أو مكان لآخر بالإضافة إلى تحريكها ضمن مجموعة من الخطوات المتسلسلة. منذ عدة سنوات يطالب المبرمجون العاملون في تطوير واجهات الإنترنت بإدخال ميزة القدرة على إدخال تفاعلات وتحريك العناصر من خلال html و CSS من دون الحاجة للدخول في الجا…

الأشكال Shapes في CSS

بواسطة Bian Alabras، في CSS،

مستطيلات داخل مستطيلات هذا هو التصميم المعتمد عند الغالبية في بناء صفحات الويب الخاصة بنا، ولكننا نحاول الآن كسر هذه الصورة النمطية عن أشكال CSS من خلال استخدام أشكال هندسية جديدة، ولكن هذه الأشكال Shapes لا تتفاعل أبدًا مع محتوى الشكل أو مع العناصر الأخرى داخل الصفحة. يتم الآن وضع تخصيصات جديدة …
قمنا مؤخرًا بتحديث تصميم صفحة "?Why Should You Attend" التي كانت ماتزال تحتفظ بالتصميم القديم للموقع وقد احتجنا إلى أن نوائمها مع باقي الموقع. وعندما بدأنا العمل عليها قررنا أن نحسّن تصميم هذه الصفحة بأحدث التقنيات المستخدمة في التصميم حاليًا ألا وهي: الأشكال العائمة غير المستطيلة non-rectangular …
لقد أصبح التصميم الشبكي Grid Layout في CSS يتطابق تمامًا مع اسمه، حيث يمكن من خلال CSS بناء تصميم شبكة ببعدين عمودي وأفقي يمكن أن يتم توزيع التصماميم والأغراض الأخرى على العمود والسطر. سنستعرض في هذا الدرس العديد من الأمثلة على التصميم الشبكي، ولكن لنبدأ أولًا بحل المشاكل التي واجهتنا عندما حاولنا…
تم تصميم خطاطة CSS الشّبكيّة لتعمل هي وباقي أجزاء CSS كجزء من نظام شامل لإنجاز التخطيط layout. في هذا الدّرس سنشرح كيف أنّ الشّبكة grid تتّسق مع التقنيات الأخرى التي ربّما تستخدمها سلفًا. Grid و flexbox الفرق الأساسي بين خطاطة CSS الشّبكيّة وخطاطة CSS flexbox هي أنّ flexbox تمّ تصميمه لأجل…