السلام عليكم ورحمة الله وبركاته
Radius الاشكال الدائرية التي كنا نحصل عليها باستخدام صور دائرية كخلفية، الان وبفضل CSS3 يمكنك ليس فقط الحصول على هذه الدوائر في 3 ثواني، بل يمكنك التحكم ايضا في شدة الانحناء وشكله، أو إن كنت ترغب به في زواية معينة دون أخرى:
كود HTML:
#main { -moz-border-radius:10px }
ملاحظة: دائما ان كانت خاصية في CSS3 تبدأ ب -moz- فستحتاج الى كتابة ما يقابلها للمتصفحات الأخرى:
ل Chrome و Safari التي تعتمد على Webkit نكتب -webkit- بدل -moz- وبالنسبة ل Opera وباقي المتصفحات، فبدون هذا الرمز: اي border-radius سأكتفي في هذه الأمثلة بسطر واحد.
أمثلة:
Rotate لقلب نص أو صندوق ونستعمل القيم الموجبة أو السالبة للاتجاهات (أسفل وأعلى):
كود HTML:
#main { -moz-transform:rotate(2deg); }
أمثلة:
Text-Shadow أو تاثير الظل على النصوص:
كود HTML:
h2 { text-shadow:1px 1px 1px #fff }
دائما يمكنك استعمال قيم موجبة أو سالبة للاتجاهات، جرب ذلك:
Box-Shadow هذه الخاصية ستعوض استعمال الصور لصنع ظل كخلفية:
كود HTML:
#main { -moz-box-shadow:1px 1px 1px #999 }
أو:
كود HTML:
#main { -moz-box-shadow:1px 1px 1px #999, -1px -1px 1px #ddd }
أمثلة:
من الواضح أنه يمكن استعمال هذه الخصائص في أماكن اخرى غير هذه، ويبقى للمطور حدسه وطرقه الخاصة لاستعمال هذه التأثيرات
وتقبلو مني فائق الأحترام والتقدير.
