تطوير المواقع

CSS : الأعمدة المتعددة Multi-Columns


multi-columns

السلام عليكم …

في موضوع سابق بعنوان [ طريقة الكتابة بعمودين في الووردبريس ] وكان متخصصاً في الووردبريس ولكن كانت طريقتها باستخدام الجداول بواسطة اضافة [ fckeditor ] وأيضاً فهي تفيد أولئك الذين يكتبون الشعر والقصائد في تنظيمها لهم بيسر وسهولة ، أما في هذا الموضوع فالطريقة مغايرة تماماً وستكون بواسطة (CSS3 Multi-column) حيث تعتمد على تقسيم التدوينة/الموضوع إلى عدة أعمدة كما تشاء ليصبح موضوعك/تدوينتك مثل تلك الموجودة في الصحف والمجلات على شكل أعمدة ، هذه الميزة تعمل على متصفح الفايرفوكس والسفاري وكروم ولا تعمل على متصفحي اوبرا والاكسبلورر .

لنستعرض الآن الخصائص لذلك أو الكود المخصص وعليك معرفة أن
moz : تستخدم لمتصفح الفايرفوكس فقط
wibkit : تستخدم للمتصفحات الأخرى

 

شاهد المثال التالي.. [ إذا لم يظهر لك النص التالي في عمودين فعليك بتغيير متصفحك أو تحديثه 🙂 ]

جلس أشعب وابنه على مائدة طعام وبينما كانا يأكلان فإذا بابن أشعب يكثر من شرب الماء وليتهم بعد ذلك من كثير الطعام وأشعب مندهش من تصرفه حتى اذا انتهت المائدة قال له : يابني لِمَ كنت تشرب كل هذا الماء ؟ لو جعلت بدلاً من الماء طعاماً .
فقال الابن : يا أبت إن شرب الماء يوسع محلاً للطعام ويسلك ، فغضب منه أشعب وقال : لِمَ لا تنبهني إلى ذلك قبل بد الطعام يا عاق والديك.
(شاهد الصورة)

 
# الخاصية column-count
 
وهي المسئولة عن عدد الاعمدة بمعنى أنك إذا أردت أن تكون المقالة في عمودين فسنكتب القيمة 2 وإذا كانت ثلاثة أعمدة 3 … وهكذا

 
# الخاصية column-width
 
وهي مسئولة عن عرض الأعمدة بعكس تلك التي في الأعلى ، ولو وفي حالة استخدام هذه الخاصية يتم الاستغناء عن سابقتها column-count ويمكنك تحديد عرض الأعمدة كما تشاء

والمثال التالي يوضح الخاصية السابق ذكرها مع العلم أنه كلما قلت القيمة زادت عدد الأعمدة والعكس

تعتبر الابتسامة أجمل لغة في الحياة ، فهي الإضافة الطبيعية لوجه الإنسان والإشراقة المنيرة لطريق سعادته وصحته ، وهي الشعور النفسي العميق النابع من القلب بالطمأنينة والسرور والبهجة والرضا وراحة الضمير .
وهي إصلاح لمزاج الإنسان والتوازن بين عناصر جسمه بل هي علاج لعقل الانسان الباطن ولقلبه الشادن بالمحبة والخير
والإبتسامة أفضل وأصعب من الضحك لأن الابتسامة هي رد فعل للسرور بينما الضحك هو رد فعل للألم أحياناً ، والابتسامة هي فعل إرادة واقتناع وقناعة ورضا أما الضحكة فهي تنفجر لحظة أو لحظات كما ينفجر البالون وما تلبث أن تتلاشى .(شاهد الصورة)

 
فلو استخدمنا القيمة 200px بدلاً من القيمة 150px فسينتج لنا عمودين .

 
# الخاصية column-gap
 
وهي مسئولة عن المسافة بين الأعمدة ، وتستطيع توسيع وتضييق المسافة بين الاعمدة والنص بتغيير القيمة بما يناسبك شاهد المثال

 
# الخاصية column-rule
 
وتقوم بوضع حدود بين الاعمدة ويمكنك الاستعانة بنفس القيمة المُستخدمة في خاصية Border من ناحية الحجم واللون والنوع .

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

 
وفي الختام يمكنك الاطلاع على موضوع ظل النص باستخدام css .


 

الاشتراك في النشرة البريدية
اشترك في المجموعة البريدية لتصلك آخر المقالات على البريد الالكتروني
سيتم ارسال بريد الكتروني لتأكيد الاشتراك

اقرأ المقالات

تعليق واحد

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

أنت توافق على نشر تعليقك وحفظ بياناتك.

زر الذهاب إلى الأعلى