كل عنصر في CSS يعتبر صندوق، وفهم مبدأ النموذج الصندوقي (BOX MODELING) سيفتح لك إمكانيات عديدة كترتيب العناصر ومحاذاتها مع بعضها البعض وإنشاء التصاميم المختلفة layouts. Block vs. inline بعض العناصر في HTML تملك خاصية افتراضية by default display:block; وبعض العناصر الأخرى تمتلك خاصية افتراضية display:inline; الفرق الجوهري هو أن الblock يمكنك تحديد العرض والطول له, أهم أمثلته الdiv, p,…
ما هو Flex box؟ CSS Flexible Box Layout، والمعروف عمومًا باسم Flexbox، يعتبر إحدى مزايا CSS3 عبارة عن طريقة تخطيط أحادية البعد لتخطيط العناصر في صفوف أو أعمدة. تلتف العناصر لملء مساحة إضافية وتقليصها لتناسب المساحات الأصغر. تشرح هذه المقالة جميع الأساسيات. لماذا Flexbox؟ لفترة طويلة، كانت الأدوات الوحيدة الموثوقة والمتوافقة مع المتصفح المتاحة لإنشاء تخطيطات CSS هي أشياء مثل floating و…
خاصية الموضع يمكن أن تساعدك بالتلاعب في مكان العنصر، على سبيل المثال: الموضع نسبي (relative) ، يقوم بوضع العنصر بالنسبة لموقعه الأصلي، في المثال بالأعلى سيتحرك العنصر للأسفل بمقدار 20px. إذا كنا نريد إضافة حركة بهذه الخصائص، يمكننا أن نرى كم سهولة التحكم تعطينا هذه الخصائص (على الرغم من أن هذه ليست فكرة جيدة، وذلك لأسباب تتعلق بالأداء): الموضع النسبي…
Thierry Blancpain هو علامة تجارية و مصمم نشيط في informal inquiry في مدينة نيويورك ، ومؤسس شريك لـ Grilli Type ، شركة سويسرية منتجة للخطوط . في حين أن هذه المقالة تنطبق على جميع خطوط الويب، فإن خطوط Grilli Type تستخدم جميعها كأمثلة في المفاهيم، خاصة تلك التي في ميزات الـ openType. أصبح من السهل استخدام خطوط خاصة بك بدلاً…
والذي يسمى أيضا وحدة الصندوق المرن (Flexible Box Module)، وهو أحد النّظَامَين العصريين للتخطيطات، إلى جانب شبكة (Grid) CSS المقدمة والذي يسمى أيضا وحدة الصندوق المرن (Flexible Box Module)، وهو أحد النّظَامَين العصريين للتخطيطات، إلى جانب شبكة (Grid) CSS. بالمقارنة مع CSS Grid (وهو ثنائي الأبعاد)، flexbox هو نموذج تخطيط أحادي البعد، أي سيتحكم بالتخطيط بناءً على الصف أو العمود…