ما نوع المواضيع التي تريد الاطلاع عليها في هذه المدونة؟ أرجو منك أن تترك ردا في صفحة التعليقات، أريد معرفة وجهات نظر مختلفة حول الموضوع.
ما الذي ترغب بقراءته هنا؟
Monday 28 Jun 20104 تقنيات يمكنك البدء باستعمالها ب CSS3 (درس للمبتدئين)
Monday 28 Jun 2010Radius
الاشكال الدائرية التي كنا نحصل عليها باستخدام صور دائرية كخلفية، الان وبفضل 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 ب CSS
Monday 28 Jun 2010القوائم (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 في الوسم
لذلك ساستعمل Float عوضا عن display:inline, السطر السابق سيصبح كالتالي:
ul li { float: right }
ويمكنني جعل الرابط Block ربما لاغير لون الخلفية في حالتي Active و Hover:
ul li a { display: block }
حصلت على قائمة افقية، ويمكنني الان تغيير شكل والوان القائمة بإضافة بعض الخصائص ب CSS3.
لمن قام بتجربة التعديل الأول (حذف overflow:auto ووضع border) سيحصل على قائمة بهذا الشكل:

لتمييز رابط معين أضيف له Class كالتالي:
<li><a class="last">مراسلة</a></li>
ولن احتاج سوى لتغيير لون الخلفية:
ul li a.last { background: #97C1C6 }

ماذا إذا أردت جعل القائمة عمودية دون أن أعيد كتابة الأكواد من الصفر؟
يكفي أن أحذف Float عن طريق:
ul li { float: inherit }
أو حتى:
ul li { float: none }

تنسيق وسوم Tags ب CSS
Thursday 24 Jun 2010مقدمة:
هذا الدرس يشرح طريقة تنسيق 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
back
Thursday 27 May 2010عودة بعد غياب طويل
آمل أن يكون الجميع بخير










