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

بعد الإصدار 2.1 والذي لم يتوفر له دعم كامل من قبل المتصفحات الموجودة على الساحة، وبالأخص عائلة IE، أصبح الإصدار CSS3 متوفرا للعموم، مع دعم محدود للأوامر الجديدة من Firefox والمتصفحات المبنية على محرك Webkit وأهمها Chrome و Safari.

العديد من الخصائص مثل Web Fonts، الشفافية Opacity ، تأثير الظلال Shadow أو المنحنيات Radius .. ستسهل عمل مطور الويب، وذلك لإضفاء تأثيرات جميلة دون الاضطرار لاستعمال مكتبات JS.

للاطلاع على أوامر CSS3

• HTML5 Validator
• HTML5 Reset
• HTML5 Doctor Pposts & tutorials

عند استعمال:

/* simple reset */
a  {
	text-decoration: none;
}

فلا حاجة لتكرار نفس الخاصية في أماكن أخرى، يمكنك استعمال:

text-decoration: none;

فقط إذا أردت تغيير القيمة إلى:

a  {
	text-decoration: underline;
}

كذلك لا تكرر الخاصية في كل من a و a:hover

a  {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}

يكفي أن تكتب الخاصة مرة واحدة في الوسم a:

a  {
	text-decoration: none;
	color:#999
}
a:hover {
    color:#666 /* .. */
}

أسهل طريقة لإضافة خصائص مختلفة لمتصفحات IE مباشرة في ملف Style ودون استعمال Conditional Statements هي باستعمال *html كالاتي:

p {
 border:1px solid #666
}

*html p {
 border:1px solid #f00
}

ال Fix السابق سيعمل مع IE6 وإن أردت كتابة ترقيع ل IE7 وتجاهل IE6 فأضف علامة + كالاتي:

*+html p {
 border:1px solid #f00
}

هناك طريقة مختصرة دون إعادة تكرار Class نفسه:

p {
 border:1px solid #666;
 *border:1px solid #f00
}

سيظهر الإطار الأحمر في كل من IE6 و IE7 وإذا أردت تجاهل IE6 مع ظهور الاطار الأحمر في متصفح IE7 فاكتب:

p {
 border:1px solid #666;
 *border:1px solid #f00;
 _border: 1px solid #666
}

أستعمل هذه الأدوات لإجراء Testing و Debugging:

• Web Developer 1.1.8
• IE Tab 1.5.2
• Html Validator 0.8.5.8
• Firebug 1.4.0b4

إصدار IE8 أصبح يأتي مع تحديثات Windows XP، قمت بتنصيب هذا الإصدار لتجربته، يبدو أفضل من النسخ السابقة من حيث التصفح وبعض الأفكار المقتسبة من هنا وهناك.

لكن يؤسفني أنني لم أجد الدعم الذي كنت أنتظره مع المعايير القياسية، فظهور مشاكل كثيرة في العرض، علما أن المواقع التي اختبرتها سليمة، جعلتني أخرج باستنتاج أن IE8 فعلا لا يدعم المعايير القياسية بالشكل المقبول.

أفضل الان دعم مستعملي IE6 و IE7 فلم يحن الأوان بعد لأفكر في كتابة FIX لمستعملي IE8.

• تابع مطوري الويب المهتمين ب CSS على Twitter.
• من حين لآخر زر  صفحة الكتب في SitePoint لمعرفة جديد كتب CSS.
• شارك في المجموعات المهمتة ب CSS على موقع Flickr.
• احصل على مزيد من أعمال CSS من مواقع Freelancing.