السلام عليكم …
في موضوع سابق بعنوان [ طريقة الكتابة بعمودين في الووردبريس ] وكان متخصصاً في الووردبريس ولكن كانت طريقتها باستخدام الجداول بواسطة اضافة [ fckeditor ] وأيضاً فهي تفيد أولئك الذين يكتبون الشعر والقصائد في تنظيمها لهم بيسر وسهولة ، أما في هذا الموضوع فالطريقة مغايرة تماماً وستكون بواسطة (CSS3 Multi-column) حيث تعتمد على تقسيم التدوينة/الموضوع إلى عدة أعمدة كما تشاء ليصبح موضوعك/تدوينتك مثل تلك الموجودة في الصحف والمجلات على شكل أعمدة ، هذه الميزة تعمل على متصفح الفايرفوكس والسفاري وكروم ولا تعمل على متصفحي اوبرا والاكسبلورر .
لنستعرض الآن الخصائص لذلك أو الكود المخصص وعليك معرفة أن
moz : تستخدم لمتصفح الفايرفوكس فقط
wibkit : تستخدم للمتصفحات الأخرى
|
1 2 3 4 5 6 7 8 |
-moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #333; -webkit-column-rule: 1px solid #333; |
شاهد المثال التالي.. [ إذا لم يظهر لك النص التالي في عمودين فعليك بتغيير متصفحك أو تحديثه 🙂 ]
فقال الابن : يا أبت إن شرب الماء يوسع محلاً للطعام ويسلك ، فغضب منه أشعب وقال : لِمَ لا تنبهني إلى ذلك قبل بد الطعام يا عاق والديك.
(شاهد الصورة)
# الخاصية column-count
وهي المسئولة عن عدد الاعمدة بمعنى أنك إذا أردت أن تكون المقالة في عمودين فسنكتب القيمة 2 وإذا كانت ثلاثة أعمدة 3 … وهكذا
|
1 2 |
-moz-column-count: 2; -webkit-column-count: 2; |
# الخاصية column-width
وهي مسئولة عن عرض الأعمدة بعكس تلك التي في الأعلى ، ولو وفي حالة استخدام هذه الخاصية يتم الاستغناء عن سابقتها column-count ويمكنك تحديد عرض الأعمدة كما تشاء
|
1 2 |
-moz-column-width: 150px; -webkit-column-width: 150px; |
والمثال التالي يوضح الخاصية السابق ذكرها مع العلم أنه كلما قلت القيمة زادت عدد الأعمدة والعكس
وهي إصلاح لمزاج الإنسان والتوازن بين عناصر جسمه بل هي علاج لعقل الانسان الباطن ولقلبه الشادن بالمحبة والخير
والإبتسامة أفضل وأصعب من الضحك لأن الابتسامة هي رد فعل للسرور بينما الضحك هو رد فعل للألم أحياناً ، والابتسامة هي فعل إرادة واقتناع وقناعة ورضا أما الضحكة فهي تنفجر لحظة أو لحظات كما ينفجر البالون وما تلبث أن تتلاشى .(شاهد الصورة)
فلو استخدمنا القيمة 200px بدلاً من القيمة 150px فسينتج لنا عمودين .
# الخاصية column-gap
وهي مسئولة عن المسافة بين الأعمدة ، وتستطيع توسيع وتضييق المسافة بين الاعمدة والنص بتغيير القيمة بما يناسبك شاهد المثال
|
1 2 |
-moz-column-gap: 20px; -webkit-column-gap: 20px; |
# الخاصية column-rule
وتقوم بوضع حدود بين الاعمدة ويمكنك الاستعانة بنفس القيمة المُستخدمة في خاصية Border من ناحية الحجم واللون والنوع .
|
1 2 |
-moz-column-rule:1px solid #000; -webkit-column-rule:1px solid #000; |
وقد اكتشف العلماء أخيراً أن الغدة الصنوبرية في الدماغ تقوم بإفراز مادة تسمى الميلاتونين التي تؤثر تأثيراً مباشراً في عملية النوم ، وأن الظلام يزيد إفراز هذه المادة بعكس الضوء الذي يثبطه .
(شاهد الصورة)
وفي الختام يمكنك الاطلاع على موضوع ظل النص باستخدام css .
يعطيك الف عافيه صراحه موضوع استفدت منه الكثير الله يوفقك
ويزيدك علم ومعرفه
تحياتي لك
امل الخليج