12 - CSS3 - Polstrid ja veerised PDF Trüki
Kirjutas Mario Metshein   

Eesmärk

Suurem osa HTML elementidest käitub kastina (blokk-element), millel on hulgi omadusi:

  • laius, 
  • kõrgus,
  • polster, 
  • veeris, 
  • piirjoon, 
  • sisu, 
  • taustavärv ja 
  • vari.
Taustavärvi lisamisest oleme juba eelmistes peatükkides rääkinud. Aga seda, kuidas lisada taustapilti vaatame edasipidi. 
102.jpg

Polster

Polster (padding) on tühi ala blokk-elemendi sees, mis jääb sisu ja äärise vahele. Polstri taust on sama värvi, mis on määratud elemendi sisu taustaks. Nii polster, kui ka veeris ja ääris võivad ümber objekti olla võrdsed, igal küljel erinevad või puududa üldse.

Valime harjutamiseks tekstilõigu, mille lisame <div>-elemendi sisse.

html
  1. <div>
  2. <p>Põhja piiril Tara tammemetsa ääres elasid kolm venda. Suureks saades rändas üks Venemaale ja hakkas kaupmeheks, teine läks Turjamaale ja sai seal vapraks sõjameheks. Kolmas istus põhjakotka selga ja lendas Viru randa. Sinna rajas ta riigi ja sai maa esimeseks valitsejaks</p>
  3. </div>

103.jpg

Alustame taustapildi lisamisega, et näha oma tulemusi.

css taust
  1. div{
  2.   background-color:#FF0;
  3. }

104.jpg

Üks võimalus on lisada polster igale soovitud küljele eraldi, kasutades vastavat CSS atribuuti

  • padding-top - ülaäär
  • padding-right - paremäär
  • padding-bottom - alläär
  • padding-left - vasakäär

Atribuudi väärtused võivad olla px, %, em või auto.

html polster
  1. div{
  2.   background-color:#FF0;
  3.   padding-top:10px;
  4.   padding-right:20px;
  5.   padding-bottom: 5px;
  6.   padding-left:15px;
  7. }
105.jpg
Nagu näidises kasutatud polstrit ei ole väga mõtekas kasutada, sest seda on nii tülikas kirjutada. Mõtekas on kasutada padding ennast, mis võimaldab sisestada väärtusi neljal erineval viisil:
  • padding: 5px - kõik polstri küljed on võrdsed
  • padding: 10px 20px - polster üleval ja all on 10px ning vasakul ja paremal 20px
  • padding: 10px 20px 5px - üleval 10px, paremal ja vasakul 20px, all 5px
  • padding: 10px 20px 0px 5px - nelja väärtuse puhul liigutakse ülevalt kellaosuti suunas - üleval 10px, paremal 20px, all 0px ja vasakul 5px
css polster
  1. div{
  2.   background-color:#FF0;
  3.   padding: 10px;
  4. }
106.jpg

Aga kuigi koodis määrasime, et kõik polstrid on võrdsed, siis näeme, et need on tegelikult erinevaid. See tuleb sellest, et veebilehitsejatel on osa parameetreid määratud vaikimisi. Ning erinevatel programmidel on see erinev.  Selle parandamiseks on hea mõte määrata CSS alguses nii polster kui veeris 0px.

css polster
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9. }
107.jpg

Veeris

Veeris (margin) on tühi ala blokk-elemendist väljaspool ning eraldab objekte teineteisest. Veerise taust on läbipaistev, kuid samat värvi, mis on teda ümbritseva elemendi taust. Veerise atribuudid on väga sarnased polstri omadele.

  • margin-top - ülaäär
  • margin-right - paremäär
  • margin-bottom - alläär
  • margin-left - vasakäär
Ja veerise lisamine neljal erineval viisil:
  • margin: 5px - kõik polstri küljed on võrdsed
  • margin: 10px 20px - polster üleval ja all on 10px ning vasakul ja paremal 20px
  • margin: 10px 20px 5px - üleval 10px, paremal ja vasakul 20px, all 5px
  • margin: 10px 20px 0px 5px - nelja väärtuse puhul liigutakse ülevalt kellaosuti suunas - üleval 10px, paremal 20px, all 0px ja vasakul 5px 
