كود css3 تجميلي [ للأزرار , منطقة الكتابة , القوائم المنسدلة ] لاضافة لمسة عصرية

[Dr.kiLL]

[B][IMG]http://shup.com/Shup/528989/salamu.png[/IMG]




جيتكم اليوم بكود CSS3 تجميلي ، لاضافة لمسة عصرية على قوالب المنتدى أو الموقع ،

هذا الكود يتم اضافته في تعاريف CSS الإضافية / Additional CSS Definitions

الخاصة بالمنتدى ؛

متوفر لثلاث قوالب ؛

[B]*- [/B][B]الأزرار [/B]

[B]*- منطقة الكتابة [/B]

[B]*- القوائم المنسدلة[/B]
​

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

مثال على ذلك :


[IMG]http://shup.com/Shup/531502/imagebb.png[/IMG]
[IMG]http://shup.com/Shup/531503/image1ho.png[/IMG]


بعد التحديد :


[IMG]http://shup.com/Shup/531504/image2bh.png[/IMG]
[IMG]http://shup.com/Shup/531505/image3woi.png[/IMG]


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

[COLOR=DarkRed]الكود :


1- للأزرار :

[/B][/COLOR]

.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)";
}

[B] 2- لمنطقة الكتابة :

[/B]

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;
}

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)";
}

[B]3- للقوائم المنسدلة :[/B]

select::-moz-focus-inner{
 border:0;
}

select:focus, select: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;
}

select: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)";
}

select{
 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)";
}

[B][IMG]http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif[/IMG]


[/B]للامانة الموضوع الأصلي


[B][IMG]http://shup.com/Shup/528990/wafaq.gif[/IMG] [/B]
​

 

[sql]

بارك الله فيكمـ
​

 

[Dr.kiLL]

بارك الله فيكمـ
​

و فيكم بركة

:re_gards:
​

 

[djatv]

بارك الله فيكمـ

 

[Dr.kiLL]

بارك الله فيكمـ

و فيكم بركة