Naučite da poboljšate izgled vašeg sajta
Učenje kako oblikovati oblike sa CSS-om je odličan način za poboljšanje izgleda vaše web stranice. HTML formulari su verovatno među najgorim stvarima na većini web stranica. Često su dosadni i utilitarni i ne pružaju mnogo na način stila.
Sa CSS-om, to se može promeniti. Kombinovanje CSS-a sa naprednijim oznakama oblika može donijeti neke lijepe forme.
Promenite boje
Kao i kod teksta, možete promijeniti prednje i pozadinske boje elemenata formi.
Jednostavan način za promjenu boje pozadine skoro svakog elementa formulara je korištenje imovine pozadine u ulaznoj oznaci. Na primjer, ovaj kod primjenjuje boju plave pozadine (# 9cf) na sve elemente.
input {
pozadina: # 9cf;
boja: # 000;
}
Da biste promenili boju pozadine samo određenih elemenata forme, samo dodajte textarea i izaberite stil. Na primjer:
input, textarea, izaberite {
pozadina: # 9cf;
boja: # 000;
}
Obavezno promijenite boju teksta ako mrak postane taman. Kontrastne boje pomažu u tome da elementi oblika budu čitljivi. Na primjer, tekst na tamno crvenoj boji pozadine je mnogo lakše pročitati ako je boja teksta bijela. Na primjer, ovaj kôd postavlja beli tekst na crvenu pozadinu.
input, textarea, izaberite {
background-color: # c00;
boja: #fff;
}
Možete čak postaviti boju pozadine na samu formu oznake. Zapamtite da je oznaka za oblik blok element , tako da boja ispunjava ceo pravougaonik, a ne samo lokacije elemenata.
Možete dodati žutu pozadinu elementu bloka da bi se područje izdvojilo, ovako:
formu {
pozadina: #ffc;
}
Dodajte granice
Kao i kod boja, možete promeniti granice različitih elemenata formi. Možete dodati jednu granicu oko čitavog formulara. Obavezno dodajte oblogu, ili će vam elementi za oblik biti zaglavljeni odmah pored granice.
Evo primera koda crne granice od 1 piksela sa 5 piksela obloge:
formu {
granica: 1px solid # 000;
padding: 5px;
}
Možete postaviti granice više nego samo sam obrazac. Promenite granicu ulaznih stavki kako bi ih istakli:
input {
granica: 2px pada # c00;
}
Budite pažljivi kada stavljate granice na ulazna polja pošto izgledaju manje kao ulazne kutije, a neki ljudi možda ne shvataju da mogu popuniti formular.
Kombinirajte karakteristike stila
Postavljanjem vaših elemenata za oblik uz pomisao i nekim CSS-om, možete postaviti lijep izgled koji dopunjuje dizajn i izgled vašeg sajta.