{"id":378,"date":"2020-03-10T18:05:28","date_gmt":"2020-03-10T18:05:28","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=378"},"modified":"2020-03-11T13:08:13","modified_gmt":"2020-03-11T13:08:13","slug":"polsterdus-ja-veerised","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/polsterdus-ja-veerised\/","title":{"rendered":"Raamjoon, polsterdus ja veerised"},"content":{"raw":"Igat elementi \u00fcmbritsevad polster, raamjoon ja veeris. Elemendiks v\u00f5ib olla t\u00e4ht, s\u00f5na, l\u00f5ik, pilt, kasv\u00f5i kogu dokument.\r\n<ul>\r\n \t<li><em>padding<\/em> - polsterdus on ala, mis j\u00e4\u00e4b elemendi enda ja tema serva vahele. Polsterdus on sama v\u00e4rvi kui elemendi taustav\u00e4rv.<\/li>\r\n \t<li><em>border<\/em> - raamjoon on joon, mis \u00fcmbritseb elementi . Raamjoonel v\u00f5ib olla eraldi m\u00e4\u00e4ratud v\u00e4rv, kuju ja paksus.<\/li>\r\n \t<li><em>margin\u00a0<\/em>-\u00a0veeris on ala, mis eraldab elementi teistest tema k\u00f5rval, ees ja j\u00e4rel asuvatest elementidest. Veeris on sama v\u00e4rvi kui elementi \u00fcmbritseva elemendi taust - t\u00e4psemalt \u00f6eldes, veeris on l\u00e4bipaistev.<\/li>\r\n<\/ul>\r\nPolster, serv ja veeris v\u00f5ivad olla elemendi neljal k\u00fcljel t\u00e4iesti erinevad v\u00f5i puududa hoopis. Vaikimisi puuduvadki need paljudel elementidel.\r\n\r\n[caption id=\"attachment_385\" align=\"aligncenter\" width=\"533\"]<img class=\"size-full wp-image-385\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel.png\" alt=\"Kasti mudel (box model)\" width=\"533\" height=\"267\" \/> Sisu, polsterduse, raamjoone ja veerise omavaheline paiknemine[\/caption]\r\n<h1>Raamjoon<\/h1>\r\nRaamjooned (<em>border<\/em>) on kasutusel peamiselt tabelitel kuid sageli ka piltidel, alajaotustel <code>&lt;div&gt;<\/code> ning isegi tavalistel tekstil\u00f5ikudel.\r\n\r\nM\u00e4\u00e4rata saab raamjoone stiili, paksust ja v\u00e4rvi.\r\n\r\n<span class=\"nb\">NB! Paksuse ja v\u00e4rvi omadused ei t\u00f6\u00f6ta ilma, et eelnevalt poleks m\u00e4\u00e4ratud stiil!<\/span>\r\n<h2>Raamjoone stiil<\/h2>\r\nRaamjoone stiili m\u00e4\u00e4ramiseks kasutatakse omadust <em>border-style<\/em>, millega saab m\u00e4\u00e4rab raamjoone nelja k\u00fclje v\u00e4ljan\u00e4gemise. Sellele omadusel v\u00f5ib t\u00fchikutega eraldatult kirja panna kuni neli v\u00e4\u00e4rtust ning neid m\u00e4\u00e4ratakse j\u00e4rgnevalt:\r\n<ul>\r\n \t<li>1 v\u00e4\u00e4rtus \u2013 k\u00f5igile korraga;<\/li>\r\n \t<li>2 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele\/alumisele, teine vasakule\/paremale;<\/li>\r\n \t<li>3 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine vasakule\/paremale, kolmas alumisele;<\/li>\r\n \t<li>4 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine paremale, kolmas alumisele ja neljas vasakule.<\/li>\r\n<\/ul>\r\nV\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>none<\/em> \u2013 raamjoont pole, vaikev\u00e4\u00e4rtus;<\/li>\r\n \t<li><em>hidden<\/em> \u2013 raamjoont pole, enamasti sama, mis <em>none<\/em> kuid erinevusi on tabelite puhul;<\/li>\r\n \t<li><em>solid<\/em> \u2013 pidevjoon;<\/li>\r\n \t<li><em>dotted<\/em> \u2013 punktiirjoon;<\/li>\r\n \t<li><em>dashed<\/em> \u2013 kriipsjoon;<\/li>\r\n \t<li><em>double<\/em> \u2013 topeltjoon;<\/li>\r\n \t<li><em>groove<\/em>, <em>ridge<\/em>, <em>inset<\/em> ja <em>outset<\/em> \u2013 erinevad 3D jooned;<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\r\n<\/ul>\r\nN\u00e4ited:\r\n\r\n<em>border-style: dotted solid double dashed;<\/em>\r\n<p style=\"padding-left: 40px;\">\u00fcleval on punktiirjoon\r\nparemal on pidevjoon\r\nall on topeltjoon\r\nvasakul on kriipsjoon<\/p>\r\n<em>border-style: dotted solid double;<\/em>\r\n<p style=\"padding-left: 40px;\">\u00fcleval on punktiirjoon\r\nparemal ja vasakul on pidevjoon\r\nall on topeltjoon<\/p>\r\n<em>border-style: dotted solid;<\/em>\r\n<p style=\"padding-left: 40px;\">\u00fcleval ja all on punktiirjoon\r\nvasakul ja paremal on pidevjoon<\/p>\r\n<em>border-style: dotted;<\/em>\r\n<p style=\"padding-left: 40px;\">k\u00f5igil k\u00fclgedel on punktiirjoon<\/p>\r\n<em>border-style: none none dashed double;<\/em>\r\n<p style=\"padding-left: 40px;\">\u00fcleval ja paremal ei ole joont\r\nall on kriipsjoon\r\nvasakul on topeltjoon<\/p>\r\n\r\n<h2>Raamjoone paksus<\/h2>\r\nRaamjoone paksuse m\u00e4\u00e4ramiseks kasutatakse omadust border-width, millel on kolm eeldefineeritud v\u00e4\u00e4rtust: thin, medium (vaikev\u00e4\u00e4rtus) ja thick. Lisaks saab kasutada t\u00e4pset v\u00e4\u00e4rtust pikslites. Nagu ka border-style puhul v\u00f5ib border-with omadusel olla \u00fcks kuni neli v\u00e4\u00e4rtust (iga raamjoone k\u00fclje jaoks).\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame joonepaksuseks igas k\u00fcljes 3 pikslit:\r\n<p style=\"padding-left: 40px;\"><em>border-width: 3px;<\/em><\/p>\r\n\r\n<h2>Raamjoone v\u00e4rv<\/h2>\r\nRaamjoone v\u00e4rvi m\u00e4\u00e4ramiseks on omadus <em>border-color,\u00a0<\/em>millel on \u00fcks kuni neli v\u00e4\u00e4rtust.\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame tabeli raamjoone v\u00e4rviks halli:\r\n<p style=\"padding-left: 40px;\"><em>border-color: #c0c0c0<\/em><\/p>\r\nV\u00f5i n\u00e4iteks m\u00e4\u00e4rame \u00fclemise ja alusmise joone roheliseks ja k\u00fclgmised punaseks:\r\n<p style=\"padding-left: 40px;\"><em>border-color: green red;<\/em><\/p>\r\n\r\n<h2>Raamjooned elemendi erinevatel k\u00fclgedel<\/h2>\r\nK\u00f5iki kolme kirjeldatud atribuuti saab m\u00e4\u00e4rata ka eraldi ainult \u00fclemisele, alumisele, vasakule ja paremale k\u00fcljele. Selleks tuleb kasutada omadusi, mille nimes vastav k\u00fclg kirja pandud:\r\n<ul>\r\n \t<li>Joone stiil:\r\n<ul>\r\n \t<li>border-top-style;<\/li>\r\n \t<li>border-bottom-style;<\/li>\r\n \t<li>border-left-style;<\/li>\r\n \t<li>border-right-style.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Joone paksus:\r\n<ul>\r\n \t<li>border-top-width;<\/li>\r\n \t<li>border-bottom-width;<\/li>\r\n \t<li>border-left-width;<\/li>\r\n \t<li>border-right-width.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Joone v\u00e4rv:\r\n<ul>\r\n \t<li>border-top-color;<\/li>\r\n \t<li>border-bottom-color;<\/li>\r\n \t<li>border-left-color;<\/li>\r\n \t<li>border-right-color.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\nN\u00e4iteks m\u00e4\u00e4rame tabeli \u00fclemise raamjoone stiiliks punktiiri ja alumisele kahekordse joone, vasaku joone paksuseks 5 pikslit, parema joone v\u00e4rviks punase:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-top-style: dotted;\r\n  border-bottom-style: double;\r\n  border-left-width: 5px;\r\n  border-right-color: #ff0000;\r\n}<\/pre>\r\n<h2>Raamjoone l\u00fchendatud kirjeldus<\/h2>\r\nEespool kirjeldatud atribuute saab m\u00e4\u00e4rata korraga kirjutades t\u00fchikutega eraldatult joone paksuse, stiili ja v\u00e4rvi v\u00e4\u00e4rtused. K\u00f5igile raamjoontele n\u00e4iteks:\r\n<p style=\"padding-left: 40px;\"><em>border: medium double green;<\/em><\/p>\r\nEraldi \u00fclemisele, alumisele, vasakule, paremale raamjoonele n\u00e4iteks:\r\n<p style=\"padding-left: 40px;\"><em>border-top: medium dashed green;<\/em>\r\n<em>border-bottom: thick solid #ff0000;<\/em>\r\n<em>border-left: medium solid #ff0000;<\/em>\r\n<em>border-right: medium solid #ff0000;<\/em><\/p>\r\n\r\n<h2>\u00dcmardatud nurgad<\/h2>\r\n\u00dcmarate nurkade saamiseks tuleb m\u00e4\u00e4rata omadus <em>border-radius<\/em>. Sellel omadusel v\u00f5ib olla kuni \u00fcks kuni neli v\u00e4\u00e4rtust nagu ka eeltoodud omaduste puhul.\r\n\r\nN\u00e4ide:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  border-radius: 20px;\r\n}<\/pre>\r\nOn v\u00f5imalik m\u00e4\u00e4rata \u00fcmarus ka igale nurgale eraldi. Selleks saab kasutada omadusi:\r\n<ul>\r\n \t<li><em>border-bottom-left-radius<\/em><\/li>\r\n \t<li><em>border-bottom-right-radius<\/em><\/li>\r\n \t<li><em>border-top-left-radius<\/em><\/li>\r\n \t<li><em>border-top-right-radius<\/em><\/li>\r\n<\/ul>\r\nNeed omadused aktsepteerivad kuni kahte v\u00e4\u00e4rtust. Kahe v\u00e4\u00e4rtuse puhul on esimene horisontaalsuunaline ja teine vertikaalsuunaline.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.asym {\r\n  border: thick solid gray;\r\n  border-bottom-left-radius: 40px 100px;\r\n  border-bottom-right-radius:260px 100px;\r\n  border-top-left-radius: 20px;\r\n}\r\n<\/pre>\r\n<h2>Raamjoon pildist<\/h2>\r\nRaamjoon on v\u00f5imalik luua ka pildi baasil. Selleks kasutatakse j\u00e4rgmiseid omadusi: <em>border-image-source, border-image-slice, border-image-width, border-image-outset<\/em> ja <em>border-image-repeat.<\/em>\r\n\r\nOmadus <em>border-image-source<\/em> v\u00e4\u00e4rtuseks on pildi URL ja see m\u00e4\u00e4rab kasutatava pildi.\r\n\r\nN\u00e4iteks \u00fcks v\u00f5imalik rida:\r\n<p style=\"padding-left: 40px;\"><em>border-image-source: url(\"pildid\/pildiraam.png\");<\/em><\/p>\r\nPildi puhul tuleb m\u00e4\u00e4rata l\u00f5ige (<em>slice<\/em>), ehk kui palju pildi servadest j\u00e4etakse \u00fclemise, parema, alumise ja vasaku raamjoone jaoks. Vajadusel pannakse kirja neli erinevat v\u00e4\u00e4rtust alustades \u00fclemisest ja liikudes edasi p\u00e4rip\u00e4eva. V\u00e4\u00e4rtused m\u00e4\u00e4ratakse protsentides v\u00f5i pikslites. Koos servadega saavad defineeritud ka nurgad!\r\n\r\nPildi l\u00f5ige m\u00e4\u00e4ratakse omadusega <em>border-image-slice.<\/em>\r\n\r\nN\u00e4iteks \u00fcks v\u00f5imalik rida:\r\n<p style=\"padding-left: 40px;\"><em>border-image-slice: 20 20 20 20;<\/em><\/p>\r\n<span class=\"nb\">NB! Pikslites v\u00e4ljendatud v\u00e4\u00e4rtuste korral m\u00f5\u00f5t\u00fchikut (px) kirja ei panda!\r\nNB! Kui osa v\u00f5i k\u00f5ik v\u00e4\u00e4rtused on \u00fchesugused, siis v\u00f5ib kirja panna ka n\u00e4iteks ainult kaks v\u00f5i \u00fche v\u00e4\u00e4rtuse!<\/span>\r\n\r\nVaikimisi on tekitatav raamjoon peenike \u2013 ei vasta kasutatava pildiosa m\u00f5\u00f5tmetele. Pildist loodava raamjoone paksuse m\u00e4\u00e4rab omadus <em>border-image-width<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>v\u00e4\u00e4rtus pikslites \u2013 loodava raamjoone paksus pikslites, v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\r\n \t<li>kordaja \u2013 eelnevalt m\u00e4\u00e4ratud raamjoone paksuse kordaja (vaikev\u00e4\u00e4rtus on 1), v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\r\n \t<li>v\u00e4\u00e4rtus protsentides \u2013 loodava raamjoone paksus elemendi suhtes, mida ta \u00fcmbritseb, v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\r\n \t<li><em>auto<\/em> \u2013 m\u00e4\u00e4rab raamjoone paksuse vastavalt l\u00f5ike laiusele;<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>)).<\/li>\r\n<\/ul>\r\nN\u00e4iteks \u00fcks v\u00f5imalik rida:\r\n<p style=\"padding-left: 40px;\"><em>border-image-width: auto;<\/em><\/p>\r\nSamuti tuleb m\u00e4\u00e4rata venitus (<em>stretch<\/em>), mis m\u00e4\u00e4rab, kuidas raamjooned nurkade vahel pildiosaga t\u00e4idetakse. Kasutatakse omadust <em>border-image-repeat<\/em>. V\u00f5imalikud v\u00e4\u00e4rtused on (ja neid v\u00f5ib m\u00e4\u00e4rata iga serva jaoks eraldi):\r\n<ul>\r\n \t<li><em>stretch<\/em> \u2013 pildiosa venitatakse \u00fcle terve serva (vaikev\u00e4\u00e4rtus).<\/li>\r\n \t<li><em>repeat<\/em> \u2013 pildiosa korratakse ja \u00fclej\u00e4\u00e4v serv l\u00f5igatakse maha;<\/li>\r\n \t<li><em>round<\/em> \u2013 pildiosa korratakse ja suurus sobitatakse nii, et mahuks t\u00e4pselt t\u00e4isarv kordi;<\/li>\r\n \t<li><em>space<\/em> \u2013 pildiosa korratakse, et terve serv saaks t\u00e4idetud, kui t\u00e4pselt ei jagu, lisatakse korduste vahele t\u00fchja ruumi;<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>));<\/li>\r\n<\/ul>\r\nN\u00e4iteks \u00fcks v\u00f5imalik rida:\r\n<p style=\"padding-left: 40px;\"><em>border-image-repeat: round;<\/em><\/p>\r\nM\u00e4\u00e4rata saab ka seda, kui palju pildist loodud raam laieneb \u00fcle <em>border-box<\/em> piiride. Selleks on omadus <em>border-image-outset<\/em>, millel on v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>v\u00e4\u00e4rtus pikslites \u2013 loodava raamjoone paksus pikslites, v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\r\n \t<li>kordaja \u2013 eelnevalt m\u00e4\u00e4ratud raamjoone paksuse kordaja (vaikev\u00e4\u00e4rtus on 1), v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>)).<\/li>\r\n<\/ul>\r\nL\u00fchidalt v\u00f5ib pildist raami panna kirja omadusega <em>border-image<\/em>, mille j\u00e4rel pannakse kirja eelpool vaadeldud omaduste v\u00e4\u00e4rtused j\u00e4rgmises j\u00e4rjestuses: <em>border-image-source, borderimage-slice, border-image-width, border-image-outset<\/em> ja <em>border-image-repeat<\/em>. Omaduste puhul, mille v\u00e4\u00e4rtuseid kirja ei panda, kasutatakse nende vaikev\u00e4\u00e4rtuseid.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.raamiga {\r\n  border-image: url(\"pildid\/pildiraam.png\") 20 auto round;\r\n}<\/pre>\r\n<span class=\"nb\">Kuna ainult pildist raamjoont luues j\u00e4\u00e4b loodud raamjoon suuremas osas raamitava objekti piiridesse (fotode jms puhul isegi kujutise taha), siis on m\u00f5istlik enne pildist raami lisamist m\u00e4\u00e4rata ka tavaline raamjoon, mille laius \u00fchtib pildist loodava raami paksusega. Nii on tagatud raamjoone olemasolu ka nendel juhtudel kui pildist loodavat ei toetata (m\u00f5ned veebilehitsejad) ning ka see, et raamjoon t\u00f5esti objekti \u00fcmbritseb.<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.raamiga {\r\n  border:20px solid #DD0000;\r\n  border-image: url(\"pildid\/pildiraam.png\") 20 auto round;\r\n}\r\n<\/pre>\r\n<h2>Vari<\/h2>\r\nCSS lubab elementidele lisada ka varjusid. Varju lisamiseks kasutatakse omadust <em>box-shadow<\/em>. Kindlasti tuleb m\u00e4\u00e4rata kaks parameetrit j\u00e4rgnevas j\u00e4rjestuses:\r\n<ul>\r\n \t<li>horisontaalne nihe (<em>horizontal offset<\/em>) \u2013 varju horisontaalne asukoht objekti suhtes, v\u00e4\u00e4rtus pikslites, kasutada saab ka negatiivseid v\u00e4\u00e4rtuseid (nihutab varju vasakule);<\/li>\r\n \t<li>vertikaalne nihe (<em>vertical offset<\/em>) \u2013 varju vertikaalne asukoht objekti suhtes, v\u00e4\u00e4rtus pikslites, kasutada saab ka negatiivseid v\u00e4\u00e4rtuseid (nihutab varju \u00fcles).<\/li>\r\n<\/ul>\r\nN\u00e4iteks lisame elementidele <code>&lt;div&gt;<\/code> varju, mis on elemendist 15 pikslit paremale ja 15 pikslit allapoole nihutatud:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  box-shadow: 15px 15px;\r\n}<\/pre>\r\n[caption id=\"attachment_370\" align=\"aligncenter\" width=\"422\"]<img class=\"size-full wp-image-370\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2.png\" alt=\"Tavaline vari\" width=\"422\" height=\"152\" \/> Tavaline vari[\/caption]\r\n\r\nLisaks saab m\u00e4\u00e4rata valikulisi parameetreid j\u00e4rgnevas j\u00e4rjestuses:\r\n<ul>\r\n \t<li>h\u00e4gustamise ulatus (<em>blur distance<\/em>) \u2013 v\u00e4\u00e4rtus pikslites, kui palju varju serva h\u00e4gustatakse;<\/li>\r\n \t<li>ulatus (<em>spread<\/em>) \u2013 v\u00e4\u00e4rtus pikslites, m\u00e4\u00e4rab varju suuruse;<\/li>\r\n \t<li>v\u00e4rv \u2013 varju v\u00e4rv, vaikev\u00e4\u00e4rtuseks on must.<\/li>\r\n<\/ul>\r\nN\u00e4iteks lisame varju, millel lisaks horisontaalsele ja vertikaalsele nihkele on m\u00e4\u00e4ratud h\u00e4gustamise ulatus 15 pikslit ning punane v\u00e4rv, varju ulatus on j\u00e4etud m\u00e4\u00e4ramata:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">div {\r\n  box-shadow: 15px 15px 15px #F00;\r\n}<\/pre>\r\n[caption id=\"attachment_369\" align=\"aligncenter\" width=\"397\"]<img class=\"size-full wp-image-369\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1.png\" alt=\"H\u00e4gustatud servaga punane vari\" width=\"397\" height=\"175\" \/> H\u00e4gustatud servaga punane vari[\/caption]\r\n\r\nV\u00f5imalik on varju ka objektile sissepoole p\u00f6\u00f6rata, selleks tuleb k\u00f5ige viimaseks parameetriks lisada:\r\n<ul>\r\n \t<li><em>inset<\/em> (sisse panema) \u2013 muudab v\u00e4lise varju sisemiseks varjuks.<\/li>\r\n<\/ul>\r\nLoomulikult saab omadusel <em>box-shadow<\/em> kasutada ka standardseid v\u00e4\u00e4rtuseid:\r\n<ul>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>)).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  box-shadow: 0px 0px 15px #F00 inset;\r\n}<\/pre>\r\n[caption id=\"attachment_371\" align=\"aligncenter\" width=\"336\"]<img class=\"size-full wp-image-371\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari3.png\" alt=\"Sisemine vari\" width=\"336\" height=\"137\" \/> Sisemine vari[\/caption]\r\n\r\n\u00dchele elemendile saab lisada kaks varju, selleks tuleb need komaga eraldatult kirja panna. N\u00e4iteks lisame \u00fchele elemendile nii v\u00e4lise varju (nihke v\u00e4\u00e4rtuseks 0px, siis on tegemist justkui haloga) ning seesmise varju:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  box-shadow: 0px 0px 15px #F00, 0px 0px 15px #F00 inset;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_372\" align=\"aligncenter\" width=\"347\"]<img class=\"size-full wp-image-372\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari4.png\" alt=\"Element kahe varjuga (seesmine ja v\u00e4line halo)\" width=\"347\" height=\"147\" \/> Element kahe varjuga (seesmine ja v\u00e4line halo)[\/caption]\r\n<h2>Kontuur<\/h2>\r\nOlemas on v\u00f5imalus plokielementidele kontuurjoon (<em>outline<\/em>) lisada. Kontuurjoon lisatakse v\u00e4ljapoole elemendi enda piiri (ja raamjoont (<em>border<\/em>)), eesm\u00e4rgiks elemendi silmatorkavaks muutmine.\r\n\r\nM\u00e4\u00e4ratakse kolm omadust:\r\n<ul>\r\n \t<li><em>outline-color<\/em> \u2013 kontuurjoone v\u00e4rv;<\/li>\r\n \t<li><em>outline-style<\/em> \u2013 kontuurjoone stiil (samad, mis raamjoone (<em>border<\/em>) puhul);<\/li>\r\n \t<li><em>outline-width<\/em> \u2013 kontuurjoone paksus.<\/li>\r\n<\/ul>\r\nKontuurjoone kirjeldus v\u00f5ib olla ka l\u00fchendatud,siis kirjutatakse see kujul:\r\n<p style=\"padding-left: 40px;\">outline: v\u00e4rv stiil paksus; (omaduste j\u00e4rjekord ei ole oluline)<\/p>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h1 {\r\n  border: 4px solid black;\r\n  outline: gray solid 5px;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_375\" align=\"aligncenter\" width=\"323\"]<img class=\"wp-image-375 size-full\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur.png\" alt=\"Element musta raamjoone ja halli kontuuriga\" width=\"323\" height=\"142\" \/> Element musta raamjoone ja halli kontuuriga[\/caption]\r\n\r\nM\u00e4\u00e4rata saab ka\u2013 kontuurjoone kaugus elemendist, selleks on omadus <em>outline-offset<\/em>.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h2 {\r\n  border: 4px solid black;\r\n  outline: gray solid 5px;\r\n  outline-offset: 5px;\r\n}<\/pre>\r\n[caption id=\"attachment_376\" align=\"aligncenter\" width=\"350\"]<img class=\"wp-image-376\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2.png\" alt=\"Element kontuurjoonega, mis on eemale nihutatud\" width=\"350\" height=\"167\" \/> Element kontuurjoonega, mis on eemale nihutatud[\/caption]\r\n<h1>Polsterdus<\/h1>\r\nCSS v\u00f5imaldab m\u00e4\u00e4rata ka polsterdust (<em>padding<\/em>) ehk ruumi veebilehe elemendi serva ja tema sisu vahel. Polsterduse arvv\u00e4\u00e4rtuse v\u00f5ib m\u00e4\u00e4rata pikkus\u00fchikutes v\u00f5i protsentides sisaldava elemendi laiuse suhtes.\r\n\r\nN\u00e4iteks tekstil\u00f5ik koos raami ja polsterdusega:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p {\r\n  border: 1px solid red;\r\n  padding: 10px;\r\n}<\/pre>\r\n[caption id=\"attachment_381\" align=\"aligncenter\" width=\"306\"]<img class=\"size-full wp-image-381\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_1.png\" alt=\"Elemendil polsterdus 0px\" width=\"306\" height=\"42\" \/> Elemendil polsterdus 0px[\/caption]\r\n\r\n[caption id=\"attachment_382\" align=\"aligncenter\" width=\"287\"]<img class=\"wp-image-382 size-full\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_2.png\" alt=\"Elemendil polsterdus 10px\" width=\"287\" height=\"71\" \/> Elemendil polsterdus 10px[\/caption]\r\n\r\nPolsterdust saab m\u00e4\u00e4rata eraldi \u00fcleval, all, vasakul ja paremal, sellisel juhul lisatakse omaduse <em>padding<\/em> nimele liide <em>\u2013top, -bottom, -left<\/em> v\u00f5i <em>-right.<\/em>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  padding-top: 5px;\r\n  padding-bottom: 5px;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n}<\/pre>\r\nPolsterdust saab m\u00e4\u00e4rata korraga mitmele k\u00fcljele:\r\n<p style=\"padding-left: 40px;\"><em>div {padding: 0.5cm 2.5cm 2cm 4cm}<\/em><\/p>\r\nSeejuures v\u00f5ib t\u00fchikutega eraldatult kirja panna mitu v\u00e4\u00e4rtust variantides:\r\n<ul>\r\n \t<li>2 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele\/alumisele, teine vasakule\/paremale;<\/li>\r\n \t<li>3 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine vasakule\/paremale, kolmas alumisele;<\/li>\r\n \t<li>4 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine paremale, kolmas alumisele ja neljas vasakule.<\/li>\r\n<\/ul>\r\n<span class=\"nb\">NB! Polsterdus lisatakse tavaliselt elemendi h\u00f5ivatavale pinnale ehk m\u00f5\u00f5tmetele.<\/span>\r\n<h1>Veerised<\/h1>\r\nCSS v\u00f5imaldab m\u00e4\u00e4rata ka t\u00fchja ruumi veebilehe elementide \u00fcmber \u2013 veeriseid (<em>margin<\/em>). Veeriseid saab m\u00e4\u00e4rata tekstil\u00f5ikudele, piltidele jne.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p { \r\n  margin: 0px;\r\n}<\/pre>\r\n<span class=\"nb\">NB! Veerised lisatakse tavaliselt elemendi h\u00f5ivatavale pinnale!<\/span>\r\n\r\nVeerise arvv\u00e4\u00e4rtuse v\u00f5ib m\u00e4\u00e4rata pikkus\u00fchikutes v\u00f5i protsentides sisaldava elemendi laiuse suhtes.\r\n\r\nEraldi saab m\u00e4\u00e4rata veeriseid \u00fcleval, all, vasakul ja paremal! Sellisel juhul lisatakse omaduse <em>margin<\/em> nimele liide <em>\u2013top, -bottom, -left<\/em> v\u00f5i <em>-right<\/em>.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img {\r\n  margin-top: 5cm;\r\n  margin-bottom: 20pt;\r\n  margin-left: 25%;\r\n  margin-right: 5px;\r\n}\r\n<\/pre>\r\nV\u00f5imalik on kasutada ka v\u00e4\u00e4rtust \u201e<em>auto<\/em>\u201c, mille puhul arvutab veeris(t)e suuruse veebilehitseja.\r\n\r\n<span class=\"nb\">NB! Kui m\u00e4\u00e4rata vasaku ja parema veerise v\u00e4\u00e4rtusteks korraga <em>auto<\/em>, siis paigutatakse objekt keskele!<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">img {\r\n  margin-left:auto; \r\n  margin-right:auto;\r\n}<\/pre>\r\nv\u00f5i\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img {\r\n  margin:auto;\r\n}<\/pre>\r\nVeeriseid saab m\u00e4\u00e4rata \u00fchekorraga mitmele servale, siis kasutatakse omadust <em>margin<\/em> ja pannakse t\u00fchikutega eraldatult kirja \u00fcks kuni neli v\u00e4\u00e4rtust.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">div.eraldatud {\r\n  margin: 2px 4px 3px 4px;\r\n}<\/pre>\r\nSeejuures v\u00f5ib t\u00fchikutega eraldatult kirja panna mitu v\u00e4\u00e4rtust variantides:\r\n<ul>\r\n \t<li>1 v\u00e4\u00e4rtus \u2013 \u00fcmberringi \u00fchesugune veeris<\/li>\r\n \t<li>2 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele\/alumisele, teine vasakule\/paremale;<\/li>\r\n \t<li>3 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine vasakule\/paremale, kolmas alumisele;<\/li>\r\n \t<li>4 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine paremale, kolmas alumisele ja neljas vasakule.<\/li>\r\n<\/ul>","rendered":"<p>Igat elementi \u00fcmbritsevad polster, raamjoon ja veeris. Elemendiks v\u00f5ib olla t\u00e4ht, s\u00f5na, l\u00f5ik, pilt, kasv\u00f5i kogu dokument.<\/p>\n<ul>\n<li><em>padding<\/em> &#8211; polsterdus on ala, mis j\u00e4\u00e4b elemendi enda ja tema serva vahele. Polsterdus on sama v\u00e4rvi kui elemendi taustav\u00e4rv.<\/li>\n<li><em>border<\/em> &#8211; raamjoon on joon, mis \u00fcmbritseb elementi . Raamjoonel v\u00f5ib olla eraldi m\u00e4\u00e4ratud v\u00e4rv, kuju ja paksus.<\/li>\n<li><em>margin\u00a0<\/em>&#8211;\u00a0veeris on ala, mis eraldab elementi teistest tema k\u00f5rval, ees ja j\u00e4rel asuvatest elementidest. Veeris on sama v\u00e4rvi kui elementi \u00fcmbritseva elemendi taust &#8211; t\u00e4psemalt \u00f6eldes, veeris on l\u00e4bipaistev.<\/li>\n<\/ul>\n<p>Polster, serv ja veeris v\u00f5ivad olla elemendi neljal k\u00fcljel t\u00e4iesti erinevad v\u00f5i puududa hoopis. Vaikimisi puuduvadki need paljudel elementidel.<\/p>\n<figure id=\"attachment_385\" aria-describedby=\"caption-attachment-385\" style=\"width: 533px\" class=\"wp-caption aligncenter\"><img class=\"size-full wp-image-385\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel.png\" alt=\"Kasti mudel (box model)\" width=\"533\" height=\"267\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel.png 533w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel-300x150.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel-65x33.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel-225x113.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kastimudel-350x175.png 350w\" \/><figcaption id=\"caption-attachment-385\" class=\"wp-caption-text\">Sisu, polsterduse, raamjoone ja veerise omavaheline paiknemine<\/figcaption><\/figure>\n<h1>Raamjoon<\/h1>\n<p>Raamjooned (<em>border<\/em>) on kasutusel peamiselt tabelitel kuid sageli ka piltidel, alajaotustel <code>&lt;div&gt;<\/code> ning isegi tavalistel tekstil\u00f5ikudel.<\/p>\n<p>M\u00e4\u00e4rata saab raamjoone stiili, paksust ja v\u00e4rvi.<\/p>\n<p><span class=\"nb\">NB! Paksuse ja v\u00e4rvi omadused ei t\u00f6\u00f6ta ilma, et eelnevalt poleks m\u00e4\u00e4ratud stiil!<\/span><\/p>\n<h2>Raamjoone stiil<\/h2>\n<p>Raamjoone stiili m\u00e4\u00e4ramiseks kasutatakse omadust <em>border-style<\/em>, millega saab m\u00e4\u00e4rab raamjoone nelja k\u00fclje v\u00e4ljan\u00e4gemise. Sellele omadusel v\u00f5ib t\u00fchikutega eraldatult kirja panna kuni neli v\u00e4\u00e4rtust ning neid m\u00e4\u00e4ratakse j\u00e4rgnevalt:<\/p>\n<ul>\n<li>1 v\u00e4\u00e4rtus \u2013 k\u00f5igile korraga;<\/li>\n<li>2 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele\/alumisele, teine vasakule\/paremale;<\/li>\n<li>3 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine vasakule\/paremale, kolmas alumisele;<\/li>\n<li>4 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine paremale, kolmas alumisele ja neljas vasakule.<\/li>\n<\/ul>\n<p>V\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>none<\/em> \u2013 raamjoont pole, vaikev\u00e4\u00e4rtus;<\/li>\n<li><em>hidden<\/em> \u2013 raamjoont pole, enamasti sama, mis <em>none<\/em> kuid erinevusi on tabelite puhul;<\/li>\n<li><em>solid<\/em> \u2013 pidevjoon;<\/li>\n<li><em>dotted<\/em> \u2013 punktiirjoon;<\/li>\n<li><em>dashed<\/em> \u2013 kriipsjoon;<\/li>\n<li><em>double<\/em> \u2013 topeltjoon;<\/li>\n<li><em>groove<\/em>, <em>ridge<\/em>, <em>inset<\/em> ja <em>outset<\/em> \u2013 erinevad 3D jooned;<\/li>\n<li><em>initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\n<li><em>inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\n<\/ul>\n<p>N\u00e4ited:<\/p>\n<p><em>border-style: dotted solid double dashed;<\/em><\/p>\n<p style=\"padding-left: 40px;\">\u00fcleval on punktiirjoon<br \/>\nparemal on pidevjoon<br \/>\nall on topeltjoon<br \/>\nvasakul on kriipsjoon<\/p>\n<p><em>border-style: dotted solid double;<\/em><\/p>\n<p style=\"padding-left: 40px;\">\u00fcleval on punktiirjoon<br \/>\nparemal ja vasakul on pidevjoon<br \/>\nall on topeltjoon<\/p>\n<p><em>border-style: dotted solid;<\/em><\/p>\n<p style=\"padding-left: 40px;\">\u00fcleval ja all on punktiirjoon<br \/>\nvasakul ja paremal on pidevjoon<\/p>\n<p><em>border-style: dotted;<\/em><\/p>\n<p style=\"padding-left: 40px;\">k\u00f5igil k\u00fclgedel on punktiirjoon<\/p>\n<p><em>border-style: none none dashed double;<\/em><\/p>\n<p style=\"padding-left: 40px;\">\u00fcleval ja paremal ei ole joont<br \/>\nall on kriipsjoon<br \/>\nvasakul on topeltjoon<\/p>\n<h2>Raamjoone paksus<\/h2>\n<p>Raamjoone paksuse m\u00e4\u00e4ramiseks kasutatakse omadust border-width, millel on kolm eeldefineeritud v\u00e4\u00e4rtust: thin, medium (vaikev\u00e4\u00e4rtus) ja thick. Lisaks saab kasutada t\u00e4pset v\u00e4\u00e4rtust pikslites. Nagu ka border-style puhul v\u00f5ib border-with omadusel olla \u00fcks kuni neli v\u00e4\u00e4rtust (iga raamjoone k\u00fclje jaoks).<\/p>\n<p>N\u00e4iteks m\u00e4\u00e4rame joonepaksuseks igas k\u00fcljes 3 pikslit:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-width: 3px;<\/em><\/p>\n<h2>Raamjoone v\u00e4rv<\/h2>\n<p>Raamjoone v\u00e4rvi m\u00e4\u00e4ramiseks on omadus <em>border-color,\u00a0<\/em>millel on \u00fcks kuni neli v\u00e4\u00e4rtust.<\/p>\n<p>N\u00e4iteks m\u00e4\u00e4rame tabeli raamjoone v\u00e4rviks halli:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-color: #c0c0c0<\/em><\/p>\n<p>V\u00f5i n\u00e4iteks m\u00e4\u00e4rame \u00fclemise ja alusmise joone roheliseks ja k\u00fclgmised punaseks:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-color: green red;<\/em><\/p>\n<h2>Raamjooned elemendi erinevatel k\u00fclgedel<\/h2>\n<p>K\u00f5iki kolme kirjeldatud atribuuti saab m\u00e4\u00e4rata ka eraldi ainult \u00fclemisele, alumisele, vasakule ja paremale k\u00fcljele. Selleks tuleb kasutada omadusi, mille nimes vastav k\u00fclg kirja pandud:<\/p>\n<ul>\n<li>Joone stiil:\n<ul>\n<li>border-top-style;<\/li>\n<li>border-bottom-style;<\/li>\n<li>border-left-style;<\/li>\n<li>border-right-style.<\/li>\n<\/ul>\n<\/li>\n<li>Joone paksus:\n<ul>\n<li>border-top-width;<\/li>\n<li>border-bottom-width;<\/li>\n<li>border-left-width;<\/li>\n<li>border-right-width.<\/li>\n<\/ul>\n<\/li>\n<li>Joone v\u00e4rv:\n<ul>\n<li>border-top-color;<\/li>\n<li>border-bottom-color;<\/li>\n<li>border-left-color;<\/li>\n<li>border-right-color.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>N\u00e4iteks m\u00e4\u00e4rame tabeli \u00fclemise raamjoone stiiliks punktiiri ja alumisele kahekordse joone, vasaku joone paksuseks 5 pikslit, parema joone v\u00e4rviks punase:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-top-style: dotted;\r\n  border-bottom-style: double;\r\n  border-left-width: 5px;\r\n  border-right-color: #ff0000;\r\n}<\/pre>\n<h2>Raamjoone l\u00fchendatud kirjeldus<\/h2>\n<p>Eespool kirjeldatud atribuute saab m\u00e4\u00e4rata korraga kirjutades t\u00fchikutega eraldatult joone paksuse, stiili ja v\u00e4rvi v\u00e4\u00e4rtused. K\u00f5igile raamjoontele n\u00e4iteks:<\/p>\n<p style=\"padding-left: 40px;\"><em>border: medium double green;<\/em><\/p>\n<p>Eraldi \u00fclemisele, alumisele, vasakule, paremale raamjoonele n\u00e4iteks:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-top: medium dashed green;<\/em><br \/>\n<em>border-bottom: thick solid #ff0000;<\/em><br \/>\n<em>border-left: medium solid #ff0000;<\/em><br \/>\n<em>border-right: medium solid #ff0000;<\/em><\/p>\n<h2>\u00dcmardatud nurgad<\/h2>\n<p>\u00dcmarate nurkade saamiseks tuleb m\u00e4\u00e4rata omadus <em>border-radius<\/em>. Sellel omadusel v\u00f5ib olla kuni \u00fcks kuni neli v\u00e4\u00e4rtust nagu ka eeltoodud omaduste puhul.<\/p>\n<p>N\u00e4ide:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  border-radius: 20px;\r\n}<\/pre>\n<p>On v\u00f5imalik m\u00e4\u00e4rata \u00fcmarus ka igale nurgale eraldi. Selleks saab kasutada omadusi:<\/p>\n<ul>\n<li><em>border-bottom-left-radius<\/em><\/li>\n<li><em>border-bottom-right-radius<\/em><\/li>\n<li><em>border-top-left-radius<\/em><\/li>\n<li><em>border-top-right-radius<\/em><\/li>\n<\/ul>\n<p>Need omadused aktsepteerivad kuni kahte v\u00e4\u00e4rtust. Kahe v\u00e4\u00e4rtuse puhul on esimene horisontaalsuunaline ja teine vertikaalsuunaline.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.asym {\r\n  border: thick solid gray;\r\n  border-bottom-left-radius: 40px 100px;\r\n  border-bottom-right-radius:260px 100px;\r\n  border-top-left-radius: 20px;\r\n}\r\n<\/pre>\n<h2>Raamjoon pildist<\/h2>\n<p>Raamjoon on v\u00f5imalik luua ka pildi baasil. Selleks kasutatakse j\u00e4rgmiseid omadusi: <em>border-image-source, border-image-slice, border-image-width, border-image-outset<\/em> ja <em>border-image-repeat.<\/em><\/p>\n<p>Omadus <em>border-image-source<\/em> v\u00e4\u00e4rtuseks on pildi URL ja see m\u00e4\u00e4rab kasutatava pildi.<\/p>\n<p>N\u00e4iteks \u00fcks v\u00f5imalik rida:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-image-source: url(&#8220;pildid\/pildiraam.png&#8221;);<\/em><\/p>\n<p>Pildi puhul tuleb m\u00e4\u00e4rata l\u00f5ige (<em>slice<\/em>), ehk kui palju pildi servadest j\u00e4etakse \u00fclemise, parema, alumise ja vasaku raamjoone jaoks. Vajadusel pannakse kirja neli erinevat v\u00e4\u00e4rtust alustades \u00fclemisest ja liikudes edasi p\u00e4rip\u00e4eva. V\u00e4\u00e4rtused m\u00e4\u00e4ratakse protsentides v\u00f5i pikslites. Koos servadega saavad defineeritud ka nurgad!<\/p>\n<p>Pildi l\u00f5ige m\u00e4\u00e4ratakse omadusega <em>border-image-slice.<\/em><\/p>\n<p>N\u00e4iteks \u00fcks v\u00f5imalik rida:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-image-slice: 20 20 20 20;<\/em><\/p>\n<p><span class=\"nb\">NB! Pikslites v\u00e4ljendatud v\u00e4\u00e4rtuste korral m\u00f5\u00f5t\u00fchikut (px) kirja ei panda!<br \/>\nNB! Kui osa v\u00f5i k\u00f5ik v\u00e4\u00e4rtused on \u00fchesugused, siis v\u00f5ib kirja panna ka n\u00e4iteks ainult kaks v\u00f5i \u00fche v\u00e4\u00e4rtuse!<\/span><\/p>\n<p>Vaikimisi on tekitatav raamjoon peenike \u2013 ei vasta kasutatava pildiosa m\u00f5\u00f5tmetele. Pildist loodava raamjoone paksuse m\u00e4\u00e4rab omadus <em>border-image-width<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>v\u00e4\u00e4rtus pikslites \u2013 loodava raamjoone paksus pikslites, v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\n<li>kordaja \u2013 eelnevalt m\u00e4\u00e4ratud raamjoone paksuse kordaja (vaikev\u00e4\u00e4rtus on 1), v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\n<li>v\u00e4\u00e4rtus protsentides \u2013 loodava raamjoone paksus elemendi suhtes, mida ta \u00fcmbritseb, v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\n<li><em>auto<\/em> \u2013 m\u00e4\u00e4rab raamjoone paksuse vastavalt l\u00f5ike laiusele;<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>)).<\/li>\n<\/ul>\n<p>N\u00e4iteks \u00fcks v\u00f5imalik rida:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-image-width: auto;<\/em><\/p>\n<p>Samuti tuleb m\u00e4\u00e4rata venitus (<em>stretch<\/em>), mis m\u00e4\u00e4rab, kuidas raamjooned nurkade vahel pildiosaga t\u00e4idetakse. Kasutatakse omadust <em>border-image-repeat<\/em>. V\u00f5imalikud v\u00e4\u00e4rtused on (ja neid v\u00f5ib m\u00e4\u00e4rata iga serva jaoks eraldi):<\/p>\n<ul>\n<li><em>stretch<\/em> \u2013 pildiosa venitatakse \u00fcle terve serva (vaikev\u00e4\u00e4rtus).<\/li>\n<li><em>repeat<\/em> \u2013 pildiosa korratakse ja \u00fclej\u00e4\u00e4v serv l\u00f5igatakse maha;<\/li>\n<li><em>round<\/em> \u2013 pildiosa korratakse ja suurus sobitatakse nii, et mahuks t\u00e4pselt t\u00e4isarv kordi;<\/li>\n<li><em>space<\/em> \u2013 pildiosa korratakse, et terve serv saaks t\u00e4idetud, kui t\u00e4pselt ei jagu, lisatakse korduste vahele t\u00fchja ruumi;<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>));<\/li>\n<\/ul>\n<p>N\u00e4iteks \u00fcks v\u00f5imalik rida:<\/p>\n<p style=\"padding-left: 40px;\"><em>border-image-repeat: round;<\/em><\/p>\n<p>M\u00e4\u00e4rata saab ka seda, kui palju pildist loodud raam laieneb \u00fcle <em>border-box<\/em> piiride. Selleks on omadus <em>border-image-outset<\/em>, millel on v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>v\u00e4\u00e4rtus pikslites \u2013 loodava raamjoone paksus pikslites, v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\n<li>kordaja \u2013 eelnevalt m\u00e4\u00e4ratud raamjoone paksuse kordaja (vaikev\u00e4\u00e4rtus on 1), v\u00f5ib m\u00e4\u00e4rata 1, 2 3 v\u00f5i 4 v\u00e4\u00e4rtust \u2013 erinevatele servadele;<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>)).<\/li>\n<\/ul>\n<p>L\u00fchidalt v\u00f5ib pildist raami panna kirja omadusega <em>border-image<\/em>, mille j\u00e4rel pannakse kirja eelpool vaadeldud omaduste v\u00e4\u00e4rtused j\u00e4rgmises j\u00e4rjestuses: <em>border-image-source, borderimage-slice, border-image-width, border-image-outset<\/em> ja <em>border-image-repeat<\/em>. Omaduste puhul, mille v\u00e4\u00e4rtuseid kirja ei panda, kasutatakse nende vaikev\u00e4\u00e4rtuseid.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.raamiga {\r\n  border-image: url(\"pildid\/pildiraam.png\") 20 auto round;\r\n}<\/pre>\n<p><span class=\"nb\">Kuna ainult pildist raamjoont luues j\u00e4\u00e4b loodud raamjoon suuremas osas raamitava objekti piiridesse (fotode jms puhul isegi kujutise taha), siis on m\u00f5istlik enne pildist raami lisamist m\u00e4\u00e4rata ka tavaline raamjoon, mille laius \u00fchtib pildist loodava raami paksusega. Nii on tagatud raamjoone olemasolu ka nendel juhtudel kui pildist loodavat ei toetata (m\u00f5ned veebilehitsejad) ning ka see, et raamjoon t\u00f5esti objekti \u00fcmbritseb.<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.raamiga {\r\n  border:20px solid #DD0000;\r\n  border-image: url(\"pildid\/pildiraam.png\") 20 auto round;\r\n}\r\n<\/pre>\n<h2>Vari<\/h2>\n<p>CSS lubab elementidele lisada ka varjusid. Varju lisamiseks kasutatakse omadust <em>box-shadow<\/em>. Kindlasti tuleb m\u00e4\u00e4rata kaks parameetrit j\u00e4rgnevas j\u00e4rjestuses:<\/p>\n<ul>\n<li>horisontaalne nihe (<em>horizontal offset<\/em>) \u2013 varju horisontaalne asukoht objekti suhtes, v\u00e4\u00e4rtus pikslites, kasutada saab ka negatiivseid v\u00e4\u00e4rtuseid (nihutab varju vasakule);<\/li>\n<li>vertikaalne nihe (<em>vertical offset<\/em>) \u2013 varju vertikaalne asukoht objekti suhtes, v\u00e4\u00e4rtus pikslites, kasutada saab ka negatiivseid v\u00e4\u00e4rtuseid (nihutab varju \u00fcles).<\/li>\n<\/ul>\n<p>N\u00e4iteks lisame elementidele <code>&lt;div&gt;<\/code> varju, mis on elemendist 15 pikslit paremale ja 15 pikslit allapoole nihutatud:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  box-shadow: 15px 15px;\r\n}<\/pre>\n<figure id=\"attachment_370\" aria-describedby=\"caption-attachment-370\" style=\"width: 422px\" class=\"wp-caption aligncenter\"><img class=\"size-full wp-image-370\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2.png\" alt=\"Tavaline vari\" width=\"422\" height=\"152\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2.png 422w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2-300x108.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2-65x23.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2-225x81.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari2-350x126.png 350w\" \/><figcaption id=\"caption-attachment-370\" class=\"wp-caption-text\">Tavaline vari<\/figcaption><\/figure>\n<p>Lisaks saab m\u00e4\u00e4rata valikulisi parameetreid j\u00e4rgnevas j\u00e4rjestuses:<\/p>\n<ul>\n<li>h\u00e4gustamise ulatus (<em>blur distance<\/em>) \u2013 v\u00e4\u00e4rtus pikslites, kui palju varju serva h\u00e4gustatakse;<\/li>\n<li>ulatus (<em>spread<\/em>) \u2013 v\u00e4\u00e4rtus pikslites, m\u00e4\u00e4rab varju suuruse;<\/li>\n<li>v\u00e4rv \u2013 varju v\u00e4rv, vaikev\u00e4\u00e4rtuseks on must.<\/li>\n<\/ul>\n<p>N\u00e4iteks lisame varju, millel lisaks horisontaalsele ja vertikaalsele nihkele on m\u00e4\u00e4ratud h\u00e4gustamise ulatus 15 pikslit ning punane v\u00e4rv, varju ulatus on j\u00e4etud m\u00e4\u00e4ramata:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">div {\r\n  box-shadow: 15px 15px 15px #F00;\r\n}<\/pre>\n<figure id=\"attachment_369\" aria-describedby=\"caption-attachment-369\" style=\"width: 397px\" class=\"wp-caption aligncenter\"><img class=\"size-full wp-image-369\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1.png\" alt=\"H\u00e4gustatud servaga punane vari\" width=\"397\" height=\"175\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1.png 397w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1-300x132.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1-65x29.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1-225x99.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari1-350x154.png 350w\" \/><figcaption id=\"caption-attachment-369\" class=\"wp-caption-text\">H\u00e4gustatud servaga punane vari<\/figcaption><\/figure>\n<p>V\u00f5imalik on varju ka objektile sissepoole p\u00f6\u00f6rata, selleks tuleb k\u00f5ige viimaseks parameetriks lisada:<\/p>\n<ul>\n<li><em>inset<\/em> (sisse panema) \u2013 muudab v\u00e4lise varju sisemiseks varjuks.<\/li>\n<\/ul>\n<p>Loomulikult saab omadusel <em>box-shadow<\/em> kasutada ka standardseid v\u00e4\u00e4rtuseid:<\/p>\n<ul>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n<li><em>inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (<em>parent<\/em>)).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  box-shadow: 0px 0px 15px #F00 inset;\r\n}<\/pre>\n<figure id=\"attachment_371\" aria-describedby=\"caption-attachment-371\" style=\"width: 336px\" class=\"wp-caption aligncenter\"><img class=\"size-full wp-image-371\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari3.png\" alt=\"Sisemine vari\" width=\"336\" height=\"137\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari3.png 336w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari3-300x122.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari3-65x27.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari3-225x92.png 225w\" \/><figcaption id=\"caption-attachment-371\" class=\"wp-caption-text\">Sisemine vari<\/figcaption><\/figure>\n<p>\u00dchele elemendile saab lisada kaks varju, selleks tuleb need komaga eraldatult kirja panna. N\u00e4iteks lisame \u00fchele elemendile nii v\u00e4lise varju (nihke v\u00e4\u00e4rtuseks 0px, siis on tegemist justkui haloga) ning seesmise varju:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  box-shadow: 0px 0px 15px #F00, 0px 0px 15px #F00 inset;\r\n}\r\n<\/pre>\n<figure id=\"attachment_372\" aria-describedby=\"caption-attachment-372\" style=\"width: 347px\" class=\"wp-caption aligncenter\"><img class=\"size-full wp-image-372\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari4.png\" alt=\"Element kahe varjuga (seesmine ja v\u00e4line halo)\" width=\"347\" height=\"147\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari4.png 347w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari4-300x127.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari4-65x28.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/vari4-225x95.png 225w\" \/><figcaption id=\"caption-attachment-372\" class=\"wp-caption-text\">Element kahe varjuga (seesmine ja v\u00e4line halo)<\/figcaption><\/figure>\n<h2>Kontuur<\/h2>\n<p>Olemas on v\u00f5imalus plokielementidele kontuurjoon (<em>outline<\/em>) lisada. Kontuurjoon lisatakse v\u00e4ljapoole elemendi enda piiri (ja raamjoont (<em>border<\/em>)), eesm\u00e4rgiks elemendi silmatorkavaks muutmine.<\/p>\n<p>M\u00e4\u00e4ratakse kolm omadust:<\/p>\n<ul>\n<li><em>outline-color<\/em> \u2013 kontuurjoone v\u00e4rv;<\/li>\n<li><em>outline-style<\/em> \u2013 kontuurjoone stiil (samad, mis raamjoone (<em>border<\/em>) puhul);<\/li>\n<li><em>outline-width<\/em> \u2013 kontuurjoone paksus.<\/li>\n<\/ul>\n<p>Kontuurjoone kirjeldus v\u00f5ib olla ka l\u00fchendatud,siis kirjutatakse see kujul:<\/p>\n<p style=\"padding-left: 40px;\">outline: v\u00e4rv stiil paksus; (omaduste j\u00e4rjekord ei ole oluline)<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h1 {\r\n  border: 4px solid black;\r\n  outline: gray solid 5px;\r\n}\r\n<\/pre>\n<figure id=\"attachment_375\" aria-describedby=\"caption-attachment-375\" style=\"width: 323px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-375 size-full\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur.png\" alt=\"Element musta raamjoone ja halli kontuuriga\" width=\"323\" height=\"142\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur.png 323w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur-300x132.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur-65x29.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur-225x99.png 225w\" \/><figcaption id=\"caption-attachment-375\" class=\"wp-caption-text\">Element musta raamjoone ja halli kontuuriga<\/figcaption><\/figure>\n<p>M\u00e4\u00e4rata saab ka\u2013 kontuurjoone kaugus elemendist, selleks on omadus <em>outline-offset<\/em>.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h2 {\r\n  border: 4px solid black;\r\n  outline: gray solid 5px;\r\n  outline-offset: 5px;\r\n}<\/pre>\n<figure id=\"attachment_376\" aria-describedby=\"caption-attachment-376\" style=\"width: 350px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-376\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2.png\" alt=\"Element kontuurjoonega, mis on eemale nihutatud\" width=\"350\" height=\"167\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2.png 475w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2-300x143.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2-65x31.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2-225x107.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/kontuur_2-350x167.png 350w\" \/><figcaption id=\"caption-attachment-376\" class=\"wp-caption-text\">Element kontuurjoonega, mis on eemale nihutatud<\/figcaption><\/figure>\n<h1>Polsterdus<\/h1>\n<p>CSS v\u00f5imaldab m\u00e4\u00e4rata ka polsterdust (<em>padding<\/em>) ehk ruumi veebilehe elemendi serva ja tema sisu vahel. Polsterduse arvv\u00e4\u00e4rtuse v\u00f5ib m\u00e4\u00e4rata pikkus\u00fchikutes v\u00f5i protsentides sisaldava elemendi laiuse suhtes.<\/p>\n<p>N\u00e4iteks tekstil\u00f5ik koos raami ja polsterdusega:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p {\r\n  border: 1px solid red;\r\n  padding: 10px;\r\n}<\/pre>\n<figure id=\"attachment_381\" aria-describedby=\"caption-attachment-381\" style=\"width: 306px\" class=\"wp-caption aligncenter\"><img class=\"size-full wp-image-381\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_1.png\" alt=\"Elemendil polsterdus 0px\" width=\"306\" height=\"42\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_1.png 306w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_1-300x41.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_1-65x9.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_1-225x31.png 225w\" \/><figcaption id=\"caption-attachment-381\" class=\"wp-caption-text\">Elemendil polsterdus 0px<\/figcaption><\/figure>\n<figure id=\"attachment_382\" aria-describedby=\"caption-attachment-382\" style=\"width: 287px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-382 size-full\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_2.png\" alt=\"Elemendil polsterdus 10px\" width=\"287\" height=\"71\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_2.png 287w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_2-65x16.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/polsterdus_2-225x56.png 225w\" \/><figcaption id=\"caption-attachment-382\" class=\"wp-caption-text\">Elemendil polsterdus 10px<\/figcaption><\/figure>\n<p>Polsterdust saab m\u00e4\u00e4rata eraldi \u00fcleval, all, vasakul ja paremal, sellisel juhul lisatakse omaduse <em>padding<\/em> nimele liide <em>\u2013top, -bottom, -left<\/em> v\u00f5i <em>-right.<\/em><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  padding-top: 5px;\r\n  padding-bottom: 5px;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n}<\/pre>\n<p>Polsterdust saab m\u00e4\u00e4rata korraga mitmele k\u00fcljele:<\/p>\n<p style=\"padding-left: 40px;\"><em>div {padding: 0.5cm 2.5cm 2cm 4cm}<\/em><\/p>\n<p>Seejuures v\u00f5ib t\u00fchikutega eraldatult kirja panna mitu v\u00e4\u00e4rtust variantides:<\/p>\n<ul>\n<li>2 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele\/alumisele, teine vasakule\/paremale;<\/li>\n<li>3 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine vasakule\/paremale, kolmas alumisele;<\/li>\n<li>4 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine paremale, kolmas alumisele ja neljas vasakule.<\/li>\n<\/ul>\n<p><span class=\"nb\">NB! Polsterdus lisatakse tavaliselt elemendi h\u00f5ivatavale pinnale ehk m\u00f5\u00f5tmetele.<\/span><\/p>\n<h1>Veerised<\/h1>\n<p>CSS v\u00f5imaldab m\u00e4\u00e4rata ka t\u00fchja ruumi veebilehe elementide \u00fcmber \u2013 veeriseid (<em>margin<\/em>). Veeriseid saab m\u00e4\u00e4rata tekstil\u00f5ikudele, piltidele jne.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p { \r\n  margin: 0px;\r\n}<\/pre>\n<p><span class=\"nb\">NB! Veerised lisatakse tavaliselt elemendi h\u00f5ivatavale pinnale!<\/span><\/p>\n<p>Veerise arvv\u00e4\u00e4rtuse v\u00f5ib m\u00e4\u00e4rata pikkus\u00fchikutes v\u00f5i protsentides sisaldava elemendi laiuse suhtes.<\/p>\n<p>Eraldi saab m\u00e4\u00e4rata veeriseid \u00fcleval, all, vasakul ja paremal! Sellisel juhul lisatakse omaduse <em>margin<\/em> nimele liide <em>\u2013top, -bottom, -left<\/em> v\u00f5i <em>-right<\/em>.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img {\r\n  margin-top: 5cm;\r\n  margin-bottom: 20pt;\r\n  margin-left: 25%;\r\n  margin-right: 5px;\r\n}\r\n<\/pre>\n<p>V\u00f5imalik on kasutada ka v\u00e4\u00e4rtust \u201e<em>auto<\/em>\u201c, mille puhul arvutab veeris(t)e suuruse veebilehitseja.<\/p>\n<p><span class=\"nb\">NB! Kui m\u00e4\u00e4rata vasaku ja parema veerise v\u00e4\u00e4rtusteks korraga <em>auto<\/em>, siis paigutatakse objekt keskele!<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">img {\r\n  margin-left:auto; \r\n  margin-right:auto;\r\n}<\/pre>\n<p>v\u00f5i<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img {\r\n  margin:auto;\r\n}<\/pre>\n<p>Veeriseid saab m\u00e4\u00e4rata \u00fchekorraga mitmele servale, siis kasutatakse omadust <em>margin<\/em> ja pannakse t\u00fchikutega eraldatult kirja \u00fcks kuni neli v\u00e4\u00e4rtust.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">div.eraldatud {\r\n  margin: 2px 4px 3px 4px;\r\n}<\/pre>\n<p>Seejuures v\u00f5ib t\u00fchikutega eraldatult kirja panna mitu v\u00e4\u00e4rtust variantides:<\/p>\n<ul>\n<li>1 v\u00e4\u00e4rtus \u2013 \u00fcmberringi \u00fchesugune veeris<\/li>\n<li>2 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele\/alumisele, teine vasakule\/paremale;<\/li>\n<li>3 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine vasakule\/paremale, kolmas alumisele;<\/li>\n<li>4 v\u00e4\u00e4rtust \u2013 esimene \u00fclemisele, teine paremale, kolmas alumisele ja neljas vasakule.<\/li>\n<\/ul>\n","protected":false},"author":1,"menu_order":4,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/378"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":9,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/378\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/378\/revisions\/450"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/378\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=378"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=378"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}