Formulario de contacto 7 estilo, Make it Beautiful por CSS3
Publicado: 2017-08-21El formulario de contacto 7 es el complemento más popular que es fácil de usar para todos los sitios web de wordpress. Entonces, cada vez que tenemos que personalizar css para que sea agradable. Pero lleva mucho tiempo y es molesto crear estilo cada vez para cada proyecto.
Así que aquí hay un estilo muy fácil y listo para usar para el formulario de contacto 7 usando css3.
/*********** Formulario de contacto 7 Estilo *************/
.wpcf7 entrada[tipo="texto"],
.wpcf7 entrada[tipo="correo electrónico"],
.wpcf7 área de texto {
esquema: ninguno;
bloqueo de pantalla;
ancho: 380px;
relleno: 4px 8px;
borde: 1px discontinuo #DBDBDB;
color:#3F3F3F;
familia de fuentes: 'Droid Sans', Tahoma, Arial, Verdana sans-serif;
tamaño de fuente: 14px;
/*borde-radio*/
-webkit-border-radio:2px;
-moz-border-radio:2px;
borde-radio: 2px;
/*transición*/
-webkit-transition:background 0.2s lineal, box-shadow 0.6s lineal;
-moz-transition:background 0.2s lineal, box-shadow 0.6s lineal;
-o-transition:background 0.2s lineal, box-shadow 0.6s lineal;
transición: fondo 0,2 s lineal, caja-sombra 0,6 s lineal;
}
.wpcf7 entrada[tipo="enviar"],
.wpcf7 entrada[tipo="botón"] {
color de fondo:#725f4c;
ancho: 100%;
alineación de texto: centro;
transformación de texto: mayúsculas;
}
div#wpcf7-f201-p203-o1{
color de fondo: #fbefde;
borde: 1px sólido #f28f27;
relleno: 20px;
}
#wpcf7-f201-p203-o1 entrada[tipo="texto"],
#wpcf7-f201-p203-o1 entrada[tipo="correo electrónico"],
#wpcf7-f201-p203-o1 área de texto {
fondo:#725f4c;
color:#FFF;
familia de fuentes:lora, "Open Sans", sans-serif;
estilo de fuente: cursiva;
}
#wpcf7-f201-p203-o1 entrada[tipo="enviar"],
#wpcf7-f201-p203-o1 entrada[tipo="botón"] {
color de fondo:#725f4c;
ancho: 100%;
alineación de texto: centro;
transformación de texto: mayúsculas;
}
div.wpcf7 {
posición: relativa;
ancho: 440px;
índice z: 100;
relleno: 30px !importante;
borde: 1px sólido #383838;
fondo: #D1D1D1;
fondo: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
fondo: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
fondo: -o-degradado-lineal-repetitivo(-45grados, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
fondo: gradiente lineal repetido (-45 grados, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-border-radio: 8px;
-moz-border-radio: 8px;
borde-radio: 8px;
-webkit-caja-sombra: 0px 1px 6px #3F3F3F;
-moz-caja-sombra: 0px 1px 6px #3F3F3F;
sombra de caja: 0px 1px 6px #3F3F3F;
}
div.wpcf7:después de {
fondo:#F9F9F9;
margen: 10px;
posición: absoluta;
contenido :" ";
inferior: 0;
izquierda: 0;
derecha: 0;
superior: 0;
índice z: -1;
borde:1px #E5E5E5 sólido;
-webkit-border-radio:8px;
-moz-border-radio:8px;
borde-radio: 8px;
}
entrada[tipo=enviar] {
cursor:puntero;
fondo: ninguno;
borde: ninguno;
familia tipográfica:'Alice', serif;
color:#767676;
tamaño de fuente: 18px;
relleno: 10px 4px;
borde: 1px sólido #E0E0E0;
sombra de texto: 0px 1px 1px #E8E8E8;
fondo: rgb (247, 247, 247);
fondo: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fondo: -webkit-gradiente (lineal, arriba a la izquierda, abajo a la izquierda, parada de color (1%, rgba (247, 247, 247, 1)), parada de color (100%, rgba (242, 242, 242, 1) )));
fondo: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fondo: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fondo: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fondo: gradiente lineal (arriba, rgba (247, 247, 247, 1) 1%, rgba (242, 242, 242, 1) 100%);
-webkit-border-radio:5px;
-moz-border-radio:5px;
borde-radio: 5px;
-webkit-box-shadow:0px 1px 1px #FFF recuadro, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF recuadro, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF recuadro, 0 0 0px 5px #EAEAEA;
-webkit-transition: todo 0.2s lineal;
-moz-transición: todo 0.2s lineal;
-o-transición: todos los 0,2 s lineales;
transición: todo 0.2s lineal;
}
entrada[tipo=enviar]: pasar el cursor {
color:#686868;
borde-color: #CECECE;
fondo: rgb (244, 244, 244);
fondo: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: -webkit-gradiente (lineal, arriba a la izquierda, abajo a la izquierda, parada de color (0%, rgba (244, 244, 244, 1)), parada de color (100%, rgba (242, 242, 242, 1) )));
fondo: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: gradiente lineal (arriba, rgba (244, 244, 244, 1) 0%, rgba (242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #FFF recuadro, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF recuadro, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF recuadro, 0 0 0px 5px #E0E0E0;
}
entrada[tipo=enviar]:activo, entrada[tipo=enviar]:enfoque {
posición: relativa;
arriba: 1px;
color:#515151;
fondo: rgb (234, 234, 234);
fondo: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: -webkit-gradiente (lineal, arriba a la izquierda, abajo a la izquierda, parada de color (0%, rgba (234, 234, 234, 1)), parada de color (100%, rgba (242, 242, 242, 1) )));
fondo: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fondo: gradiente lineal (arriba, rgba (234, 234, 234, 1) 0%, rgba (242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF recuadro, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF recuadro, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF recuadro, 0 0 0px 5px #E0E0E0;
}