• أهلاً بك زائر في في بيتك الثاني!
    اذا كنت وفيا لمنتدى اللمة بصدق فهو بحاجة لمساهمتك إن مشاركتك ونشاطك يبعثان الحياة فيه ليستمر وينتشر. تفاعل وشاركنا بآرائك، مواضيعك، وإبداعاتك لإثراء المحتوى ونشر الفائدة و كسب الثواب قبل أن نفقد اللمة للأبد كما وقع لباقي المنتديات لاتكتفي بالتفرج.

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

Dr.kiLL

:: عضو منتسِب ::
salamu.png





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

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

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

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

*- الأزرار

*- منطقة الكتابة

*- القوائم المنسدلة


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

مثال على ذلك :


imagebb.png

image1ho.png



بعد التحديد :


image2bh.png

image3woi.png



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

الكود :


1- لل
أزرار :

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

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

PHP:
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)";
}
3- للقوائم المنسدلة :
PHP:
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)";
}

GsNJNwuI-UM.gif



للامانة الموضوع الأصلي


wafaq.gif

 
بارك الله فيكمـ
 
بارك الله فيكمـ
 
تنبيه: نظرًا لتوقف النقاش في هذا الموضوع منذ 365 يومًا.
قد يكون المحتوى قديمًا أو لم يعد مناسبًا، لذا يُنصح بإشاء موضوع جديد.
العودة
Top Bottom