اذهب إلى المحتوى

CSS

التصنيفات الفرعية

  1. Sass

    6
    مقالات البرمجة

  2. إطار عمل Bootstrap

    18
    مقالات البرمجة

سهولة الوصول

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

تعلّمنا في المقالات السابقة مفهوم التحريك وكيفية إنشاء الحركات. قبل إنهاء هذه السلسلة، سنتريَّث قليلًا للتفكير فيما يمكننا القيام به للتأكد من أنَّ الزائرين سيستفيدون من الحركات التي نضعها في مواقعنا. هناك العديد من الطر…
من الاستخدامات الشائعة للحركات تحريك العناصر عند تمرير (scrolling) لأسفل الصفحة، لذلك سنتعلم في هذه المقالة كيفية القيام بذلك. إليك المثال التوضيحي الذي سنعمل عليه. حاول التمرير لأسفل الصفحة، وانظر كيف تظهر الاقتباسات وص…

حرب النجوم (Star War)

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

سنطبق ما تعلّمناه في المقالات السابقة، وسنصنع تحريكًا متجِهيًّا (SVG) مرحًا. سنبني عنوان فيلم حرب النجوم من إعلان "The Force Awakens". المصدر: https://www.youtube.com/watch?v=ngElkyQ6Rhs يجمع هذا المثال بين التحريك و…
تحدثنا في المقالات الماضية عن الخاصيتين transition و animation. سندمجها مع هذه المقالة في عملية التحريك لخلق تأثير التحويم (hover effect). هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات ا…

موجز الحركات

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

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

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

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

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

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

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

هذا المقال تمت كتابته بتعاون بين Joe Richardson و Robin Rendle ومجموعة من فريق موقع CSS-Tricks. أراد Joe إضافة مقال بخصوص BEM التي أحببناها وكان لدى كل منا أفكارًا وآراءً حولها، لذلك قررنا أن نتعاون سويًا لكتابة هذا المقال. …
استخدمنا في المقالات السابقة الخاصية transition للقيام بالتحريك بين حالتين، حالة عدم التحويم (non-hover state) وحالة التحويم (hover state). تحدُث تلك الانتقالات عند التحويم (تمرير مؤشر الفأرة) فوق العنصر. بيْد أنّ هذه لي…
لقد ناقشنا في المقالات السابقة كيف يخلق الانتقال (transition) الحركة عبر الانتقال من حالة إلى أخرى. في هذه المقالة سنرى ما يحدث عندما نطبق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات، وكيفية استخدام عدة انتقالات معًا…

دوال التوقيت

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

دالة التوقيت (timing function) تتحكم في وتيرة وسرعة التغيرات التي تحدث إبّان الانتقال (transition). باستخدام دوال التوقيت، يمكن جعل الانتقالات أكثر حيوية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: م…
تعلّمنا في المقالة الماضية كيفية عمل الخاصية transition، وسنلقي في هذه المقالة نظرة على خاصيات الانتقالات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل …
الآن وبعد أن قدمنا الخاصيتين transition و animation، فقد حان الوقت للتعمق أكثر في الانتقالات (transitions)، ومطالعة بعض الأمثلة. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ …
لقد ناقشنا في المقالات السابقة استخدامات وفوائد التحريك (Animation)، ووجدنا بعض مصادر الإلهام، وألقينا نظرة على الأدوات والمواقع التي قد تكون مفيدة في التطوير، وتعرّفنا على كيفية تطبيق حركة عبر نقل عنصر من حالة إلى أخرى (tran…
سنلقي في هذه الفقرة نظرة على خاصية الانتقال transition. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل ب…
سنتعلم في هذه الفقرة كيفية إنشاء تحريكات CSS ‏(CSS animations) ومشاهدتها في المتصفح. ولكن قبل البدء في كتابة الشيفرة، من الجيد أن نحدد سير العمل. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخ…
×
×
  • أضف...