 | Peatüki sisukord |  |
8.2 Taustad
Veebilehele annab suure osa ilmest taust. See peab olema kujundatud nii, et kasutajale kuidagi meelde jääda. CSS võimaldab veebilehele tausta määrata mitmel moel.
Kõige lihtsam moodus tausta määramiseks on lehele anda ühtlane täide:
/*Tausta värv*/
body {background-color: yellow;}
Teine variant on kasutada üleminekuvärve - gradiente. Astmikvärvid võimaldavad tausta kujundada nii, et ühelt värvilt minnakse sujuvalt üle teistesse värvitoonidesse. Varem tuli sellise efekti loomiseks kasutada pilte, mistõttu võttis veebilehe laadimine kauem aega ning kulutas liigselt ressursse. Kuna üleminekuvärvid genereerib veebilehitseja, siis on ka veebilehe laadimise aeg kiirem ning suurendamisel ei teki anomaaliaid. Kuna kõik brauserid veel ei toeta sellist efekti, siis tuleb alati defineerida ka tavaline taust nagu näiteks ühtlane täide. CSS-is on kasutusele võetud kahte tüüpi astmikvärve:
- lineaarne (
lineaar-gradient) - radiaalne (
radial-gradient)
Lineaarne üleminekuvärv liigub alla, üles, paremale, vasakule või diagonaalselt. Selleks tuleb defineerida vähemalt kaks värvi. Erinevad veebilehitsejad kasutavad erinevaid standardeid, seega tuleb ka erinevaid parameetreid kasutada.
/*Tausta linear-gradient*/
body {background: linear-gradient(suund, värv1, värv2, …);}
Radiaalne üleminukuvärv on sarnane lineaarsele, aga võimaldab lisada rohkem parameetreid. Vaikimisi on kujundiks ring ning hakatakse värvima keskelt.
/*Tausta radial-gradient*/
body {background: radial-gradient(kujundi määramine, värv1, värv2, …);}
Veel üks viis tausta määrata on kasutada taustapilti. CSS võimaldab panna taustapilt kordusesse, et kulutada vähem ressursse selle kuvamisel. Selleks luuakse tihtipeale pildifailina muster (näiteks .gif või .jpg fail), mida soovitakse kuvada.
body {
background-image: url(muster.gif); /*taustapildi linkimine*/
background-repeat: repeat; /*taustapildi kordamine*/
}
Atribuudile background-repeat saab anda neli väärtust:
repeat– korratakse üle lehe (vaikimisi väärtus);no-repeat– tasutapilti ei korrata;repeat-x– taustapilti korratakse ülevalt alla;repeat-y– taustapilti korratakse vasakult paremale.
Iseseisev ülesanne:
Leidke internetist vabal valikul mustriga pilt, mida oleks mugav panna background-repeat: repeat atribuudiga veebilehe taustaks. Lisage see CSS-i abil enda leheküljele.
| Peatüki sisukord | |