{"id":295,"date":"2020-03-07T10:48:04","date_gmt":"2020-03-07T10:48:04","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=295"},"modified":"2020-03-11T13:04:53","modified_gmt":"2020-03-11T13:04:53","slug":"varvid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/varvid\/","title":{"rendered":"V\u00e4rvid"},"content":{"raw":"V\u00e4rvid on igasuguse kujundamise juures v\u00e4ga olulised ja seet\u00f5ttu on neil ka CSS-is oluline roll.\r\n\r\nV\u00e4rve saab m\u00e4\u00e4rata v\u00e4ga mitmel moel:\r\n<ul>\r\n \t<li>konstantidena \u2013 nimetustega;<\/li>\r\n \t<li>HEX v\u00e4\u00e4rtustena \u2013 kuueteistk\u00fcmnends\u00fcsteemi (<em>hexadecimal<\/em>) arvudena;<\/li>\r\n \t<li>RGB ja RGBA v\u00e4\u00e4rtustena \u2013 RGB v\u00e4rvimudeli j\u00e4rgi;<\/li>\r\n \t<li>HSL ja HSLA v\u00e4\u00e4rtustena \u2013 HSL v\u00e4rvimudeli j\u00e4rgi.<\/li>\r\n<\/ul>\r\nN\u00e4iteks<strong>:<\/strong>\r\n<table style=\"border-collapse: collapse; width: 100%; height: 62px;\" border=\"0\">\r\n<tbody>\r\n<tr style=\"height: 13px;\">\r\n<th style=\"width: 20%; height: 13px;\"><\/th>\r\n<th style=\"width: 20%; height: 13px;\">konstant<\/th>\r\n<th style=\"width: 20%; height: 13px;\">HEX<\/th>\r\n<th style=\"width: 20%; height: 13px;\">RGB<\/th>\r\n<th style=\"width: 20%; height: 13px;\">HLS<\/th>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 10px;\">must<\/td>\r\n<td style=\"width: 20%; height: 10px;\">black<\/td>\r\n<td style=\"width: 20%; height: 10px;\">#000000<\/td>\r\n<td style=\"width: 20%; height: 10px;\">rgb(0,0,0)<\/td>\r\n<td style=\"width: 20%; height: 10px;\">hsl(0,0%,0%)<\/td>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 13px;\">valge<\/td>\r\n<td style=\"width: 20%; height: 13px;\">white<\/td>\r\n<td style=\"width: 20%; height: 13px;\">#FFFFFF<\/td>\r\n<td style=\"width: 20%; height: 13px;\">rgb(255,255,255)<\/td>\r\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,100%)<\/td>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 13px;\">punane<\/td>\r\n<td style=\"width: 20%; height: 13px;\">red<\/td>\r\n<td style=\"width: 20%; height: 13px;\">#FF0000<\/td>\r\n<td style=\"width: 20%; height: 13px;\">rgb(255,0,0)<\/td>\r\n<td style=\"width: 20%; height: 13px;\">hsl(0,100%,50%)<\/td>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 13px;\">hall<\/td>\r\n<td style=\"width: 20%; height: 13px;\">gray<\/td>\r\n<td style=\"width: 20%; height: 13px;\">#808080<\/td>\r\n<td style=\"width: 20%; height: 13px;\">rgb(128,128,128)<\/td>\r\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,50%)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h1>V\u00e4rvikonstandid<\/h1>\r\n<div class=\"textbox textbox--sidebar shaded\">V\u00e4rvikonstantide nimed leiad aadressilt: <a href=\"https:\/\/www.w3schools.com\/cssref\/css_colors.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/cssref\/css_colors.asp<\/a><\/div>\r\n\u00dcsna tavaline on ka v\u00e4rvikonstantide ehk nimede kasutamine. CSS spetsifikatsioonis on kokku 147 v\u00e4rvi nime (17 standardv\u00e4rvi ja 130 t\u00e4iendavat). Standardv\u00e4rvideks on: <em>aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, <\/em><em>white<\/em> ja <em>yellow<\/em>.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: gray\r\n}<\/pre>\r\n<h1>V\u00e4rvid HEX v\u00e4\u00e4rtusteta<\/h1>\r\n<div class=\"textbox textbox--sidebar shaded\">P\u00f5hjalikku infot v\u00e4rvide HEX koodide kohta leiad aadressilt: <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_hex.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/css\/css_colors_hex.asp<\/a><\/div>\r\nK\u00f5ige tavap\u00e4rasem on CSS keeles v\u00e4rve kirja panna kuusteistk\u00fcmmends\u00fcsteemi (<em>hexadecimal<\/em> ehk HEX), kus k\u00f5ik arvud pannakse kirja numbritega 0 \u2026 9 ja t\u00e4htedega A, B, C, D, E ja F (siin A = 10, B = 11 \u2026 F = 15) koodidena kujul #xxxxxx. Iga numbri ja\/v\u00f5i t\u00e4hepaar m\u00e4\u00e4rab RGB (<em>red<\/em>, <em>green<\/em>, <em>blue<\/em>) v\u00e4rvimudeli vastava v\u00e4rvikomponendi v\u00e4\u00e4rtuse.\r\n\r\nN\u00e4iteks:\r\n<em>#FFB933<\/em>\r\n\r\nNeed paarid saadakse RGB v\u00e4\u00e4rtustest k\u00fcmnends\u00fcsteemis j\u00e4\u00e4giga jagamisel. K\u00fcmnends\u00fcsteemis v\u00e4\u00e4rtus jagatakse 16 \u2013ga, t\u00e4isarvukordne annab esimese \u201enumbri\u201c ning j\u00e4\u00e4k teise. N\u00e4iteks kui k\u00fcmnends\u00fcsteemis on v\u00e4\u00e4rtus 198, siis selle jagamisel 16-ga, saame\r\njagatise t\u00e4isosaks 12 ehk kuueteistk\u00fcmmends\u00fcsteemis C ning j\u00e4\u00e4giks 6, kokku C6.\r\n\r\nVeebilehele saab niimoodi n\u00e4iteks taustav\u00e4rvi m\u00e4\u00e4rata:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n  background-color: #FFE799\r\n}<\/pre>\r\n<h1>V\u00e4rvid RGB ja RGBA v\u00e4\u00e4rtustena<\/h1>\r\n<div class=\"textbox textbox--sidebar shaded\">Rohkem n\u00e4iteid erinevatest RGB ja RGBA v\u00e4\u00e4rtustest leiad aadressilt: <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_rgb.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/css\/css_colors_rgb.asp<\/a><\/div>\r\nKasutada v\u00f5ib ka RGB v\u00e4\u00e4rtuseid tavap\u00e4rasemal kujul rgb(x,x,x), kus iga arv on vastava v\u00e4rvikomponendi v\u00e4\u00e4rtus k\u00fcmnendkujul.\r\n\r\nN\u00e4iteks:\r\n<em>rgb(255,135,22)<\/em>\r\n\r\nKasutada saab rgba v\u00e4rve, kus a t\u00e4hendab <em>alpha<\/em> v\u00e4\u00e4rtust ehk l\u00e4bipaistvust (sarnane omadusega <em>opacity<\/em>). Alpha v\u00e4\u00e4rtused on vahemikus 0 \u2013 1.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: rgba(255, 0, 0, 0.2)\r\n}<\/pre>\r\n<h1>V\u00e4rvid HSL ja HSLA v\u00e4\u00e4rtustena<\/h1>\r\n<div class=\"textbox textbox--sidebar shaded\">Rohkem n\u00e4iteid HSL ja HSLA v\u00e4\u00e4rtustest: <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_hsl.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/css\/css_colors_hsl.asp<\/a><\/div>\r\nKasutusele on v\u00f5etud ka HSL v\u00e4rvimudel, millede puhul m\u00e4\u00e4ratakse v\u00e4rv kolme komponendiga:\r\n<ul>\r\n \t<li>Hue \u2013 v\u00e4rvitoon, v\u00e4\u00e4rtus vahemikus 0 \u2013 360, mis vastab v\u00e4rvuse asukohale v\u00e4rvirattal (punane on 0 ja 360, roheline on 120 ja sinine on 240);<\/li>\r\n \t<li>Saturation \u2013 k\u00fcllastus, v\u00e4\u00e4rtus vahemikus 0 \u2013 100%, n\u00e4itab v\u00e4rvi k\u00fcllastust (0 \u2013 v\u00e4rvi\r\npole, 100% \u2013 puhas v\u00e4rv);<\/li>\r\n \t<li>Lightness \u2013 heledus, v\u00e4\u00e4rtus vahemikus 0 \u2013 100%, n\u00e4itab heledust (0 \u2013 maksimaalselt\r\ntume ehk must, 50% - normaalne v\u00e4rv, 100% - maksimaalselt hele ehk valge).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: hsl(120,100%,50%)\r\n}<\/pre>\r\nSarnaselt RGB mudeli l\u00e4bipaistvusele on ka HSL puhul kasutusel uuendatud mudel <em>alpha<\/em> v\u00e4\u00e4rtusega \u2013 HSLA. <em>Alpha<\/em> v\u00e4\u00e4rtus on ikka k\u00fcmnendmurruna vahemikus 0 \u2013 1.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: hsla(120,100%,50%,0.2)\r\n}<\/pre>\r\n&nbsp;","rendered":"<p>V\u00e4rvid on igasuguse kujundamise juures v\u00e4ga olulised ja seet\u00f5ttu on neil ka CSS-is oluline roll.<\/p>\n<p>V\u00e4rve saab m\u00e4\u00e4rata v\u00e4ga mitmel moel:<\/p>\n<ul>\n<li>konstantidena \u2013 nimetustega;<\/li>\n<li>HEX v\u00e4\u00e4rtustena \u2013 kuueteistk\u00fcmnends\u00fcsteemi (<em>hexadecimal<\/em>) arvudena;<\/li>\n<li>RGB ja RGBA v\u00e4\u00e4rtustena \u2013 RGB v\u00e4rvimudeli j\u00e4rgi;<\/li>\n<li>HSL ja HSLA v\u00e4\u00e4rtustena \u2013 HSL v\u00e4rvimudeli j\u00e4rgi.<\/li>\n<\/ul>\n<p>N\u00e4iteks<strong>:<\/strong><\/p>\n<table style=\"border-collapse: collapse; width: 100%; height: 62px;\">\n<tbody>\n<tr style=\"height: 13px;\">\n<th style=\"width: 20%; height: 13px;\"><\/th>\n<th style=\"width: 20%; height: 13px;\">konstant<\/th>\n<th style=\"width: 20%; height: 13px;\">HEX<\/th>\n<th style=\"width: 20%; height: 13px;\">RGB<\/th>\n<th style=\"width: 20%; height: 13px;\">HLS<\/th>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 10px;\">must<\/td>\n<td style=\"width: 20%; height: 10px;\">black<\/td>\n<td style=\"width: 20%; height: 10px;\">#000000<\/td>\n<td style=\"width: 20%; height: 10px;\">rgb(0,0,0)<\/td>\n<td style=\"width: 20%; height: 10px;\">hsl(0,0%,0%)<\/td>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 13px;\">valge<\/td>\n<td style=\"width: 20%; height: 13px;\">white<\/td>\n<td style=\"width: 20%; height: 13px;\">#FFFFFF<\/td>\n<td style=\"width: 20%; height: 13px;\">rgb(255,255,255)<\/td>\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,100%)<\/td>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 13px;\">punane<\/td>\n<td style=\"width: 20%; height: 13px;\">red<\/td>\n<td style=\"width: 20%; height: 13px;\">#FF0000<\/td>\n<td style=\"width: 20%; height: 13px;\">rgb(255,0,0)<\/td>\n<td style=\"width: 20%; height: 13px;\">hsl(0,100%,50%)<\/td>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 13px;\">hall<\/td>\n<td style=\"width: 20%; height: 13px;\">gray<\/td>\n<td style=\"width: 20%; height: 13px;\">#808080<\/td>\n<td style=\"width: 20%; height: 13px;\">rgb(128,128,128)<\/td>\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,50%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1>V\u00e4rvikonstandid<\/h1>\n<div class=\"textbox textbox--sidebar shaded\">V\u00e4rvikonstantide nimed leiad aadressilt: <a href=\"https:\/\/www.w3schools.com\/cssref\/css_colors.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/cssref\/css_colors.asp<\/a><\/div>\n<p>\u00dcsna tavaline on ka v\u00e4rvikonstantide ehk nimede kasutamine. CSS spetsifikatsioonis on kokku 147 v\u00e4rvi nime (17 standardv\u00e4rvi ja 130 t\u00e4iendavat). Standardv\u00e4rvideks on: <em>aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, <\/em><em>white<\/em> ja <em>yellow<\/em>.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: gray\r\n}<\/pre>\n<h1>V\u00e4rvid HEX v\u00e4\u00e4rtusteta<\/h1>\n<div class=\"textbox textbox--sidebar shaded\">P\u00f5hjalikku infot v\u00e4rvide HEX koodide kohta leiad aadressilt: <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_hex.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/css\/css_colors_hex.asp<\/a><\/div>\n<p>K\u00f5ige tavap\u00e4rasem on CSS keeles v\u00e4rve kirja panna kuusteistk\u00fcmmends\u00fcsteemi (<em>hexadecimal<\/em> ehk HEX), kus k\u00f5ik arvud pannakse kirja numbritega 0 \u2026 9 ja t\u00e4htedega A, B, C, D, E ja F (siin A = 10, B = 11 \u2026 F = 15) koodidena kujul #xxxxxx. Iga numbri ja\/v\u00f5i t\u00e4hepaar m\u00e4\u00e4rab RGB (<em>red<\/em>, <em>green<\/em>, <em>blue<\/em>) v\u00e4rvimudeli vastava v\u00e4rvikomponendi v\u00e4\u00e4rtuse.<\/p>\n<p>N\u00e4iteks:<br \/>\n<em>#FFB933<\/em><\/p>\n<p>Need paarid saadakse RGB v\u00e4\u00e4rtustest k\u00fcmnends\u00fcsteemis j\u00e4\u00e4giga jagamisel. K\u00fcmnends\u00fcsteemis v\u00e4\u00e4rtus jagatakse 16 \u2013ga, t\u00e4isarvukordne annab esimese \u201enumbri\u201c ning j\u00e4\u00e4k teise. N\u00e4iteks kui k\u00fcmnends\u00fcsteemis on v\u00e4\u00e4rtus 198, siis selle jagamisel 16-ga, saame<br \/>\njagatise t\u00e4isosaks 12 ehk kuueteistk\u00fcmmends\u00fcsteemis C ning j\u00e4\u00e4giks 6, kokku C6.<\/p>\n<p>Veebilehele saab niimoodi n\u00e4iteks taustav\u00e4rvi m\u00e4\u00e4rata:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n  background-color: #FFE799\r\n}<\/pre>\n<h1>V\u00e4rvid RGB ja RGBA v\u00e4\u00e4rtustena<\/h1>\n<div class=\"textbox textbox--sidebar shaded\">Rohkem n\u00e4iteid erinevatest RGB ja RGBA v\u00e4\u00e4rtustest leiad aadressilt: <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_rgb.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/css\/css_colors_rgb.asp<\/a><\/div>\n<p>Kasutada v\u00f5ib ka RGB v\u00e4\u00e4rtuseid tavap\u00e4rasemal kujul rgb(x,x,x), kus iga arv on vastava v\u00e4rvikomponendi v\u00e4\u00e4rtus k\u00fcmnendkujul.<\/p>\n<p>N\u00e4iteks:<br \/>\n<em>rgb(255,135,22)<\/em><\/p>\n<p>Kasutada saab rgba v\u00e4rve, kus a t\u00e4hendab <em>alpha<\/em> v\u00e4\u00e4rtust ehk l\u00e4bipaistvust (sarnane omadusega <em>opacity<\/em>). Alpha v\u00e4\u00e4rtused on vahemikus 0 \u2013 1.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: rgba(255, 0, 0, 0.2)\r\n}<\/pre>\n<h1>V\u00e4rvid HSL ja HSLA v\u00e4\u00e4rtustena<\/h1>\n<div class=\"textbox textbox--sidebar shaded\">Rohkem n\u00e4iteid HSL ja HSLA v\u00e4\u00e4rtustest: <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_hsl.asp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3schools.com\/css\/css_colors_hsl.asp<\/a><\/div>\n<p>Kasutusele on v\u00f5etud ka HSL v\u00e4rvimudel, millede puhul m\u00e4\u00e4ratakse v\u00e4rv kolme komponendiga:<\/p>\n<ul>\n<li>Hue \u2013 v\u00e4rvitoon, v\u00e4\u00e4rtus vahemikus 0 \u2013 360, mis vastab v\u00e4rvuse asukohale v\u00e4rvirattal (punane on 0 ja 360, roheline on 120 ja sinine on 240);<\/li>\n<li>Saturation \u2013 k\u00fcllastus, v\u00e4\u00e4rtus vahemikus 0 \u2013 100%, n\u00e4itab v\u00e4rvi k\u00fcllastust (0 \u2013 v\u00e4rvi<br \/>\npole, 100% \u2013 puhas v\u00e4rv);<\/li>\n<li>Lightness \u2013 heledus, v\u00e4\u00e4rtus vahemikus 0 \u2013 100%, n\u00e4itab heledust (0 \u2013 maksimaalselt<br \/>\ntume ehk must, 50% &#8211; normaalne v\u00e4rv, 100% &#8211; maksimaalselt hele ehk valge).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: hsl(120,100%,50%)\r\n}<\/pre>\n<p>Sarnaselt RGB mudeli l\u00e4bipaistvusele on ka HSL puhul kasutusel uuendatud mudel <em>alpha<\/em> v\u00e4\u00e4rtusega \u2013 HSLA. <em>Alpha<\/em> v\u00e4\u00e4rtus on ikka k\u00fcmnendmurruna vahemikus 0 \u2013 1.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-color: hsla(120,100%,50%,0.2)\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"menu_order":7,"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":29,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/295"}],"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":11,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/295\/revisions"}],"predecessor-version":[{"id":447,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/295\/revisions\/447"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/29"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/295\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=295"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=295"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=295"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}