| |||||
| الحدود في الـ CSS3 بعد انتشار الـ 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/ أخيراً... أعتذر عن الترجمه السيئه للمصطلحات... و باذن الله سأبدأ بتعلم الترجمه العربية لها قريبا.... الشكر الجزيل لكم.... عماد الصدر
__________________ معاً لإنترنت عربية أفضل... معلومات مهمة عن أدوار فريق العمل في مواقع الويب http://www.swalif.net/softs/showthread.php?t=120925 | |||||
|
| |||||
|
تسلم .. ومشكور على هالمعلومات الجميلة بحق عندي سؤال : هل هذه الإمكانيات غير متوفرة في الـ HTML ؟! وهل هي فقط متوفرة في الـ CSS النسخه الجديدة ؟! وإذا كانت CSS جديدة فكيف يتم دعمها من خلال المتصفحات ؟!
__________________ نحن أمة إقرأ التي لا تقرأ | |||||
|
| |||||
|
عليكم السلام موضوع رائع اخي العزيز يستاهل تثبيت
__________________ لاَ اِلَهَ اِلاَّ اَنْتَ سُبْحَانَكَ اِنِّي كُنْتُ مِنَ الظَّالِمِينَ === شبكة دندون | |||||
|
| |||||
|
موضوع قيم ومعلومات قوية جهد تستحق الشكر عليه الله يعطيك العافية
__________________ روابط لـ اشهار المواقع www.addlinkat.com انشر موقعك في الف دليل عربي ومحرك بحث عالمي مع تركيب دليل مواقع اندكسيو مؤلف من 20 الف موقع مشروح و243 تصنيف ماسنجر add_link@hotmail.com | |||||
|
| |||||
|
السلام عليكم جميعاً... مبرمج إنترنت: شكري لك على ردك.. و بالنسبه للسؤال... فالإتش تي إم إل لا يمكنها القيام بهذه الأمور... و ذلك لإنه يراد لها أن يتركز عملها الآن فقط في المحتويات... و بالنسبه للسي إس إس فتصبح هي اللغه التي تقوم بعمل التصميم و وضع العناصر في اماكنها.. فيصبح ملف الإتش تي إم إل.. عباره عن ملف معلومات و محتويات.. و ملف السي إس إس هو ملف تصميم هذه المحتويات بالصفحه... أما بالنسبه للمتصفحات... فعلى علمي أنه جميع المتصفحات مازالت لا تدعم هذه النسخه من السي إس إس .. عدا متصفح واحد و هو الموزيلا.. و هناك متصفحان آخران يدعمانها.. لكن بشكل جزئي.. و هما الفاير فوكس... و السفاري.. Fuga: شكرا لك عزيزي... و أشكر المراقبين على تثبيت الموضوع... (الصراحه ما توقعت انه يتثبت )رقيم: إنت الأروع أخوي... و تمت الإضافه.. Bomber: إن شاء الله دائما نكون عند حسن ظنك... و ما تنسونا من الدعاء... Dr-dre67: أهلا بيك مشرفنا العزيز... و أشكرك على التثبيت إن كنت انت من ثبته.. و بحال كان أي مراقب آخر .. فمازلت أريد أن أشكرك كونك أحد مشرفي هذا المنتدى... (يحاول يزبط وضعه مع الحكومه )حسام: يعطيك العافيه عمي... و يا ريت تشوفلنا كم مواقع تمبليتات سي إس إس بطريقك ... رامي: الشكر لازم يكون لرب العالمين اللي وفقني إني أكتب هذا الموضوع... تحيتي و سلامي لك... يا قلبي: الله يجزي جميع عباده الخير... و أنا متشوق أكثر منك إني أبدأ استخدامها... و الصراحه أتوقع إن الصور بالقريب رح ينعدم استخدامها في عمل تصميم الصفحه... و رح ينحصر بالإستخدامات الضروريه مثل الصور الفوتوجرافيه.. أو صور الشعارات و هذه الأمور... و إن شاء الله خير... شكري الجزيل لكم جميعا مره أخرى.. سلام عليكم عماد الصدر
__________________ معاً لإنترنت عربية أفضل... معلومات مهمة عن أدوار فريق العمل في مواقع الويب http://www.swalif.net/softs/showthread.php?t=120925 | |||||
|
| |||||
|
مبرمج إنترنت: الصراحه أخوي ما اعرف..! لكنك يمكنك انت تشوف من موقع تطوير الإنترنت اكسبلورر: http://msdn.microsoft.com/ie/ يعطيك العافيه.. ![]() mr graphics: أنا أقللك وين... هنا: http://www.pxll.com/vb/showthread.php?t=53 شكراً لك على ردك... سلام.. عماد الصدر
__________________ معاً لإنترنت عربية أفضل... معلومات مهمة عن أدوار فريق العمل في مواقع الويب http://www.swalif.net/softs/showthread.php?t=120925 | |||||
|
| |||||
|
ksa15.cOm: تسلم أخوي.... ![]() رضا: إن شاء الله بتصير جميع المواضيع بنفس هذه الفائده.. و أكثر بإذن الله.. إنترنت بلس: العفو عزيزي... و إن شاء الله نكون دائما عند حسن ظنك... شكراً لكم جميعاً... عماد الصدر
__________________ معاً لإنترنت عربية أفضل... معلومات مهمة عن أدوار فريق العمل في مواقع الويب http://www.swalif.net/softs/showthread.php?t=120925 | |||||
|
![]() |
| |
| |
| أدوات الموضوع | |
| |