نموذج الاتصال 7 أسلوب ، اجعله جميلًا بواسطة CSS3

نموذج الاتصال 7 هو البرنامج المساعد الأكثر شيوعًا وهو سهل الاستخدام لجميع مواقع Wordpress. لذلك في كل مرة يتعين علينا تخصيص css لجعلها لطيفة. لكن الأمر يستغرق وقتًا طويلاً ومزعجًا لإنشاء أسلوب في كل مرة لكل مشروع.

لذا فهنا سهل جدًا وجاهز للاستخدام على غرار نموذج الاتصال 7 باستخدام css3.

 / ********** نموذج الاتصال 7 Style ************* /
.wpcf7 input [type = "text"] ،
.wpcf7 input [type = "email"] ،
.wpcf7 textarea {
    المخطط التفصيلي: لا شيء ؛
    العرض محجوب؛
    العرض: 380 بكسل ؛
    الحشو: 4 بكسل 8 بكسل ؛
    الحد: 1 بكسل متقطع #DBDBDB ؛
    اللون: # 3F3F3F ؛
    عائلة الخطوط: "Droid Sans" و Tahoma و Arial و Verdana sans-serif ؛
    حجم الخط: 14 بكسل ؛
    / * نصف قطر الحدود * /
    -webkit-border-radius: 2px ؛
    -موز حدود نصف قطرها: 2 بكسل ؛
    نصف قطر الحدود: 2 بكسل ؛
    /*انتقال*/
    -انتقال مجموعة الويب: خلفية خطية 0.2 ثانية ، ظل صندوقي 0.6 ثانية خطي ؛
    -موز-الانتقال: خلفية خطية 0.2 ثانية ، ظل صندوقي 0.6 ثانية خطي ؛
    - انتقال: الخلفية 0.2 ثانية خطية ، الظل المربع 0.6 ثانية خطي ؛
    الانتقال: خلفية خطية 0.2 ثانية ، ظل صندوقي خطي 0.6 ثانية ؛
}
.wpcf7 input [type = "submit"] ،
.wpcf7 input [type = "button"] { 
لون الخلفية: # 725f4c ؛
العرض: 100٪؛
محاذاة النص: مركز ؛
تحويل النص: الأحرف الكبيرة ؛
}

div # wpcf7-f201-p203-o1 { 
لون الخلفية: # fbefde ؛
الحد: 1 بكسل صلب # f28f27 ؛
الحشو: 20 بكسل ؛
}
# wpcf7-f201-p203-o1 الإدخال [type = "text"] ،
# wpcf7-f201-p203-o1 الإدخال [type = "email"] ،
# wpcf7-f201-p203-o1 textarea {
الخلفية: # 725f4c؛
اللون: #FFF ؛
font-family: lora، "Open Sans"، sans-serif؛ 
نمط الخط: مائل ؛    
}
# wpcf7-f201-p203-o1 الإدخال [type = "submit"] ،
# wpcf7-f201-p203-o1 الإدخال [type = "button"] { 
لون الخلفية: # 725f4c ؛
العرض: 100٪؛
محاذاة النص: مركز ؛
تحويل النص: الأحرف الكبيرة ؛
}



