السلام عليكم جميعاً...
بعد انتشار الـ CSS1 و بعدها الـ CSS2... جاري العمل الآن على النسخه الثالثه من هذه التقنية...
في هذا الموضوع سأسرد بعض المميزات التي تتميز بها هذه النسخه الحديثه بالنسبة للحدود (borders)... بالإضافه إلى ما تميزت به النسختين السابقتين..
لون الحدود - border-color
-----------------------------------
border-top-color - لون الحد العلوي..
border-bottom-color - لون الحد السفلي
border-right-color - لون الحد للجهه اليمين
border-left-color - لون الحد للجهه اليسرى
border-color - لون جميع الحدود
- القيمة لهذه الخيارات يجب أن تكون عباره عن لون بغض النظر كانت هذه القيمة إسماً أو # او Rgb...
- يمكن تطبيق هذه الخيارات لجميع العناصر التي يمكن استخدامها (مثال: <p></p>)...
- بحال كان اللون trasparent ... فإن لون الخلفيه هو الذي سيكون ظاهراً...
ستايل الحدود - border-style
-----------------------------------
- لون الحد العلوي..
border-bottom-style -ستايل الحد السفلي
border-right-style - ستايل الحد للجهه اليمين
border-left-style - ستايل الحد للجهه اليسرى
border-style - ستايل جميع الحدود
- القيم التي يمكن استخدامها هي:
ملاحظه: التحكم بالمسافه بين النقطه و الأخرى .. او طول الخط مازال غير ممكن...
ملاحظه أخرى: و هو أنه لا يوجد طريقة يمكن الإعتماد عليها لتعريف المتصفح كيفية إظهار الحدود بحال كان كل منهم من نوع مختلف...
الزاوية المستديره للحدود - border-radius
------------------------------------------------
border-top-right-radius - الزاوية المستديره العليا اليمنى
border-bottom-right-radius - الزاوية المستديره السفلى اليمنى
border-bottom-left-radius - الزايويه المستديره السفلى اليسرى
border-top-left-radius - الزاويه المستديره العليا اليسار
border-radius - الزاويه المستديره لجميع الحدود
- القيم التي يجب استخدامها هي عباره عن مقاسين لطول و عرض ربع الشكل البيضاوي.. كمان موضح بالصوره التاليه:
صورة الحدود - border-image
-------------------------------------
border-top-image - صورة للحد العلوي
border-right-image - صورة للحد الأيمن
border-bottom-image - صورة للحد السفلي
border-left-image - صورة للحد الأيسر
border-image - صورة لجميع الحدود
أما للزوايا فالخيارات هي:
border-top-left-image - صورة الزاوية العليا اليسرى
border-top-right-image - صورة الزاوية العليا اليمنى
border-bottom-right-image - صورة الزاوية السفلى اليمنى
border-bottom-left-image - صورة الزاوية السفلى اليسرى
border-corner-image - صورة لجميع للزوايا الأربعه
- القيمة المفروض استخدامها هي عنوان الصورة - مثال: url(images/bg.gif)
- مثال على صور الحدود:
الظل - box-shadow
------------------------------
box-shadow - لإظهار ظل للمربع المطبق عليه هذا الخيار...
- القيم الواجب استخدامها هي طول الظل المطلوب من كل جهه... بالإضافه إلى لون الظل..
مثال على الظل:
كود:
span {border: thin solid; box-shadow: 0.2em 0.2em #CCC} و النتيجه:
اذا أردت أن تعرف المزيد عن هذا الموضوع... فتفضل إلى هذه الصفحه:
http://www.w3.org/TR/css3-border/
أخيراً... أعتذر عن الترجمه السيئه للمصطلحات... و باذن الله سأبدأ بتعلم الترجمه العربية لها قريبا....
الشكر الجزيل لكم....
عماد الصدر
يستاهل تثبيت
)
