İletişim formu 7 stili, CSS3 ile Güzelleştirin
Yayınlanan: 2017-08-21İletişim formu 7, tüm wordpress web siteleri için kullanımı kolay olan en popüler eklentidir. Bu yüzden her seferinde css'i güzelleştirmek için özelleştirmemiz gerekiyor. Ancak her proje için her seferinde stil oluşturmak zaman alıcı ve can sıkıcıdır.
Yani burada css3 kullanarak iletişim formu 7 için çok kolay ve kullanıma hazır stil.
/********** İletişim Formu 7 Stil *************/
.wpcf7 girişi[type="metin"],
.wpcf7 girişi[type="email"],
.wpcf7 metin alanı {
anahat:yok;
Ekran bloğu;
genişlik:380 piksel;
dolgu:4px 8px;
kenarlık:1px kesikli #DBDBDB;
renk:#3F3F3F;
yazı tipi ailesi:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
yazı tipi boyutu:14 piksel;
/*sınır yarıçapı*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
sınır yarıçapı:2px;
/*geçiş*/
-webkit-geçiş:arka plan 0.2s doğrusal, kutu-gölge 0.6s doğrusal;
-moz-geçiş:arka plan 0.2s doğrusal, kutu-gölge 0.6s doğrusal;
-o-geçiş:arka plan 0,2s doğrusal, kutu gölgesi 0,6s doğrusal;
geçiş:arka plan 0,2s doğrusal, kutu gölgesi 0,6s doğrusal;
}
.wpcf7 girişi[type="gönder"],
.wpcf7 girişi[type="düğme"] {
arka plan rengi:#725f4c;
genişlik: %100;
metin hizalama:merkez;
metin dönüştürme:büyük harf;
}
div#wpcf7-f201-p203-o1{
arka plan rengi: #fbefde;
kenarlık: 1px düz #f28f27;
dolgu:20 piksel;
}
#wpcf7-f201-p203-o1 girişi[type="metin"],
#wpcf7-f201-p203-o1 girişi[type="email"],
#wpcf7-f201-p203-o1 metin alanı {
arka plan:#725f4c;
renk:#FFF;
yazı tipi ailesi:lora, "Açık Sans", sans-serif;
yazı tipi stili:italik;
}
#wpcf7-f201-p203-o1 girişi[type="gönder"],
#wpcf7-f201-p203-o1 input[type="button"] {
arka plan rengi:#725f4c;
genişlik: %100;
metin hizalama:merkez;
metin dönüştürme:büyük harf;
}
div.wpcf7 {
pozisyon: göreceli;
genişlik: 440 piksel;
z-endeksi: 100;
dolgu: 30 piksel !önemli;
kenarlık: 1 piksel katı #383838;
arka plan: #D1D1D1;
arka plan: -moz-yinelenen-doğrusal-gradyan(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
arka plan: -webkit-yinelenen-doğrusal-gradyan(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
arka plan: -o-yinelenen-doğrusal-gradyan(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
arka plan: yinelenen-doğrusal-gradyan(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
sınır yarıçapı: 8 piksel;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
kutu gölgesi: 0px 1px 6px #3F3F3F;
}
div.wpcf7:sonra {
arka plan:#F9F9F9;
kenar boşluğu:10 piksel;
pozisyon: mutlak;
içerik :" ";
alt: 0;
sol: 0;
sağ: 0;
üst: 0;
z-endeksi: -1;
kenarlık:1px #E5E5E5 düz;
-webkit-border-radius:8px;
-moz-border-radius:8px;
sınır yarıçapı:8px;
}
girdi[tür=gönder] {
imleç:işaretçi;
arka plan:yok;
kenarlık:yok;
yazı tipi ailesi:'Alice', serif;
renk:#767676;
yazı tipi boyutu:18 piksel;
dolgu:10 piksel 4 piksel;
kenarlık:1px düz #E0E0E0;
metin gölgesi: 0px 1px 1px #E8E8E8;
arka plan: rgb(247, 247, 247);
arka plan: -moz-doğrusal-gradyan(üst, rgba(247, 247, 247, 1) %1, rgba(242, 242, 242, 1) %100);
arka plan: -webkit-gradient(doğrusal, sol üst, sol alt, renk durdurma(%1, rgba(247, 247, 247, 1)), renk durdurma(%100, rgba(242, 242, 242, 1) )));
arka plan: -webkit-linear-gradient(üst, rgba(247, 247, 247, 1) %1, rgba(242, 242, 242, 1) %100);
arka plan: -o-doğrusal-gradyan(üst, rgba(247, 247, 247, 1) %1, rgba(242, 242, 242, 1) %100);
arka plan: -ms-doğrusal-gradyan(üst, rgba(247, 247, 247, 1) %1, rgba(242, 242, 242, 1) %100);
arka plan: doğrusal gradyan(üst, rgba(247, 247, 247, 1) %1, rgba(242, 242, 242, 1) %100);
-webkit-border-radius:5px;
-moz-border-radius:5px;
sınır yarıçapı:5px;
-webkit-box-shadow:0px 1px 1px #FFF iç metin, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF iç metin, 0 0 0px 5px #EAEAEA;
kutu gölgesi:0px 1px 1px #FFF iç metin, 0 0 0px 5px #EAEAEA;
-webkit-geçiş:tüm 0.2s doğrusal;
-moz-geçiş:tüm 0.2s doğrusal;
-o-geçiş:tüm 0.2s doğrusal;
geçiş:tüm 0.2s doğrusal;
}
giriş[tür=gönder]:hover {
renk:#686868;
kenarlık rengi: #CECECE;
arka plan: rgb(244, 244, 244);
arka plan: -moz-doğrusal-gradyan(üst, rgba(244, 244, 244, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: -webkit-gradient(doğrusal, sol üst, sol alt, renk durdurma(0%, rgba(244, 244, 244, 1)), renk durdurma(100%, rgba(242, 242, 242, 1 )));
arka plan: -webkit-linear-gradient(üst, rgba(244, 244, 244, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: -o-doğrusal-gradyan(üst, rgba(244, 244, 244, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: -ms-doğrusal-gradyan(üst, rgba(244, 244, 244, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: doğrusal gradyan(üst, rgba(244, 244, 244, 1) %0, rgba(242, 242, 242, 1) %100);
-webkit-box-shadow:0px 1px 1px #FFF iç metin, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF iç metin, 0 0 0px 5px #E0E0E0;
kutu gölgesi:0px 1px 1px #FFF iç metin, 0 0 0px 5px #E0E0E0;
}
girdi[tür=gönder]:etkin, girdi[tip=gönder]:odak {
konum:göreceli;
üst:1 piksel;
renk:#515151;
arka plan: rgb(234, 234, 234);
arka plan: -moz-doğrusal-gradyan(üst, rgba(234, 234, 234, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: -webkit-gradient(doğrusal, sol üst, sol alt, renk durdurma(0%, rgba(234, 234, 234, 1)), renk durdurma(100%, rgba(242, 242, 242, 1 )));
arka plan: -webkit-linear-gradient(üst, rgba(234, 234, 234, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: -o-doğrusal-gradyan(üst, rgba(234, 234, 234, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: -ms-doğrusal-gradyan(üst, rgba(234, 234, 234, 1) %0, rgba(242, 242, 242, 1) %100);
arka plan: doğrusal gradyan(üst, rgba(234, 234, 234, 1) %0, rgba(242, 242, 242, 1) %100);
-webkit-box-shadow:0px -1px 1px #FFF iç metin, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF iç metin, 0 0 0px 5px #E0E0E0;
kutu gölgesi:0px -1px 1px #FFF iç metin, 0 0 0px 5px #E0E0E0;
}