ط§ظ„ط£ظ† | ط§ط¬ط¹ظ„ ط£ط²ط±ط§ط± ظˆ ط®ظ„ظپظٹط© ظپط±ط§ط؛ط§طھ ظ…ظ†طھط¯ط§ظƒ ط´ط¨ظٹظ‡ ط¨ط¬ظˆط¬ظ„ | ط¨طھظ‚ظ†ظٹط© CSS


’
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته


لا خير في من كتم العلم . .
الحمدلله الشيء اللي اتعلمه اعلم غيري
واتمنى غيري يعلمها لغيره . .

- - - - - - - - - -- - -


اليوم جيت لكم بحركات مشان تغير فراغات المنتدى forum ( حقل الكتابة )
و أزرار المنتدى forum لشكل شبيه بجوجل GOOGLE بل جوجل GOOGLE بعينه و بنفسه


المهم . .

نجي للمثال أولاً
جميع المثال مصور
ولا يوجد مثال حي ( لو تكرم أحد الاعضاء واعطانا مثال حي )



















- - - - - - - - - -- - -


التأثر لأزرار المنتدى forum فقط :

 رمز Code:
.button { padding-bottom: 20px; clear: both; } .button { color: #6e6e6e; font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; } .button:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .button:active { color: #000; border-color: #444; }

التأثير لأزرار و خلفية فراغات المنتدى forum :

 رمز Code:
.button { padding-bottom: 20px; clear: both; } .button { color: #6e6e6e; font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; } .button:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .button:active { color: #000; border-color: #444; } .bginput { padding-bottom: 20px; clear: both; } .bginput { color: #6e6e6e; font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; } .bginput:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .bginput:active { color: #000; border-color: #444; }




- - - - - - - - - -- - -



الحين طريقة التركيب install . .
بسيطة للغاية

ادخل css الرئيسي لستايل styleك

انزل اخر صفحة بتلاقي 2 مربع كبار
المربع الثاني حط الاكواد اللي تريده في الأعلى
ونقول مبروك الزواج عفوا الحركة



- - - - - - - - - -- - -




جميع الحقوق لديزاد باتنة 2014 (C)

>> لا تنسى الاعجاب و التقييم <<


،



















©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©