Abdullhadi JC
05-11-2012, 02:56 PM
السلام عليكم ورحمة الله وبركاته
Radius الاشكال الدائرية التي كنا نحصل عليها باستخدام صور دائرية كخلفية، الان وبفضل CSS3 يمكنك ليس فقط الحصول على هذه الدوائر في 3 ثواني، بل يمكنك التحكم ايضا في شدة الانحناء وشكله، أو إن كنت ترغب به في زواية معينة دون أخرى:
#main { -moz-border-radius:10px } ملاحظة: دائما ان كانت خاصية في CSS3 تبدأ ب -moz- فستحتاج الى كتابة ما يقابلها للمتصفحات الأخرى:
ل Chrome و Safari التي تعتمد على Webkit نكتب -webkit- بدل -moz- وبالنسبة ل Opera وباقي المتصفحات، فبدون هذا الرمز: اي border-radius سأكتفي في هذه الأمثلة بسطر واحد.
أمثلة:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/radius.png
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/radius_1277724670922.png
Rotate لقلب نص أو صندوق ونستعمل القيم الموجبة أو السالبة للاتجاهات (أسفل وأعلى):
#main { -moz-transform:rotate(2deg); } أمثلة:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/rotate-transform_1277725282596.png
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/rotate-transform_1277725302284.png
Text-Shadow أو تاثير الظل على النصوص:
h2 { text-shadow:1px 1px 1px #fff } دائما يمكنك استعمال قيم موجبة أو سالبة للاتجاهات، جرب ذلك:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/text-shadow_1277725016698.png
Box-Shadow هذه الخاصية ستعوض استعمال الصور لصنع ظل كخلفية:
#main { -moz-box-shadow:1px 1px 1px #999 } أو:
#main { -moz-box-shadow:1px 1px 1px #999, -1px -1px 1px #ddd } أمثلة:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/box-shadow_1277724901241.png
من الواضح أنه يمكن استعمال هذه الخصائص في أماكن اخرى غير هذه، ويبقى للمطور حدسه وطرقه الخاصة لاستعمال هذه التأثيرات
وتقبلو مني فائق الأحترام والتقدير.
Radius الاشكال الدائرية التي كنا نحصل عليها باستخدام صور دائرية كخلفية، الان وبفضل CSS3 يمكنك ليس فقط الحصول على هذه الدوائر في 3 ثواني، بل يمكنك التحكم ايضا في شدة الانحناء وشكله، أو إن كنت ترغب به في زواية معينة دون أخرى:
#main { -moz-border-radius:10px } ملاحظة: دائما ان كانت خاصية في CSS3 تبدأ ب -moz- فستحتاج الى كتابة ما يقابلها للمتصفحات الأخرى:
ل Chrome و Safari التي تعتمد على Webkit نكتب -webkit- بدل -moz- وبالنسبة ل Opera وباقي المتصفحات، فبدون هذا الرمز: اي border-radius سأكتفي في هذه الأمثلة بسطر واحد.
أمثلة:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/radius.png
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/radius_1277724670922.png
Rotate لقلب نص أو صندوق ونستعمل القيم الموجبة أو السالبة للاتجاهات (أسفل وأعلى):
#main { -moz-transform:rotate(2deg); } أمثلة:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/rotate-transform_1277725282596.png
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/rotate-transform_1277725302284.png
Text-Shadow أو تاثير الظل على النصوص:
h2 { text-shadow:1px 1px 1px #fff } دائما يمكنك استعمال قيم موجبة أو سالبة للاتجاهات، جرب ذلك:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/text-shadow_1277725016698.png
Box-Shadow هذه الخاصية ستعوض استعمال الصور لصنع ظل كخلفية:
#main { -moz-box-shadow:1px 1px 1px #999 } أو:
#main { -moz-box-shadow:1px 1px 1px #999, -1px -1px 1px #ddd } أمثلة:
http://www.cssbit.com/wp-content/uploads/2010/06/blog3/box-shadow_1277724901241.png
من الواضح أنه يمكن استعمال هذه الخصائص في أماكن اخرى غير هذه، ويبقى للمطور حدسه وطرقه الخاصة لاستعمال هذه التأثيرات
وتقبلو مني فائق الأحترام والتقدير.