بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اهلا بجميع اعضاء وزوار ومشرفين ومساعدين مشرفين << لعيون الشباب :shiny01:
طبعا الكل يشكي ويبكي على موضوع عدم توافقية الاكسبلورر بالذات مع تقنية Css 3.0.0
وهناك متصفحات عديدة اخرى ولكن ما حصلي الشرف وشفتها :nosweat:
ومن هذي المميزات اللي نستفيدها من الـ Css3
- استخدام خطوط خاصة من الجهاز
- الحواف الدائرية
- الظل Shadow
- والكثييير الكثييير << اعد بتعب !
فاليوم صراحة قلت عيب ، ورحت ادور وابحث في الانترنت عربي انجليزي فرنسي على كل اللغات ، الا طلعلي نتيجة من البحث الصراحة مدوية للجروح :bigsmile::bigsmile:
لقيت الحل اللي راح يريحنا من عمل ترقيعات لكل متصفح ! وهذا شرط اذا كان كذا يروح على ملف لحاله وله اعداداته وما شابه !!
الحل بكل بساطة كالتالي :
طبعا سنقوم بتجربة عمل الحواف الدائرية ، والظل ، والباقي يمكنك تجربته بنفسك
كود PHP:
<div class="box2">
<div>صندوق التجارب :)</div>
</div>
طبعا بالكود السابق كتبنا اكواد صندوق جديد [ div ] وعرفنا له كلاس = box2
وكتبنا شوية كلمات داخله للتجربة
الان طبعا نقوم بالدخول لعالم الـ Css ونقوم ببدء العمل ، فيتكون لدينا الكود كالتالي :
كود PHP:
.box2 {
background: red;
width: 414px;
height: 262px;
margin: 0 auto 35px auto;
padding: 15px;
border: 11px solid #c6ac6c;
position: relative;
margin-top: 35px;
z-index: 2;
-moz-border-radius: 32px; /* Firefox | فايرفوكس */
-webkit-border-radius: 32px; /* Safari and Chrome | سفاري + جوجل كروم */
border-radius: 32px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 | اوبرا 10.5 واعلى | المتصفحات الجديدة | وانترنت اكسبلورر 6 واحدث باستخدم التقنية الجديدة */
-moz-box-shadow: 10px 10px 10px #000; /* Firefox | فايرفوكس */
-webkit-box-shadow: 10px 10px 10px #000; /* Safari and Chrome | سفاري + جوجل كروم */
box-shadow: 10px 10px 10px #000; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 | اوبرا 10.5 واعلى | المتصفحات الجديدة | وانترنت اكسبلورر 6 واحدث باستخدم التقنية الجديدة */
behavior: url(ie-css3.htc);/* This lets IE know to call the script on all elements which get the 'box' class | هنا مربط الفرس وهذا يستعمل لتعريف الاكسبلورر المتخلف عقليا بانه هناك سكربت لتطويره وعلاجه :)*/
}
طبعا ضع الاكواد السابقة كلها في صفحة واحدة وقم بتجربتها فسترى انه اصبح لديك كم بالصورة :
http://www.life5.net/?attachment_id=141
المصدر : http://www.life5.net/?p=136
تحياتي للجميع وان شاء الله اكون افدتكم