Formular de contact 7 stil, Make it Beautiful de CSS3
Publicat: 2017-08-21Formularul de contact 7 este cel mai popular plugin care este ușor de utilizat pentru toate site-urile web wordpress. Așa că de fiecare dată trebuie să personalizăm css pentru a-l face frumos. Dar este consumator de timp și este enervant să creezi stil de fiecare dată pentru fiecare proiect.
Deci, aici este un stil foarte ușor și gata de utilizat pentru formularul de contact 7 folosind css3.
/********** Formular de contact 7 Stil *************/
.wpcf7 intrare[type="text"],
.wpcf7 intrare[type="email"],
.wpcf7 textarea {
contur:niciuna;
display:bloc;
lățime: 380px;
umplutură: 4px 8px;
chenar:1px punctat #DBDBDB;
culoare:#3F3F3F;
font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
dimensiunea fontului: 14px;
/*raza-chenar*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
chenar-raza:2px;
/*tranziție*/
-webkit-transition: fundal 0.2s liniar, box-shadow 0.6s liniar;
-moz-transition: fundal 0.2s liniar, box-shadow 0.6s liniar;
-o-tranziție: fundal 0.2s liniar, caseta-umbră 0.6s liniar;
tranziție: fundal 0,2 s liniar, casetă-umbră 0,6 s liniar;
}
.wpcf7 intrare[tip="trimite"],
.wpcf7 input[type="button"] {
culoare de fundal:#725f4c;
latime:100%;
text-align:center;
text-transform:majuscule;
}
div#wpcf7-f201-p203-o1{
culoare de fundal: #fbefde;
chenar: 1px solid #f28f27;
umplutură: 20px;
}
#wpcf7-f201-p203-o1 intrare[type="text"],
#wpcf7-f201-p203-o1 intrare[type="email"],
#wpcf7-f201-p203-o1 textarea {
fundal:#725f4c;
culoare:#FFF;
font-family:lora, „Open Sans”, sans-serif;
stil font: cursiv;
}
#wpcf7-f201-p203-o1 intrare[type="submit"],
#wpcf7-f201-p203-o1 intrare[type="button"] {
culoare de fundal:#725f4c;
latime:100%;
text-align:center;
text-transform:majuscule;
}
div.wpcf7 {
poziție: relativă;
latime: 440px;
indicele z: 100;
umplutură: 30px !important;
chenar: 1px solid #383838;
fundal: #D1D1D1;
fundal: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 70px);
fundal: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 70px);
fundal: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2);
fundal: repetare-liniar-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
chenar-rază: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
casetă-umbră: 0px 1px 6px #3F3F3F;
}
div.wpcf7:după {
fundal:#F9F9F9;
margine: 10px;
poziție: absolută;
continut :" ";
jos: 0;
stânga: 0;
dreapta: 0;
sus: 0;
indicele z: -1;
chenar:1px #E5E5E5 solid;
-webkit-border-radius:8px;
-moz-border-radius:8px;
chenar-raza:8px;
}
introducere[tip=trimite] {
cursor:pointer;
fundal: niciunul;
chenar:niciuna;
font-family:'Alice', serif;
culoare:#767676;
dimensiunea fontului: 18px;
umplutură: 10px 4px;
chenar:1px solid #E0E0E0;
text-shadow: 0px 1px 1px #E8E8E8;
fundal: rgb(247, 247, 247);
fundal: -moz-linear-gradient(sus, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundal: -webkit-gradient(liniar, stânga sus, stânga jos, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
fundal: -webkit-linear-gradient(sus, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundal: -o-linear-gradient(sus, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundal: -ms-linear-gradient(sus, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundal: liniar-gradient(sus, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
-webkit-border-radius:5px;
-moz-border-radius:5px;
chenar-raza:5px;
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-webkit-tranziție:toate 0.2s liniare;
-moz-tranziție:toate 0.2s liniare;
-o-tranziție:toate 0,2s liniare;
tranziție: toate 0.2s liniară;
}
input[type=submit]:hover {
culoare:#686868;
culoare-chenar: #CECECE;
fundal: rgb(244, 244, 244);
fundal: -moz-linear-gradient(sus, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: -webkit-gradient(liniar, stânga sus, stânga jos, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
fundal: -webkit-linear-gradient(sus, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: -o-linear-gradient(sus, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: -ms-linear-gradient(sus, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: liniar-gradient(sus, 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 inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:activ, input[type=submit]:focus {
poziție:rudă;
sus:1px;
culoare:#515151;
fundal: rgb(234, 234, 234);
fundal: -moz-linear-gradient(sus, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: -webkit-gradient(liniar, stânga sus, stânga jos, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
fundal: -webkit-linear-gradient(sus, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: -o-linear-gradient(sus, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: -ms-linear-gradient(sus, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundal: liniar-gradient(sus, rgba(234, 234, 234, 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 inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}