div.wpcf7 {
    الموقف: نسبي ؛
    العرض: 440 بكسل ؛
    مؤشر z: 100 ؛
    الحشو: 30 بكسل! مهم ؛
    الحد: 1 بكسل صلب # 383838 ؛
    الخلفية: # D1D1D1 ؛
    الخلفية: -moz-repeating-linear-gradient (-45deg، # EFC1CB، # EFC1CB 30px، # F2F2F2 30px، # F2F2F2 40px، # C2E8F5 40px، # C2E8F5 70px، # F2F2F2 70px، # F2F2F2 80px)؛
    الخلفية: -webkit-repeating-linear-gradient (-45deg، # EFC1CB، # EFC1CB 30px، # F2F2F2 30px، # F2F2F2 40px، # C2E8F5 40px، # C2E8F5 70px، # F2F2F2 70px، # F2F2F2 80px
    الخلفية: -o-repeating-linear-gradient (-45deg، # EFC1CB، # EFC1CB 30px، # F2F2F2 30px، # F2F2F2 40px، # C2E8F5 40px، # C2E8F5 70px، # F2F2F2 70px، # F2F2F2 80px) ؛
    الخلفية: الانحدار الخطي المتكرر (-45deg، # EFC1CB، # EFC1CB 30px، # F2F2F2 30px، # F2F2F2 40px، # C2E8F5 40px، # C2E8F5 70px، # F2F2F2 70px، # F2F2F2 80px) ؛
    -webkit-border-radius: 8px ؛
    -موز حدود نصف قطرها: 8 بكسل ؛
    نصف قطر الحدود: 8 بكسل ؛
    -webkit-box-shadow: 0px 1px 6px # 3F3F3F ؛
    -moz-box-shadow: 0px 1px 6px # 3F3F3F ؛
    مربع الظل: 0px 1px 6px # 3F3F3F ؛
}

 div.wpcf7: بعد {
    الخلفية: # F9F9F9 ؛
    الهامش: 10 بكسل ؛
    الموقف: مطلق.
    المحتوى :" "؛
    أسفل: 0؛
    اليسار: 0؛
    اليمين: 0؛
    أعلى: 0؛
    مؤشر z: -1 ؛
    الحدود: 1 بكسل # E5E5E5 صلبة ؛
    -webkit-border-radius: 8px ؛
    -موز حدود نصف قطرها: 8 بكسل ؛
    نصف قطر الحدود: 8 بكسل ؛
}

 إدخال [نوع = إرسال] {
    المؤشر: المؤشر.
    الخلفية: لا شيء ؛
    الحدود: لا شيء ؛
    عائلة الخطوط: "Alice"، serif؛
    اللون: # 767676 ؛
    حجم الخط: 18 بكسل ؛
    الحشو: 10 بكسل 4 بكسل ؛
    الحد: 1 بكسل صلب # E0E0E0 ؛
    ظل النص: 0px 1px 1px # E8E8E8 ؛
    الخلفية: rgb (247 ، 247 ، 247) ؛
    الخلفية: -moz-linear-gradient (top، rgba (247، 247، 247، 1) 1٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -webkit-gradient (خطي ، أعلى يسار ، أسفل يسار ، توقف لوني (1٪ ، rgba (247 ، 247 ، 247 ، 1)) ، توقف لوني (100٪ ، rgba (242 ، 242 ، 242 ، 1) ))) ؛
    الخلفية: -webkit-linear-gradient (top، rgba (247، 247، 247، 1) 1٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -o-linear-gradient (top، rgba (247، 247، 247، 1) 1٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -ms-linear-gradient (top، rgba (247، 247، 247، 1) 1٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: التدرج الخطي (أعلى ، rgba (247 ، 247 ، 247 ، 1) 1٪ ، rgba (242 ، 242 ، 242 ، 1) 100٪) ؛
    نصف قطر مجموعة الويب الحدودية: 5 بكسل ؛
    -موز حدود نصف قطرها: 5 بكسل ؛
    نصف قطر الحدود: 5 بكسل ؛
    -webkit-box-shadow: 0px 1px 1px #FFF inset، 0 0 0px 5px #EAEAEA ؛
    -moz-box-shadow: 0px 1px 1px #FFF أقحم ، 0 0 0px 5px #EAEAEA ؛
    مربع الظل: 0px 1px 1px #FFF أقحم ، 0 0 0px 5px #EAEAEA ؛
    -webkit- الانتقال: كل 0.2 ثانية خطية ؛
    -موز-الانتقال: كل 0.2 ثانية خطية ؛
    -o- الانتقال: كل 0.2 ثانية خطية ؛
    الانتقال: كل 0.2 ثانية خطي ؛
}
الإدخال [نوع = إرسال]: مرر {
    اللون: # 686868 ؛
    لون الحدود: #CECE ؛
    الخلفية: RGB (244 ، 244 ، 244) ؛
    الخلفية: -moz-linear-gradient (top، rgba (244، 244، 244، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -webkit-gradient (خطي ، أعلى يسار ، أسفل يسار ، توقف لوني (0٪ ، rgba (244 ، 244 ، 244 ، 1)) ، توقف لوني (100٪ ، rgba (242 ، 242 ، 242 ، 1) ))) ؛
    الخلفية: -webkit-linear-gradient (top، rgba (244، 244، 244، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -o-linear-gradient (top، rgba (244، 244، 244، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -ms-linear-gradient (top، rgba (244، 244، 244، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: التدرج الخطي (أعلى ، rgba (244 ، 244 ، 244 ، 1) 0٪ ، rgba (242 ، 242 ، 242 ، 1) 100٪) ؛
    -webkit-box-shadow: 0px 1px 1px #FFF inset، 0 0 0px 5px # E0E0E0؛
    -moz-box-shadow: 0px 1px 1px #FFF أقحم ، 0 0 0px 5px # E0E0E0 ؛
    مربع الظل: 0px 1px 1px #FFF أقحم ، 0 0 0px 5px # E0E0E0 ؛
}
الإدخال [النوع = إرسال]: نشط ، إدخال [نوع = إرسال]: التركيز {
    الموقف: نسبي ؛
    أعلى: 1 بكسل ؛
    اللون: # 515151 ؛
    الخلفية: RGB (234 ، 234 ، 234) ؛
    الخلفية: -moz-linear-gradient (top، rgba (234، 234، 234، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -webkit-gradient (خطي ، أعلى يسار ، أسفل يسار ، توقف لوني (0٪ ، rgba (234 ، 234 ، 234 ، 1)) ، توقف لوني (100٪ ، rgba (242 ، 242 ، 242 ، 1) ))) ؛
    الخلفية: -webkit-linear-gradient (top، rgba (234، 234، 234، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -o-linear-gradient (top، rgba (234، 234، 234، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: -ms-linear-gradient (top، rgba (234، 234، 234، 1) 0٪، rgba (242، 242، 242، 1) 100٪) ؛
    الخلفية: التدرج الخطي (أعلى ، rgba (234 ، 234 ، 234 ، 1) 0٪ ، rgba (242 ، 242 ، 242 ، 1) 100٪) ؛
    -webkit-box-shadow: 0px -1px 1px #FFF أقحم ، 0 0 0px 5px # E0E0E0 ؛
    -moz-box-shadow: 0px -1px 1px #FFF أقحم ، 0 0 0px 5px # E0E0E0 ؛
    مربع الظل: 0px -1px 1px #FFF أقحم ، 0 0 0px 5px # E0E0E0 ؛
}