Kontaktformular 7 Stil, Make it Beautiful von CSS3
Veröffentlicht: 2017-08-21Kontaktformular 7 ist das beliebteste Plugin, das für alle WordPress-Websites einfach zu verwenden ist. Also jedes Mal müssen wir CSS anpassen, um es schön zu machen. Aber es ist zeitaufwändig und lästig, jedes Mal für jedes Projekt Stil zu erstellen.
Hier ist also ein sehr einfacher und gebrauchsfertiger Stil für das Kontaktformular 7 mit CSS3.
/*********** Kontaktformular 7 Stil *************/
.wpcf7 Eingabe[type="text"],
.wpcf7 Eingabe[type="email"],
.wpcf7-Textbereich {
Gliederung: keine;
Bildschirmsperre;
Breite: 380px;
Polsterung:4px 8px;
Rand: 1px gestrichelt #DBDBDB;
Farbe:#3F3F3F;
Schriftfamilie: 'Droid Sans', Tahoma, Arial, Verdana serifenlos;
Schriftgröße: 14px;
/*Grenzradius*/
-webkit-randradius:2px;
-moz-Randradius: 2px;
Randradius: 2px;
/*Überleitung*/
-Webkit-Übergang: Hintergrund 0,2 s linear, Box-Schatten 0,6 s linear;
-moz-Übergang: Hintergrund 0,2 s linear, Box-Schatten 0,6 s linear;
-o-Übergang: Hintergrund 0,2 s linear, Kastenschatten 0,6 s linear;
Übergang: Hintergrund 0,2 s linear, Kastenschatten 0,6 s linear;
}
.wpcf7 Eingabe[type="submit"],
.wpcf7 input[type="button"] {
Hintergrundfarbe:#725f4c;
Breite: 100 %;
Textausrichtung: Mitte;
Texttransformation: Großbuchstaben;
}
div#wpcf7-f201-p203-o1{
Hintergrundfarbe: #fbefde;
Rand: 1px fest #f28f27;
Polsterung: 20px;
}
#wpcf7-f201-p203-o1 Eingabe[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 Textbereich {
Hintergrund:#725f4c;
Farbe:#FFF;
Schriftfamilie:lora, "Open Sans", serifenlos;
Schriftstil:kursiv;
}
#wpcf7-f201-p203-o1 Eingabe[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
Hintergrundfarbe:#725f4c;
Breite: 100 %;
Textausrichtung: Mitte;
Texttransformation: Großbuchstaben;
}
div.wpcf7 {
Position: relativ;
Breite: 440px;
Z-Index: 100;
Polsterung: 30px !Wichtig;
Rand: 1px solide #383838;
Hintergrund: #D1D1D1;
Hintergrund: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
Hintergrund: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
Hintergrund: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
Hintergrund: sich wiederholender linearer Farbverlauf (-45 Grad, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-Webkit-Randradius: 8px;
-moz-Randradius: 8px;
Randradius: 8px;
-Webkit-Box-Schatten: 0px 1px 6px #3F3F3F;
-moz-Box-Schatten: 0px 1px 6px #3F3F3F;
Box-Schatten: 0px 1px 6px #3F3F3F;
}
div.wpcf7:nach {
Hintergrund:#F9F9F9;
Rand: 10px;
Position: absolut;
Inhalt :" ";
unten: 0;
links: 0;
rechts: 0;
oben: 0;
Z-Index: -1;
Rand: 1px #E5E5E5 fest;
-webkit-randradius:8px;
-moz-Randradius: 8px;
Randradius: 8px;
}
Eingabe[Typ=Senden] {
Cursor:Zeiger;
Hintergrund: keiner;
Grenze: keine;
Schriftfamilie: 'Alice', Serife;
Farbe:#767676;
Schriftgröße: 18px;
Polsterung: 10px 4px;
Rand: 1px fest #E0E0E0;
Textschatten: 0px 1px 1px #E8E8E8;
Hintergrund: rgb(247, 247, 247);
Hintergrund: -moz-linearer Gradient (oben, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1). )));
Hintergrund: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -o-linearer Gradient (oben, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -ms-linearer Gradient (oben, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: linearer Farbverlauf (oben, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %);
-webkit-randradius:5px;
-moz-Randradius: 5px;
Randradius: 5px;
-webkit-box-shadow:0px 1px 1px #FFF Einfügung, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF Einfügung, 0 0 0px 5px #EAEAEA;
Box-Schatten:0px 1px 1px #FFF Einschub, 0 0 0px 5px #EAEAEA;
-webkit-transition:alle 0,2s linear;
-moz-Übergang:alle 0,2s linear;
-o-Übergang:alle 0,2s linear;
Übergang:alle 0,2s linear;
}
input[type=submit]:hover {
Farbe:#686868;
Rahmenfarbe: #CECECE;
Hintergrund: rgb(244, 244, 244);
Hintergrund: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
Hintergrund: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -o-linearer Gradient (oben, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: linearer Farbverlauf (oben, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
-webkit-box-shadow:0px 1px 1px #FFF Einfügung, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF Einschub, 0 0 0px 5px #E0E0E0;
Box-Schatten: 0px 1px 1px #FFF Einfügung, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:aktiv, input[type=submit]:focus {
Position: relativ;
oben: 1px;
Farbe:#515151;
Hintergrund: rgb(234, 234, 234);
Hintergrund: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1). )));
Hintergrund: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -o-linearer Gradient (oben, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: -ms-linearer Gradient (oben, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
Hintergrund: linearer Farbverlauf (oben, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %);
-webkit-box-shadow:0px -1px 1px #FFF Einfügung, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF Einfügung, 0 0 0px 5px #E0E0E0;
Box-Schatten: 0px -1px 1px #FFF Einfügung, 0 0 0px 5px #E0E0E0;
}