border-image فى Adobe AIR


السلام عليكم و رحمه الله تعالى وبركاته

قد أشرت فى موضوع سابق ان Adobe AIR 1.5 تدعم CSS3 ، و من أهم خصائص CSS3 التى تدعمها خاصيه border-image التى تحدد صوره للحدود ، حيث تقوم بتقسيم الصوره إلى 9 اجزاء مختلفه اربع منهم تخصصهم إلى الاطراف لا يتكرروا  و أربع اخرون للاعلى و اليمين و الشمال و السفل يتكرروا ، و جزء اخير يتم تكبيره و هو الجزء الذى فى المنتصف كما توضح الصوره التاليه :

border-image

الاجزاء 1و2و3و4 من الصوره لا يتكرروا ، و الاجزاء 5و6و7و8 من الصوره يتكرروا ، الجزء الذى فى المنتصف يتم تكبيره على حسب المساحه التى يشغلها ، top هى الازاحه من اعلى الصوره و فى حالتنا هذه 20px ، و right هى الازاحه من يمين الصوره و فى حالتنا هذه 10px ، و left هى الازاحه من شمال الصوره و فى حالتنا هذه 10px ، و bottom هى الازاحه من أسفل الصوره و فى حالتنا هذه 10px أيضا ، يتم كتابه قاعده border-image داخل adobe air بالصيغه التاليه :

-webkit-border-image : url(path) top right bottom left repeat-x repeat-y ;

تأخذ border-image 5 قيم مطلوبه ، الاولى هى مسار الصوره ، القيمه التانيه هى الازاحه من الاعلى ، القيمه التالته هى الازاحه من اليمين ، القيمه الرابعه هى الازاحه من أسفل ، القيمه الخامسه هى الازاحه من اليسار ، اما القيمه السادسه و السابعه إختياريه و توضح كيف يتمدد الجزء 5و8 و الجزئين 7و6 بالترتيب و قد تكون stretch و فى هذه الحاله ستتمدد بدون تكرار ، أو تكون tiled فى هذه الحاله ستتكرر حتى تملىء المساحه المتاحه لها ، او round ، و القيمه الافتراضيه هى stretch

border-width : 20 10 10 10 ;
-webkit-border-image
: url(simple.png) 20 10 10 10 ;

يمكنك إختصار الكود السابق بوضع قيمه ال border-width بعد علامه  forward slash / من ال border-image كما يلى :

-webkit-border-image : url(simple.png) 20 10 10 10 / 20 10 10 10 ;

و نتيجه تطبيق الكود السابق على هذا الhtml توضحه الصوره الاخيره :

<div> Keepondev testing -webkit-border-image CSS3 property, and the result is amazing, just one CSS rule instead of 9 divs and overhead CSS </div>

border-image-example

على فكره انا مفهمتهاش من أول مره ، و قعدت احاول كتير لغايه الحمد لله ظبطت معايا ، للمزيد من الامثله من هنا

الأوسمة: , , ,

2 تعليقان to “border-image فى Adobe AIR”

  1. The Crash Says:

    السلام عليكم..
    شكراً لك أخي الكريم مصطفى كنت أتمنى أن أستفيد من مقالتك لولا أني مبرمج في إطار Net Framwork.
    http://eiaso.wordpress.com/

  2. محتوى ومحاط بصور كيف اجعله بدون جداول فقط css | - سوالف سوفت Says:

    […] هذا ما تقصده border-image فى Adobe AIR __________________ Keepondev | مدونه شديد التخصص فى الجافاسكربت […]

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: