المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تعلم تغيير شكل أزرار و فراغات منتداك إلى مظهر أجمل عبر css3


Ten
2011-12-13, 12:11 AM
السلام عليكم ورحمة الله وبركاته





بداية أوجه شكر جزيل الى الاستاذ الفاضل النبع الذي لا ينضب , الاستاذ عبدالله (Life)


الكود متوفر له نوعان :

1-لمن يريد تطبيق الكود فقط على الأزرار .
2-لمن يريد تطبيق الكود على الأزرار و الفراغات .


مثال :

http://upload.traidnt.net/upfiles/RBi65776.png


http://upload.traidnt.net/upfiles/Szu66013.png


الطريقة :

1-افتح لوحة تحكم المنتدى

2-اختر من الستايل اللي تستخدمه "CSS رئيسي"

3-في نهايته يوجد مربعين كبيرين عند الخيار "تعاريف CSS الإضافية/Additional CSS
Definitions"

4- ضع في المربع الثاني الكود التالي :

*لمن اراد التطبيق على الازرار فقط :


.button::-moz-focus-inner{ border:0;}.button:focus, .button:hover{ outline:0; border-color:#999; -moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999; cursor:pointer; cursor:hand;}.button:active{ background-image:-moz-linear-gradient(top,#cccccc,#ffffff); background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff)); filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#cccccc,endColorStr=#ffffff); -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startCo lorStr=#CCCCCC, endColorStr=#FFFFFF)";}.button{ float:none; outline:none!important; margin:0;padding:0px 6px; height:25px;background-color:#f6f6f6; border:1px solid #ccc; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-image:-moz-linear-gradient(top,#ffffff,#efefef); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef)); filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#ffffff,endColorStr=#efefef); -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startCo lorStr=#FFFFFF, endColorStr=#EFEFEF)";}
* لمن اراد التطبيق على الازرار والفراغات :


input::-moz-focus-inner{ border:0;}input:focus, input:hover{ outline:0; border-color:#999; -moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999; cursor:pointer; cursor:hand;}input:active{ background-image:-moz-linear-gradient(top,#cccccc,#ffffff); background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff)); filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#cccccc,endColorStr=#ffffff); -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startCo lorStr=#CCCCCC, endColorStr=#FFFFFF)";}input{ float:none; outline:none!important; margin:0;padding:0px 6px; height:25px;background-color:#f6f6f6; border:1px solid #ccc; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-image:-moz-linear-gradient(top,#ffffff,#efefef); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef)); filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#ffffff,endColorStr=#efefef); -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startCo lorStr=#FFFFFF, endColorStr=#EFEFEF)";}
تحياتي لكم

بصمة مشاعر
2011-12-24, 06:54 PM
شرح وافي يالغالي ما شاء الله عليك

استمر بهذا الابداع ولا تحرمنا جديدك الرائع