يمكن رسم الأشكال الهندسية من خلال وضع عدة وسوم <div> في الصفحة و من ثم إضافة خصائص الطول، العرض، اللون، الدوران و غيرها من الخصائص التي تتيحها لنا لغة CSS. في هذ المقال ستتعرف على عدة طرق لرسم الأشكال الهندسية بواسطة لغتي HTML و CSS.
في هذا المقال ستتعلم كيف تجعل العنصر يدور في مكانه عند تمرير مؤشر الماوس (Mouse Cursor) فوقه بخطوات بسيطة جداً. بشكل عام لجعل العنصر قابل للدوران يجب أن يكون له حجم بحيث نستطيع تمرير الماوس فوقه و يجب تحديد خلال كم جزء من الثانية نريد أن يدور العنصر خلال نفسه و هذا الأمر نفعله بإضافة الخاصية transition للعنصر. الآن لجعله يدور عند تمرير مؤشر الماوس فوقه دورة كاملة حول نفسه (أي 360 درجة) فإننا نحتاج فقط إضافة الخاصية transform: rotate(360deg) له.
في هذا المقال ستتعرف على الدوال الموجودة في الكلاس console و التي يمكن استخدامها لطباعة المحتوى في كونسول المتصفح بأشكال مختلفة خطوة خطوة.
وضع نص عشوائي في وسم <p> وضع الصورة التي نريد دمجها مع نص الوسم <p> كخلفية له بواسطة خصائص CSS. وضع بلوك غير مرئي أمام الوسم <p> بواسطة خصائص CSS حتى نجعل النص الموجود على الصورة لا يمكن لمسه و بالتالي تصبح الصورة و الكتابة كأنها فعلاً صورة واحد.
في هذا المقال ستتعلم كيف تقوم بوضع العنصر في وسط الصفحة و إظهار حدود متحركة حوله بواسطة HTML و CSS فقط.
إن التعليقات تسهل قراءة الكود البرمجي وتنظمه حتى يتمكن فريق العمل أو أي مبرمج آخر من فهم المطلوب من هذا الكود البرمجي بسهولة أو حتى تتذكر لم كتبت هذا الكود إن عدت إليه بعد فترة كبيرة من الزمن.
Bootstrap عبارة عن إطار عمل (Framework) مجاني يستخدم لتسهيل عملية تصميم صفحات الويب على المطور حيث يوفر له كلاسات CSS جاهزة يمكنه إستخدامها لإظهار العناصر (Components) التي نضيفها في الصفحات بشكل جميل جداً و متجاوب مع حجم الصفحة (Responsive) مثل الأزرار (Buttons), مربعات النص (Text Fields), القوائم المنسدلة (Drop Down Menus) و غيرها من الأشياء المساعدة مثل رسائل التنبيهات التي نظهرها للمستخدم.
جميع الحقوق محفوظة لموقع هرمش. لا يسمح باستخدام الشروحات لأغراض تجارية، إجراء تعديل عليها، نشرها في موقع آخر، وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع كما أن المحتوى مسجل بواسطة DMCA و في حال قيامك بمخالفة حقوق النشر سنضطر آسفين لاتخاذ الإجراءات اللازمة.
HTML