«
»

تنسيق وسوم Tags ب CSS

الخميس 24 يونيو 2010

مقدمة:

هذا الدرس يشرح طريقة تنسيق Tags في تطبيقك أو موقعك بلمسة Web 2.0

Tags

مثال مباشر بالانجليزية
مثال مباشر بالعربية
تحميل الملفات

الخطوات:

يمكن وضع الوسوم tags في قوائم list باستعمال ul و li كما يمكن استعمال فقرة p أو كلاس عادي div وتضع فيه الوسوم مرتبة:

<div class="tags">
 <a>python</a>
 <a>scala</a>
 <a>freelance coder</a>
 <a>html5</a>
 <a>twitter oauth</a>
 <a>developer</a>
 <a>iphone</a>
 <a>adobe cs4</a></div>

ضم الوسوم (في حال كانت ستظهر في أكثر من سطر واحد) في صندوق واحد:

.tags {
  overflow: auto
}

لن أستعمل display: block لأنني لا أرغب بأن تظهر الوسوم واحدة تلو الأخرى، كما لا ارغب بأن أحدد العرض width بنفسي، لأنني لا اعرف طول الكلمات، بعضها قد يكون مركبا من كلمتين، لذلك ساستعمال float كي تظهر الوسوم مرتبة واحدة تلو الأخرى وفي نفس السطر، واضيف بعض الخصائص كاللون والحجم ..

.tags a {
 float: left;
 margin:0 4px 4px 0;
 text-indent: 1.5em;
 background:#eee;
 padding:.3em;
 color:#777;
 font-size: small;
 text-decoration: none
}
.tags a:hover {
 background-color:#999;
 color:#fff
}

يمكن اضافة Icon تمثل وسم Tag وهي منتشرة بكثرة في المدونات الأجنبية:

.tags a {
 background:#ccc url(../images/tag.png) no-repeat 5% 50%
}

ولما لا اضافة Radius ب CSS3 على الوسوم:

.tags a {
  -moz-border-radius:6px
}

وكي يظهر Radius في باقي المتصفحات نكتب:
للمتصفحات التي تعتمد على webkit ك Safari و Chrome:

.tags a {
 -webkit-border-radius:6px
}

ل Opera:

.tags a {
 border-radius:6px
}

متصفحات IE التالية: 6, 7 و 8:

.tags a {
  -ie6-border-radius:6px;
  -ie7-border-radius:6px;
  -ie8-border-radius:6px
}

الأكواد الأخيرة الخاصة ب IE مجرد مزحة، متصفحات IE لا تدعم CSS3، لكن يمكنك تجربة ملف ie-css3.htc

9 تعليقات

  1. Ahmed Bolica قال:
    يونيو 24, 2010 عند 1:14 م

    عودة حميدة

  2. حسام قال:
    يونيو 25, 2010 عند 7:13 ص

    رائع!.
    ما شاء الله عليكاخي نعيم ..

    + يعجبني حرصك على جميع المتصفحات ..
    دمت بحفظ الرحمن،

  3. حسام قال:
    يونيو 26, 2010 عند 9:47 ص

    شكراً لك
    اشتقنا لدروسك

  4. فوركس قال:
    يونيو 27, 2010 عند 8:25 ص

    درس رائع حقا، ومرحبا بك مرة اخرى

  5. Mahmoudbassam قال:
    يونيو 27, 2010 عند 9:54 ص

    روابط الأمثلة لا تعمل يا نعيم :)

    شكراً لك على هذه الجهود الرائعة ,,

    محبك

  6. admin قال:
    يونيو 28, 2010 عند 9:53 ص

    تم تعديل الروابط، شكرا.

  7. أحمد الكثيري قال:
    يونيو 29, 2010 عند 2:44 م

    درس جميل والمثال مرتب كذلك،

    كان لدي إستفسار أخي نعيم بخصوص تدعيم CSS3 عن طريق ملف ie-css3.htc هل جربت أن تقوم بذلك؟ وهل واجهت صعوبة في تطبيق ذلك على الخادم المحلي؟

    لأني قرأت أنه يجب أن يدعم الخادم إستقبال ملفات htc كذلك هناك شيء سيء في متصفح الإكسبلورر نفسه وهو إعتبار هذا الملف كشيء غريب فلا يظهر إلا عندما يوافق عليه المستخدم! (مثل إعدادات activeX).

  8. مختارات من تويتر #10 قال:
    يوليو 6, 2010 عند 8:56 ص

    [...] تنسيق وسوم Tags ب CSS [...]

  9. مختارات من تويتر #10 | الخلاصات العربية قال:
    يوليو 6, 2010 عند 7:41 م

    [...] تنسيق وسوم Tags ب CSS [...]

التعليقات مغلقة.