sara
عدد المساهمات : 106 تاريخ التسجيل : 19/11/2012 تاريخ الميلاد : 22/12/1988 العمر : 35 نقاط : 4430 السٌّمعَة : 2
| موضوع: تعلم تغيير شكل أزرار و فراغات منتداك إلى مظهر أجمل عبر CSS3 السبت ديسمبر 08, 2012 1:39 pm | |
| الكود متوفر له نوعان :1-لمن يريد تطبيق الكود فقط على الأزرار .2-لمن يريد تطبيق الكود على الأزرار و الفراغات .مثال :
الطريقة :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(startColorStr=#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(startColorStr=#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(startColorStr=#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(startColorStr=#FFFFFF, endColorStr=#EFEFEF)"; } تحياتي لكم | |
|