Opi parantamaan sivustosi ulkoasua
Oppiminen muotoilemalla lomakkeita CSS: llä on erinomainen tapa parantaa sivustosi ulkoasua. HTML-lomakkeet ovat epäilemättä riveimpiä asioita useimmilla verkkosivuilla. Ne ovat usein tylsää ja utilitaristisia eivätkä tarjoa paljon tyyliä.
CSS: n avulla tämä voi muuttua. CSS: n ja edistyneempien lomakkeiden yhdistäminen voi tuottaa mukavia muotoja.
Vaihda värit
Aivan kuten tekstin kanssa, voit muuttaa muotoelementtien etualan ja taustavärejä.
Helppo tapa vaihtaa lähes kaikkien muotoelementtien taustaväri on käyttää taustaväriominaisuutta tulotunnisteessa. Esimerkiksi tämä koodi käyttää sinistä taustaväriä (# 9cf) kaikissa elementeissä.
syöttö {
taustaväri: # 9cf;
väri: # 000;
}
Jos haluat muuttaa vain tietyn muotoelementin taustaväriä, lisää vain textarea ja valitse tyyli. Esimerkiksi:
input, textarea, valitse {
taustaväri: # 9cf;
väri: # 000;
}
Varmista, että muutat tekstin väriä, jos taustaväri on tumma. Kontrastiiviset värit tekevät lomakeelementeistä luettavuuden. Esimerkiksi tummanpunaisen taustan värin teksti on helpompi lukea, jos tekstin väri on valkoinen. Esimerkiksi tämä koodi asettaa valkoisen tekstin punaiseen taustaan.
input, textarea, valitse {
taustaväri: # c00;
väri: #fff;
}
Voit jopa laittaa taustan värin itse lomakekoodiin. Muista, että lomakekoodi on lohkoelementti , joten väri täyttyy koko suorakulmiossa, ei vain elementtien sijainnissa.
Voit lisätä lohkoelementtiin keltaisen taustan, jotta alue erottuu, kuten:
muoto {
taustaväri: #ffc;
}
Lisää reunukset
Kuten väreissä, voit muuttaa eri muotoisten elementtien reunoja. Voit lisätä yhden reunan koko lomakkeen ympärille. Muista lisätä pehmusteita tai lomakeelementtejäsi juuttuvat aivan rajan viereen.
Tässä on esimerkki koodista 1 pikselin mustalle reunalle, jossa on 5 pikselin täyttöä:
muoto {
raja: 1px solid # 000;
pehmuste: 5px;
}
Voit asettaa rajoja enemmän kuin vain itse lomakkeeseen. Muuta syöttökohteiden rajaa, jotta ne erottuvat:
syöttö {
raja: 2px katkennut # c00;
}
Ole varovainen, kun laitat rajoja syöttölaitteisiin, koska ne näyttävät vähemmän kuin syöttölaatikot sitten, ja jotkut eivät välttämättä ymmärrä, että ne voivat täyttää lomakkeen.
Yhdistä tyyliominaisuudet
Yhdistämällä lomakekomponentit ajattelemalla ja CSS: llä voit luoda hyvän näköisen lomakkeen, joka täydentää sivustosi suunnittelua ja ulkoasua.