css margin
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px;
  10. }

108.jpg

Kõrgus ja laius

Elemendi mõõtmete määramiseks on kasutada kuut atribuuti:

  • width - laius
  • height - kõrgus
  • max-width - suurim lubatud laius
  • max-height - suurim lubatud kõrgus
  • min-width - väikseim lubatud laius
  • max-height -  väikseim lubatud kõrgus
css width
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: auto;
  10.   width: 300px;
  11. }

109.jpg

Antud näites muutsin veerise margin:auto, mis paigutab elemendi horisontaalselt keskele.

Ääris

Ääris (border) on piirjoon, mis ümbritseb elementi. CSS3 võimaldab määrata joone omadusi:
  • stiili (pidev, punktiir)
  • värvi
  • paksust
  • pilti
  • varju
  • nurgade raadiust

Äärise stiil

Äärejoone lisamiseks on vaja määrata joone stiil border-style:
  • none - eemaldab joone
  • solid - ühtlane joon
  • dotted - punktjoon
  • dashed - punktiirjoon
  • double - topeltjoon
  • groove - väljapoole surutud joon
  • ridge - sissepoole surutud joon
  • inset - sissepoole surutud ala piirjoon
  • outset - väljapoole surutud ala piirjoon
CSS3 lisab sellesse nimetusse veel kolm, kuid hetkel mitte ükski veebilehitseja neid ei toeta:
  • dot-dash - punkt-kriipsjoon
  • dot-dot-dash - punkt-punkt-kriipsjoon
  • wave - laineline joon
Kõige sagedamini on kasutusel esimesed kolm.
css border-style
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border-style:solid;
  13. }
110.jpg

Äärise värv

Nagu eelmisest koodinäitest näha, on vaikimisi äärise värviks must. Värvi määramiseks kasuta kõiki CSS3 lubatud värvimisi ja border-color süntaksit. 
css border-color
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border-style:solid;
  13.   border-color:#F00;
  14. }
111.jpg
Hetkel pakub Mozilla Firefox ainukesena tuge mitme värvi kasutamiseks äärises ja sedagi iga külje jaoks eraldi. Kuna see on hetkel toetatud ainult ühe veebilehitseja poolt, siis me seda ei vaata. Aga seni tasub silma peal hoida 

Äärise paksus

Äärise paksuse border-width väärtuse lisamiseks kasuta thin, medium, thick või px.
css border-width
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border-style:solid;
  13.   border-color:#F00;
  14.   border-width:1px;
  15. }
112.jpg

Äärised ühes parameetris

Sama koodi elemendi äärise kohta saaks kirja panna ühe lausena.
css border
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border: 1px solid #F00;
  13. } 

Ümardatud nurgad

CSS3 võimaldab meil lisada ka ümarnurki, kasutades parameetrit border-radius.
css border-radius
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border: 1px solid #F00;
  13.   border-radius: 10px;
  14. }
113.jpg

Antud näide lisab kõikidele nurkadele ühesuguse raadiuse. Lisades mõõdu kaldkriipsuga (/), saame anda vertikaalse ja horisontaalse mõõdu erinevalt

css border-radius
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border: 1px solid #F00;
  13.   border-radius: 20px/10px;
  14. }

114.jpg

Erinevate nurkade poole pöördumiseks kasuta järgmisi atribuute:

  • border-top-left-radius - ülemine vasak
  • border-top-right-radius - ülemine parem
  • border-bottom-left-radius - alumine vasak
  • border-bottom-right-radius - alumine parem
css border-radius
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   border: 1px solid #F00;
  13.   border-top-left-radius: 20px;
  14.   border-top-right-radius: 10px;
  15.   border-bottom-left-radius: 10px;
  16.   border-bottom-right-radius: 20px;
  17. }

115.jpg

Nagu teiste CSS parameetrite puhul, saab siingi nurkade poole pöörduda ühe lausega.

