Radius

الاشكال الدائرية التي كنا نحصل عليها باستخدام صور دائرية كخلفية، الان وبفضل CSS3 يمكنك ليس فقط الحصول على هذه الدوائر في 3 ثواني، بل يمكنك التحكم ايضا في شدة الانحناء وشكله، أو إن كنت ترغب به في زواية معينة دون أخرى:

#main {
    -moz-border-radius:10px
}

ملاحظة: دائما ان كانت خاصية في CSS3 تبدأ ب -moz- فستحتاج الى كتابة ما يقابلها للمتصفحات الأخرى:
ل Chrome و Safari التي تعتمد على Webkit نكتب -webkit- بدل -moz- وبالنسبة ل Opera وباقي المتصفحات، فبدون هذا الرمز: اي border-radius سأكتفي في هذه الأمثلة بسطر واحد.

أمثلة:

Rotate

لقلب نص أو صندوق ونستعمل القيم الموجبة أو السالبة للاتجاهات (أسفل وأعلى):

#main {
    -moz-transform:rotate(2deg);
}

أمثلة:

Text-Shadow

أو تاثير الظل على النصوص:

h2 {
  text-shadow:1px 1px 1px #fff
}

دائما يمكنك استعمال قيم موجبة أو سالبة للاتجاهات، جرب ذلك:

Box-Shadow

هذه الخاصية ستعوض استعمال الصور لصنع ظل كخلفية:

#main {
    -moz-box-shadow:1px 1px 1px #999
}

أو:

#main {
    -moz-box-shadow:1px 1px 1px #999, -1px -1px 1px #ddd
}

أمثلة:

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

القوائم (List, Navigation, Menu …) موجودة لتسهل وتسرع عملية التصفح، هناك من يضع روابط عادية <a> جنبا الى جنب، ولاجل Semantic Code وفهرسة الصفحات في محركات البحث بأفضل شكل ممكن، يفضل استعمال <ul> و <li>.

هذا الدرس البسيط يشرح طريقة تصميم قائمة أفقية (في بضع خطوات فقط):

قائمة ul:

<ul>
	<li><a>مقدمة</a></li>
	<li><a>بحث</a></li>
	<li><a>من نحن</a></li>
	<li><a>مراسلة</a></li>
</ul>

ضم الروابط داخل Block:

ul {
    overflow: auto
}

كي تتضح هذه الخطوة أستبدل السطر السابق ب:

ul {
    border:1px solid #ccc
}

الان يمكنني استعمال:

ul li {
    display: inline;
}

لكن سيتم تجاهل هذا الأمر في حال أردت جعل الرابط <a> على شكل Block
فهذا السطر سيجعل الروابط تظهر عموديا رغم أنني وضعت Display:inline في الوسم

ul li {
    float: right
}

ul li a {
    display: block
}

	<li><a class="last">مراسلة</a></li>

ul li a.last {
    background: #97C1C6
}

ul li {
    float: inherit
}

ul li {
    float: none
}

مقدمة:

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

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

الخطوات:

يمكن وضع الوسوم 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