اجعل أزرار و خلفية فراغات منتداك شبيه بجوجل | بتقنية CSS

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



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

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


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


المهم . .

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







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


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



رمز 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;

}



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


رمز 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;

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

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

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






اتمنى اكون وفقت فى شرح هذا الدرس بطريقة مبسطه ، فان اصبت فمن الله وان أخطأت فمن نفسي والشيطان .
وانتظروني مع المفاجئات القادمه باذن الله راح تعجبكم
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

لا توجد تعليقات على موضوع "اجعل أزرار و خلفية فراغات منتداك شبيه بجوجل | بتقنية CSS"

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .