Aprengui a millorar l'aparença del vostre lloc web
Aprendre a formular formes amb CSS és una bona manera de millorar l'aspecte del vostre lloc web. Els formularis HTML són, sens dubte, entre les coses més lletges de la majoria de les pàgines web. Sovint són avorrits i utilitaris i no ofereixen gaire en el camí de l'estil.
Amb CSS, això pot canviar. La combinació de CSS amb les etiquetes de formulari més avançades pot oferir formularis de bona aparença.
Canvia els colors
Igual que amb el text, podeu canviar els colors de primer pla i fons dels elements del formulari.
Una forma senzilla de canviar el color de fons de gairebé tots els elements del formulari és utilitzar la propietat de color de fons a l'etiqueta d'entrada. Per exemple, aquest codi aplica un color de fons blau (# 9cf) en tots els elements.
entrada {
color de fons: # 9cf;
color: # 000;
}
Per canviar el color de fons de només certs elements de formulari, només cal que afegiu textarea i seleccioneu l'estil. Per exemple:
entrada, textarea, seleccioneu {
color de fons: # 9cf;
color: # 000;
}
Assegureu-vos de canviar el color del text si fa que el color del fons sigui fosc. Els colors contrastants permeten que els elements del formulari siguin més llegibles. Per exemple, el text en un color de fons vermell fosc és molt més fàcil de llegir si el color del text és blanc. Per exemple, aquest codi col·loca el text en blanc sobre fons vermell.
entrada, textarea, seleccioneu {
color de fons: # c00;
color: #fff;
}
Fins i tot podeu posar un color de fons a l'etiqueta del formulari. Recordeu que l'etiqueta del formulari és un element de bloc , de manera que el color omple el rectangle sencer, no només les ubicacions dels elements.
Podeu afegir un fons groc a un element de bloc per destacar l'àrea, com aquesta:
forma {
background-color: #ffc;
}
Afegeix fronteres
Igual que amb els colors, podeu canviar les vores de diversos elements de formulari. Podeu afegir un sol límit al voltant del formulari sencer. Assegureu-vos d'afegir el farcit, o els elements del vostre formulari quedaran atrapats al costat de la vora.
Aquí teniu un exemple de codi per a una vora negra de 1 píxel amb 5 píxels de farciment:
forma {
border: 1px solid # 000;
farcit: 5px;
}
Podeu posar les vores més enllà del formulari en si mateix. Canvieu el límit dels elements d'entrada per destacar-los:
entrada {
frontera: 2px traçat # c00;
}
Aneu amb compte quan col·loqueu les vores a les caselles d'entrada, ja que semblen menys les caselles d'entrada, i algunes persones no poden adonar-se que poden omplir el formulari.
Combina funcions d'estil
Al configurar els vostres elements de forma amb pensament i alguns CSS, podeu configurar un bon aspecte que complementi el disseny i el disseny del vostre lloc.