Modulo di contatto 7 style, Make it Beautiful di CSS3
Pubblicato: 2017-08-21Il modulo di contatto 7 è il plug-in più popolare e facile da usare per tutti i siti Web wordpress. Quindi ogni volta dobbiamo personalizzare CSS per renderlo piacevole. Ma è dispendioso in termini di tempo ed è fastidioso creare stile ogni volta per ogni progetto.
Quindi ecco uno stile molto facile e pronto per l'uso per il modulo di contatto 7 usando css3.
/********** Modulo di contatto 7 Stile *************/
.wpcf7 input[tipo="testo"],
.wpcf7 input[type="email"],
.wpcf7 area di testo {
contorno:nessuno;
blocco di visualizzazione;
larghezza: 380px;
imbottitura: 4px 8px;
bordo: 1px tratteggiato #DBDBDB;
colore:#3F3F3F;
famiglia di caratteri:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
dimensione del carattere: 14px;
/*raggio-bordo*/
-webkit-raggio-bordo:2px;
-moz-raggio-bordo:2px;
raggio di confine:2px;
/*transizione*/
-transizione webkit: sfondo 0.2s lineare, box-ombra 0.6s lineare;
-moz-transizione: sfondo 0,2 s lineare, box-ombra 0,6 s lineare;
-o-transizione: sfondo 0,2 s lineare, box-ombra 0,6 s lineare;
transizione: sfondo 0,2 s lineare, box-ombra 0,6 s lineare;
}
.wpcf7 input[type="submit"],
.wpcf7 input[tipo="pulsante"] {
colore di sfondo:#725f4c;
larghezza: 100%;
allineamento testo:centro;
trasformazione del testo: maiuscolo;
}
div#wpcf7-f201-p203-o1{
colore di sfondo: #fbefde;
bordo: 1px solido #f28f27;
imbottitura:20px;
}
#wpcf7-f201-p203-o1 input[tipo="testo"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 area di testo {
sfondo:#725f4c;
colore:#FFF;
font-family:lora, "Open Sans", sans-serif;
stile carattere: corsivo;
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="pulsante"] {
colore di sfondo:#725f4c;
larghezza: 100%;
allineamento testo:centro;
trasformazione del testo: maiuscolo;
}
div.wpcf7 {
posizione: relativa;
larghezza: 440px;
indice z: 100;
imbottitura: 30px !importante;
bordo: 1px solido #383838;
sfondo: #D1D1D1;
sfondo: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
sfondo: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
sfondo: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
sfondo: gradiente lineare ripetuto(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-raggio-bordo: 8px;
-moz-raggio-bordo: 8px;
raggio di confine: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
div.wpcf7:dopo {
sfondo:#F9F9F9;
margine:10px;
posizione: assoluta;
contenuto :" ";
in basso: 0;
a sinistra: 0;
a destra: 0;
superiore: 0;
indice z: -1;
bordo: 1px #E5E5E5 solido;
-webkit-raggio-bordo:8px;
-moz-raggio-bordo:8px;
raggio di confine:8px;
}
input[tipo=invia] {
cursore:puntatore;
sfondo:nessuno;
bordo:nessuno;
font-family:'Alice', serif;
colore:#767676;
dimensione del carattere: 18px;
imbottitura: 10px 4px;
bordo: 1px solido #E0E0E0;
testo-ombra: 0px 1px 1px #E8E8E8;
sfondo: rgb(247, 247, 247);
sfondo: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
sfondo: -webkit-gradient(lineare, in alto a sinistra, in basso a sinistra, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
sfondo: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
sfondo: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
sfondo: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
sfondo: gradiente lineare (in alto, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
-webkit-raggio-bordo:5px;
-moz-raggio-bordo:5px;
raggio di confine: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;
-transizione webkit: tutti gli 0.2s lineari;
-moz-transizione: tutti gli 0,2 s lineari;
-o-transizione: tutti gli 0,2 s lineari;
transizione: tutti gli 0,2 s lineari;
}
input[tipo=invia]:passa il mouse {
colore:#686868;
colore bordo: #CECECE;
sfondo: rgb(244, 244, 244);
sfondo: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: -webkit-gradient(lineare, in alto a sinistra, in basso a sinistra, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
sfondo: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: gradiente lineare(superiore, 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 inserto, 0 0 0px 5px #E0E0E0;
box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[tipo=invia]:attivo, input[tipo=invia]:focus {
posizione:relativa;
in alto: 1px;
colore:#515151;
sfondo: rgb(234, 234, 234);
sfondo: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: -webkit-gradient(linear, in alto a sinistra, in basso a sinistra, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
sfondo: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
sfondo: gradiente lineare(superiore, 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;
}