En primer lloc, els elements formats per un formulari són elements de línea i per tant col.loca els diferents camps un al costat de l'altre. Simplement aplicant que les etiquetes label es mostraran en bloc i afeguin un marge entre línees ens millora considerablement l'aspecte:
label {
display: block;
margin: .4em 0;
}
.btn {
display: block;
margin: 1em 0;
}
Els camps no tenen padding o espai entre el text i la cantonada del camp. Afegim un padding al camp input:
input {
padding: .2em;
}
Ara volem col.locar una etiqueta i en la mateix línia el camp, mostrant tots els camps alineats. No cal fer una taula. Només fa falta posar cada element en un div i aplicar un que volem que ocupi cada etiqueta i cada camp i si ho volem alineat a l'esquerra etc..
.etiqueta {
margin: .4em 0;
}
.etiqueta label {
width: 25%;
float: left;
font-style: italic;
}
.btn {
display: block;
margin: 1em 0;
}
input {
padding: .2em;
}
Ara modificarem la mida del formulari i li aplicarem una forma. Per això, posem el formulari dins un div.
#formulario{
/*midas del formulari*/
width: 60em;
margin: 30px;
padding: 30px 30px;
/*font de la letra*/
font-family: "Verdana", "Arial", "Tahoma", sans-serif;
/*definim una ombre */
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
/*amb el prefixe moz definim para mozilla ,amb webkit para chrome, safari*/
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
/*mida de la letra*/
font-size: 0.9em;
}
Donarem forma arrodonida als camps:
input{
padding: .2em;
/*formes arrodonides*/
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Ara modificarem que quan l'usuari estigui dins del camp ( focus del camp) aquest canvii d'aspecte:
input:focus {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
/*li afegim la vorera resaltada i canvi de color, de la vorera i el fons*/
border: 2px solid #33CCFF;
background: #CCFFFF
}
I fem el mateix pel camp select:
select {
font-family: "Verdana", "Arial", "Tahoma", sans-serif;
width: 150px;
line-height: 1;
border: 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-appearance: none;
}
select:focus {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 2px solid #33CCFF;
background: #CCFFFF
}
Ara canviem els fons del fieldset. També modifiquem l'aspecte del legend:
#formulario fieldset {
padding: 0 20px 20px;
margin: 0 0 30px;
/*vorera blau turques*/
border: 2px solid #33CCFF;
/*fons blau clar*/
background: #F0F8FF;
/*voreres rodones*/
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#formulario fieldset legend {
/*color blanc*/
color: #fff;
/*color fons blau més fosc per resaltar*/
background: #66FFCC;
/*augmentem la mida*/
font-size: 1.25em;
/*en negrita*/
font-weight: bold;
/*centrem, i donem margin i paddins*/
text-align: center;
padding: 5px;
margin: 0;
width: 15em;
/*vorera blava continua*/
border: 2px solid #33CCFF;
/*voreres rodones*/
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Finalment modiquem el botó submit:
input[type="submit"] {
/*augmentem mida lletra i negreta*/
font-size: 1.2em;
font-weight: bold;
margin: 50px auto 0 auto;
width: 10em;
padding: 10px;
border: 2px solid #99FFFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
/*color de la lletra blanc amb fons blau fosc*/
color: #fff;
background: #3366CC;
-webkit-appearance: none;
}
input[type="submit"]:hover, input[type="submit"]:active {
/*al pasar el ratolí per sobre es mostre el punter i camvien el fons a blanc a lletres fucsia*/
cursor: pointer;
background: #fff;
color: #FF1493;
}
input[type="submit"]:active {
background: #eee;
/*definimos una sombra */
box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}
Després de tots el canvis aquest és el resultat final:
Cap comentari:
Publica un comentari a l'entrada