Formularz kontaktowy w stylu 7, Make it Beautiful by CSS3
Opublikowany: 2017-08-21Formularz kontaktowy 7 to najpopularniejsza wtyczka, która jest łatwa w użyciu dla wszystkich stron wordpress. Więc za każdym razem musimy dostosować css, aby był przyjemny. Ale tworzenie stylu za każdym razem dla każdego projektu jest czasochłonne i denerwujące.
Więc tutaj jest bardzo łatwy i gotowy do użycia styl dla formularza kontaktowego 7 za pomocą css3.
/********** Formularz kontaktowy 7 Styl ***************/
.wpcf7 input[typ="tekst"],
.wpcf7 input[type="e-mail"],
obszar tekstowy .wpcf7 {
zarys:brak;
Blok wyświetlacza;
szerokość:380px;
wypełnienie: 4px 8px;
granica: 1px przerywana #DBDBDB;
kolor:#3F3F3F;
rodzina czcionek: „Droid Sans”, Tahoma, Arial, Verdana bezszeryfowa;
rozmiar czcionki:14px;
/*promień-granicy*/
-webkit-obramowanie-promień:2px;
-moz-obramowanie-promień:2px;
promień obramowania:2px;
/*przemiana*/
-przejście na webkit: tło 0.2s linear, box-shadow 0.6s linear;
-moz-transition: tło 0.2s linear, box-shadow 0.6s linear;
-o-przejście: tło 0.2s linear, box-shadow 0.6s linear;
przejście: tło 0.2s liniowe, box-shadow 0.6s liniowe;
}
.wpcf7 input[type="prześlij"],
.wpcf7 input[typ="przycisk"] {
kolor tła:#725f4c;
szerokość:100%;
wyrównanie tekstu:środek;
transformacja tekstu:wielkie litery;
}
div#wpcf7-f201-p203-o1{
kolor tła: #fbefde;
obramowanie: stałe 1px #f28f27;
dopełnienie:20px;
}
#wpcf7-f201-p203-o1 input[type="tekst"],
#wpcf7-f201-p203-o1 input[type="e-mail"],
#wpcf7-f201-p203-o1 obszar tekstowy {
tło:#725f4c;
kolor:#FFF;
rodzina czcionek:lora, "Open Sans", bezszeryfowa;
styl czcionki:kursywa;
}
#wpcf7-f201-p203-o1 input[type="prześlij"],
#wpcf7-f201-p203-o1 wejście[typ="przycisk"] {
kolor tła:#725f4c;
szerokość:100%;
wyrównanie tekstu:środek;
transformacja tekstu:wielkie litery;
}
div.wpcf7 {
pozycja: względna;
szerokość: 440px;
indeks z: 100;
padding: 30px !ważne;
obramowanie: 1px stałe #383838;
tło: #D1D1D1;
tło: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F);
tło: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70F2F2 80px, #F2);
tło: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F);
tło: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-obramowanie-promień: 8px;
-moz-obramowanie-promień: 8px;
promień obramowania: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
div.wpcf7:po {
tło:#F9F9F9;
margines:10px;
pozycja: bezwzględna;
zawartość :" ";
dół: 0;
po lewej: 0;
prawo: 0;
góra: 0;
indeks z: -1;
obramowanie: 1px #E5E5E5 stałe;
-webkit-obramowanie-promień:8px;
-moz-obramowanie-promień:8px;
promień obramowania:8px;
}
input[typ=prześlij] {
kursor:wskaźnik;
tło:brak;
obramowanie:brak;
rodzina czcionek:'Alice', szeryf;
kolor:#767676;
rozmiar czcionki:18px;
wypełnienie: 10px 4px;
obramowanie: 1px stałe #E0E0E0;
cień tekstu: 0px 1px 1px #E8E8E8;
tło: rgb(247, 247, 247);
background: -moz-linear-gradient(góra, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, lewa góra, lewa dół, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
background: -webkit-linear-gradient(góra, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
tło: -o-linear-gradient(góra, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(góra, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
tło: gradient liniowy(góra, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
-webkit-obramowanie-promień:5px;
-moz-obramowanie-promień:5px;
promień obramowania:5px;
-webkit-box-shadow:0px 1px 1px #Wstawka FFF, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #Wstawka FFF, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #Wstawka FFF, 0 0 0px 5px #EAEAEA;
-przejście na webkit: wszystkie 0.2s liniowe;
-moz-transition:wszystkie 0.2s liniowe;
-o-przejście: wszystkie 0.2s liniowe;
przejście:wszystkie 0.2s liniowe;
}
input[typ=prześlij]:najedź {
kolor:#686868;
kolor obramowania: #CECECE;
tło: rgb(244, 244, 244);
background: -moz-linear-gradient(góra, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, lewa góra, lewa dół, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
background: -webkit-linear-gradient(góra, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(góra, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(góra, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
tło: gradient liniowy (góra, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #Wstawka FFF, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #Wstawka FFF, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF wstawka, 0 0 0px 5px #E0E0E0;
}
input[typ=prześlij]:aktywny, input[typ=prześlij]:skup się {
pozycja:względna;
góra: 1px;
kolor:#515151;
tło: rgb(234, 234, 234);
background: -moz-linear-gradient(góra, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, lewa góra, lewa dół, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
background: -webkit-linear-gradient(góra, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(góra, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(góra, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
tło: gradient liniowy(góra, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF wstawka, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #Wstawka FFF, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF wstawka, 0 0 0px 5px #E0E0E0;
}