{"id":488,"date":"2020-03-11T15:47:15","date_gmt":"2020-03-11T15:47:15","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=488"},"modified":"2020-03-11T16:27:33","modified_gmt":"2020-03-11T16:27:33","slug":"kasutajaliides","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/kasutajaliides\/","title":{"rendered":"Kasutajaliides"},"content":{"raw":"

Ploki suuruse muutmine<\/h1>\r\nVeebilehe elementidele on v\u00f5imalik m\u00e4\u00e4rata v\u00f5imalus nende suurust muuta. Selleks on omadus resize<\/em>, mille v\u00f5imalikud v\u00e4\u00e4rtused on both<\/em>; horizontal<\/em> ja vertical<\/em>.\r\n\r\nKoos omadustega min-width<\/em>, min-height<\/em>, max-width<\/em> ja max-height<\/em> saab luua h\u00e4sti kontrollitavaid elemente.\r\n\r\n[caption id=\"attachment_494\" align=\"aligncenter\" width=\"300\"]\"Muudetav Muudetav suurusega element[\/caption]\r\n

Kursori kuju m\u00e4\u00e4ramine<\/h1>\r\nCSS-i abil saab m\u00e4\u00e4rata ka seda, kuidas n\u00e4eb v\u00e4lja kursor elemendile osutades. Selleks kasutatakse omadust cursor<\/em>.\r\n\r\nKasutada saab j\u00e4rgmiseid suurt hulka v\u00e4\u00e4rtuseid, m\u00f5ned neist:\r\n
    \r\n \t
  • default<\/em> \u2013 enamasti nool, vaikev\u00e4\u00e4rtus;<\/li>\r\n \t
  • auto<\/em> \u2013 brauser m\u00e4\u00e4rab kursori kuju;<\/li>\r\n \t
  • help<\/em> \u2013 kursor viitab abiingo olemasolule (k\u00fcsim\u00e4rgiga);<\/li>\r\n \t
  • pointer<\/em> \u2013 k\u00e4si, viitab h\u00fcperlingile;<\/li>\r\n \t
  • wait<\/em> \u2013 liivakell;<\/li>\r\n \t
  • progress<\/em> \u2013 nool liivakellaga, vaja oodata;<\/li>\r\n \t
  • URL<\/em> \u2013 oma kursori pildifail;<\/li>\r\n \t
  • alias<\/em> \u2013 viitab millelegi, mida luuakse;<\/li>\r\n \t
  • all-scroll<\/em> \u2013 sisu saab igas suunas kerida;<\/li>\r\n \t
  • move<\/em> \u2013 millegi liigutamine;<\/li>\r\n \t
  • e-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize, w-resize<\/em> \u2013 erinevates suundades suuruse muutmine.<\/li>\r\n<\/ul>\r\nNB! Erinevate fraasi \"resize<\/em>\" sisaldavate v\u00e4\u00e4rtuste korral t\u00e4histavad t\u00e4hed ilmakaari: n \u2013 p\u00f5hi, e \u2013 ida, s \u2013 l\u00f5una ja w \u2013 l\u00e4\u00e4s.<\/span>\r\n\r\nN\u00e4iteks:\r\n
    h2 {\r\n  cursor: crosshair;\r\n}<\/pre>\r\n[caption id=\"attachment_495\" align=\"aligncenter\" width=\"500\"]\"N\u00e4iteid N\u00e4iteid erinevatest v\u00f5imalikest kursoritest[\/caption]\r\n\r\nNB! Kasutades erilisi kursoreid m\u00e4\u00e4rates nende url-i, tasub loetleda mitu v\u00f5imalikku ja nimekirja l\u00f5ppu m\u00f5ni tavap\u00e4rane juhuks kui \u00fckski eriline ei t\u00f6\u00f6ta!<\/span>\r\n
    img {\r\n  cursor : url(\"esimene.cur\"), url(\"teine.cur\"), pointer;\r\n}<\/pre>\r\n
    Teksti valimise lubamine<\/h1>\r\nCSS3 pakub veebilehe autorile ka v\u00f5imalust m\u00e4\u00e4rata, kas mingi elemendi sisuks olevat teksti saab kasutaja valida (select<\/em>) v\u00f5i mitte.\r\n\r\nOmadus user-select<\/em> v\u00f5ib saada j\u00e4rgmised v\u00e4\u00e4rtused:\r\n
      \r\n \t
    • auto<\/em> \u2013 teksti saab valida, kui brauser seda lubab (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
    • none<\/em> \u2013 teksti valimine on keelatud;<\/li>\r\n \t
    • text<\/em> \u2013 teksti valimine on lubatud;<\/li>\r\n \t
    • all<\/em> \u2013 teksti valimine toimub \u00fche kl\u00f5psuga (topeltkl\u00f5psu asemel).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
      thead {\r\n  user-select: none;\r\n}<\/pre>","rendered":"
      Ploki suuruse muutmine<\/h1>\n
      Veebilehe elementidele on v\u00f5imalik m\u00e4\u00e4rata v\u00f5imalus nende suurust muuta. Selleks on omadus resize<\/em>, mille v\u00f5imalikud v\u00e4\u00e4rtused on both<\/em>; horizontal<\/em> ja vertical<\/em>.<\/p>\n
      Koos omadustega min-width<\/em>, min-height<\/em>, max-width<\/em> ja max-height<\/em> saab luua h\u00e4sti kontrollitavaid elemente.<\/p>\n
      \"Muudetav
      Muudetav suurusega element<\/figcaption><\/figure>\n
      Kursori kuju m\u00e4\u00e4ramine<\/h1>\n
      CSS-i abil saab m\u00e4\u00e4rata ka seda, kuidas n\u00e4eb v\u00e4lja kursor elemendile osutades. Selleks kasutatakse omadust cursor<\/em>.<\/p>\n
      Kasutada saab j\u00e4rgmiseid suurt hulka v\u00e4\u00e4rtuseid, m\u00f5ned neist:<\/p>\n
        \n
      • default<\/em> \u2013 enamasti nool, vaikev\u00e4\u00e4rtus;<\/li>\n
      • auto<\/em> \u2013 brauser m\u00e4\u00e4rab kursori kuju;<\/li>\n
      • help<\/em> \u2013 kursor viitab abiingo olemasolule (k\u00fcsim\u00e4rgiga);<\/li>\n
      • pointer<\/em> \u2013 k\u00e4si, viitab h\u00fcperlingile;<\/li>\n
      • wait<\/em> \u2013 liivakell;<\/li>\n
      • progress<\/em> \u2013 nool liivakellaga, vaja oodata;<\/li>\n
      • URL<\/em> \u2013 oma kursori pildifail;<\/li>\n
      • alias<\/em> \u2013 viitab millelegi, mida luuakse;<\/li>\n
      • all-scroll<\/em> \u2013 sisu saab igas suunas kerida;<\/li>\n
      • move<\/em> \u2013 millegi liigutamine;<\/li>\n
      • e-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize, w-resize<\/em> \u2013 erinevates suundades suuruse muutmine.<\/li>\n<\/ul>\n
        NB! Erinevate fraasi “resize<\/em>” sisaldavate v\u00e4\u00e4rtuste korral t\u00e4histavad t\u00e4hed ilmakaari: n \u2013 p\u00f5hi, e \u2013 ida, s \u2013 l\u00f5una ja w \u2013 l\u00e4\u00e4s.<\/span><\/p>\n
        N\u00e4iteks:<\/p>\n
        h2 {\r\n  cursor: crosshair;\r\n}<\/pre>\n
        \"N\u00e4iteid
        N\u00e4iteid erinevatest v\u00f5imalikest kursoritest<\/figcaption><\/figure>\n
        NB! Kasutades erilisi kursoreid m\u00e4\u00e4rates nende url-i, tasub loetleda mitu v\u00f5imalikku ja nimekirja l\u00f5ppu m\u00f5ni tavap\u00e4rane juhuks kui \u00fckski eriline ei t\u00f6\u00f6ta!<\/span><\/p>\n
        img {\r\n  cursor : url(\"esimene.cur\"), url(\"teine.cur\"), pointer;\r\n}<\/pre>\n
        Teksti valimise lubamine<\/h1>\n
        CSS3 pakub veebilehe autorile ka v\u00f5imalust m\u00e4\u00e4rata, kas mingi elemendi sisuks olevat teksti saab kasutaja valida (select<\/em>) v\u00f5i mitte.<\/p>\n
        Omadus user-select<\/em> v\u00f5ib saada j\u00e4rgmised v\u00e4\u00e4rtused:<\/p>\n
          \n
        • auto<\/em> \u2013 teksti saab valida, kui brauser seda lubab (vaikev\u00e4\u00e4rtus);<\/li>\n
        • none<\/em> \u2013 teksti valimine on keelatud;<\/li>\n
        • text<\/em> \u2013 teksti valimine on lubatud;<\/li>\n
        • all<\/em> \u2013 teksti valimine toimub \u00fche kl\u00f5psuga (topeltkl\u00f5psu asemel).<\/li>\n<\/ul>\n
          N\u00e4iteks:<\/p>\n
          thead {\r\n  user-select: none;\r\n}<\/pre>\n","protected":false},"author":1,"menu_order":8,"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\/488"}],"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":6,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/488\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/488\/revisions\/496"}],"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\/488\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=488"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=488"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}