تصميم المربعات CSS – الجزء الثاني

19 يونيو 2009

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

كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد. أنظر المثال التالي:

.box {‬
   padding: 12px 40px 12px 3px;
   clear: both;
   width: 100%;
   margin-top: 20px;
   margin-bottom: 30px;
   float:center;
   text-align:justify;
   direction:rtl;
   border: 1px solid #bae2f0;
   font-size: 13px;
   line-height: 17px;
   background-color: #e3f4f9;
   font-weight: 500;
   -moz-border-radius: 10px;
   border-radius: 10px;
 }‬
‬

لعرض هذه المربع عليك أن تضيف إلى التدوينة (في محرر ال html) الكود التالي:

<div class="box">هذا مثال مربع. ضع هنا المعلومات التي تريد. حاول أن تستخدم لون يلائم مدونتك والمعلومة التي تريد أن تعطيها للقارئ. إستخدم كذلك الصور والإيقونات المناسبة</div>

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

أما إذا أردت أن تضع صورة فكل ما عليك القيام به هو إضافة الكود التالي إلى الدالة:

background: url(images/icon.png) no-repeat right 1px;

حيث icon.png يساوي إسم الصورة. بالطبع، يجب أن ترفع الصورة إلى مجلد images داخل مجلد القالب.

هذا كل شيئ. يمكنك تعديل وتبديل ما تريد عبر الكود الذي وفرته لك. إذا لم تعرف ال CSS حاول تغيير الخصائص وتحديد تأثيرها وستتعلم من التجربة والخطأ. بالتوفيق.

هل أعجبتك هذه التدوينة؟ يمكنك أن تشترك في خدمة الخلاصات (RSS) أو في النشرة البريدية لتحصل على آخر التدوينات أولاً بأول. الرجاء عدم النقل أو النسخ أو إعادة النشر.

إحفظ التدوينة أو شاركها مع أصدقائك:

أضف تعليق طباعة الأوسمة: "سي أس أس", برمجة و تطوير

تدوينات ومقالات متعلقة

12 تعليقات على “تصميم المربعات CSS – الجزء الثاني”

الأباتشي ¦ 19 يونيو 2009 الساعة 9:35 ص

معلومات قيّمة.. كل الشكر والتقدير..

ووردبرس بالعربي ¦ 19 يونيو 2009 الساعة 9:39 ص

أشكرك أخي الكريم..
مرحباً بك في ووردبرس بالعربي في أي وقت..

عبد الهادي ¦ 19 يونيو 2009 الساعة 9:44 ص

السلام عليكم ورحمة الله وبركاته..
مثل هذه الأمور مهمة أخي الكريم لأنها تزيد من جاذبية المحتوى بالمدونة..
فقط لدي ملاحظة أخي، فمن خلال معرفتي واطلاعي على CSS أعرف أنه لا يوجد قيمة center للخاصية float، فالقيم التي تقبلها هي left أو right أو none فقط، وهذا رابط موضح لذلك:
http://www.w3schools.com/css/pr_class_float.asp
كما أنني قرأت من أن تغيير اتجاه الكتابة إلى العربي من خلال الخاصية dir أمر غير منصوح به من خلال css، لأن ذلك الأمر يتم التحكم فيه من خلال وسوم رأس الصفحة ككل، فالمحتوى كله يصبح إتجاهه عربيا فلا ضرورة برأيي لوجود تلك الخاصية..
أرجو أن تكون ملاحظاتي في محلها أخي الكريم، وجزاك الله عنا كل خير على ما تنشره من معرفة..
مني لك أرق تحية..

ووردبرس بالعربي ¦ 19 يونيو 2009 الساعة 9:50 ص

صدقت أخي عبد الهادي..
ولكني وضعت هذه الخصائص للذين لا يعرفون ال css
الكثير من الأشخاص ينسخون الأكواد فقط ويتوقعون أن تعمل كما هي على قوالبهم للأسف..
تحياتي لك

عبد الهادي ¦ 19 يونيو 2009 الساعة 9:54 ص

مرحبا مجددا أخي الكريم..
في الحقيقة لم أعرف مقصدك من القول بأنك وضعت هذه الخصائص للذين لا يعرفون CSS؟ فإن كانوا لا يعرفون أفلا يجدر أن يكون الكود خاليا من أي خطأ؟
أشعر أنني لم أفهم قصدك والله أعلم..
في انتظار التوضيح أخي العزيز..
مني لك أرق تحية..

ووردبرس بالعربي ¦ 19 يونيو 2009 الساعة 10:09 ص

@عبد الهادي:
خذ مثلاً خاصية Float
إذا لم أضعها فمن لا يعرف ال css لن يضعها
بوضعها أتمنى أن يقوم الإخوة بتغييرها إلى left أو right حتى تتماشى مع قوالبهم
الذين يعرفون css يعرفون أنه لا حاجة إلى direction بينما ستحتاجها إذا أردت عرض المادة من اليسار إلى اليمين كما في حالة الأكواد..
فقط أردت تسهيل الأمر على الجميع..
تحياتي لك..

جوجل للعرب ¦ 19 يونيو 2009 الساعة 10:10 ص

جميل..

عبد الهادي ¦ 19 يونيو 2009 الساعة 10:32 ص

أفهم أنك منحت لصاحب المدونة حرية إختيار القيمة المناسبة للخاصية float حسب قالبه الذي يستعمل، لكن ربما كان سيكون من الأفضل لو أشرت لهم إلى هذا الأمر في التدوينة..
بالنسبة لمسألة dir فعند ضرورة تغيير الإتجاه هنا أتفق معك، إنما ملاحظتي جاءت لأنني لاحظت أن dir في المثال أعلاه أخذت القيمة rtl أي من اليمين إلى اليسار وهو الموافق للغة العربية.
شكرا على التوضيح أخي ومني لك أرق تحية..

ووردبرس بالعربي ¦ 19 يونيو 2009 الساعة 10:37 ص

@عبد الهادي:
صدقت.. سأحاول التوضيح أكثر في المرّات القادمة..
بالنسبة ل dir تساوي rtl فقد وضعتها هكذا لأنه في هذا المثال المادة معروضة من اليمين إلى اليسار بالطبع!
على كل حال هناك الكثير الذي يمكن عمله مع هذه التقنية و هذه المدونة ليست مصدر كل المعرفة.. من أراد تعلّم css هناك العديد من المدونات المتخصصة..
تحياتي لك..

عبدالله ¦ 19 يونيو 2009 الساعة 11:17 ص