boder-radius
  1. border-radius: 20px 5px 30px 20px;

 Hetkel toetavad kõik uued veebilehitsejad nurkade ümardamist.

Pilt ääriseks

CSS3 on lisanud huvitava võimaluse lisada HTML elemendile tavalise äärise asemele pildi. Kusjuures kõik ääred saab lisada ühe pildi abil, kasutades parameetrit border-image. Esialgu polegi sellest nii lihtne aru saada - põhimõtteliselt saab selle kirja panna kolme väärtusega:

  • pilt
  • pildi tükeldus
  • viis, kuidas pilti paigutada
Kasutame antud näites allolevat pilti.
border2.png
css border-image
  1. border-image: url(border2.png) 33% round;

Kuna seda toetavad ainult Mozilla ja Webkit veebilehitsejad, siis tuleb lisada vastavad eesliited.
css border-image
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   -moz-border-image: url(border2.png) 33% round;
  13.   -webkit-border-image: url(border2.png) 33% round;
  14.   border-image: url(border2.png) 33% round;
  15. }
116.jpg
Vaikimisi jääb ääris liiga kitsaks, seepärast muudame selle natuke laiemaks.
css border-image
  1. *{
  2.   padding:0px;
  3.   margin:0px;
  4. }
  5.  
  6. div{
  7.   background-color:#FF0;
  8.   padding: 10px;
  9.   margin: 10px auto;
  10.   width: 300px;
  11.  
  12.   -moz-border-image: url(border2.png) 33% round;
  13.   -webkit-border-image: url(border2.png) 33% round;
  14.   border-image: url(border2.png) 33% round;
  15.   border-width: 10px;
  16. }
117.jpg
Vaatame, mis need parameetrid on.

Äärise pilt

Äärise pilt on nendest kõige lihtsamini mõistetav ja ei tohiks tekitada mingeid probleeme.

Pildi tükeldamine

See määrab kuidas, kuidas pilt tükeldatakse. Kasutada on nii % kui ka px. Antud näites, kasutasin 33%, mis jagab pildi kolmeks. Paigutades ilusti värvilised rombid nurkadesse ja halli piirjoonele. Sõltuvalt pildist see number muutub.

Lisades ühe numbri, tükeldatakse pilt igast küljest võrdselt.  

Viis, kuidas pilti paigutada

Viis, kuidas pilti paigutada, määrab ära kuidas CSS ääristega käitub. Võimalikke viise on kolm:
  • round - kordab pilti nurgani, vajadusel muudab suurust, et lõppeks täpselt
  • strech - venitab kuni kurgani
  • repeat - kordab pilti kuni järgmise nurgani
Juhin tähelepanu sellele, et Chrome ja Safari ei tee vahet round ning repeat parameetril. Nora Brown on hakkama saanud rakendusega, et testida border-image seadeid.

Varju lisamine

Varjudega puutusime kokku, kui vaatasime teksti efekte. Blokk-elemendile nagu näiteks meie <div>-element on täpselt sama lihtne - määrata tuleb varju x- ja y-suund ning seejärel varju ähmasus. Kasutada tuleb atribuuti box-sadow ja see töötab kõikide uute veebilehitsejatega.
css box-shadow
  1. box-shadow: 5px 5px 5px #666;

118.jpg

Siinkohal tahaks ära mainida ka box-shadow varju omadust, mis määrab kui kaugele varju ähmasus ulatub.

css box-shadow
  1. box-shadow: 0px 0px 5px 5px #666;

119.jpg

Antud näites jätsin varju otse objekti alla ja lisasin ähmasuses ulatuse, mis jätab "helenduse" tunde.

Varju lisamiseks elemendi sisse tuleb lisada parameeter inset

css box-shadow
  1. box-shadow: inset 5px 5px 5px #666;

120.jpg

 
 
< Järgmine   Eelmine >
[ Tagasi ]

Lingid

ooo.jpeg getnotepad.jpg getsketchup.jpg

Viimati lisatud failid

HKHK esitlusmall
2009-09-05
Small Icons - 700tk
2008-06-30
Flag Icons
2008-06-30

Menüü

Foorum
Galerii