{"id":279,"date":"2023-10-09T22:27:18","date_gmt":"2023-10-09T20:27:18","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=279"},"modified":"2023-10-16T07:08:32","modified_gmt":"2023-10-16T05:08:32","slug":"ramcek-okraje-a-rozmery","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=279","title":{"rendered":"R\u00e1m\u010dek, okraje a rozmery"},"content":{"rendered":"<h2><span style=\"font-size: 16px;\">Z\u00e1pis hodn\u00f4t vlastnost\u00ed, pri ktor\u00fdch je mo\u017en\u00e9 nastavova\u0165 v\u0161etky \u0161tyri strany je mo\u017en\u00e9 skr\u00e1ti\u0165.<\/span><\/h2>\n<div id=\"node-388\" class=\"node\">\n<div class=\"content clear-block clear-both \">\n<table>\n<caption>Pr\u00edklad nastavenia vn\u00fatorn\u00e9ho okraja<\/caption>\n<tbody>\n<tr>\n<th>Defin\u00edcia<\/th>\n<th>Horn\u00fd<\/th>\n<th>Prav\u00fd<\/th>\n<th>Doln\u00fd<\/th>\n<th>\u013dav\u00fd<\/th>\n<\/tr>\n<tr>\n<td><code>padding: 1px 2px 3px 4px;<\/code><\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">2<\/td>\n<td align=\"center\">3<\/td>\n<td align=\"center\">4<\/td>\n<\/tr>\n<tr>\n<td><code>padding: 1px 2px 3px;<\/code><\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">2<\/td>\n<td align=\"center\">3<\/td>\n<td align=\"center\">2<\/td>\n<\/tr>\n<tr>\n<td><code>padding: 1px 2px;<\/code><\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">2<\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">2<\/td>\n<\/tr>\n<tr>\n<td><code>padding: 1px;<\/code><\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">1<\/td>\n<td align=\"center\">1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Zdru\u017een\u00e1 defin\u00edcia r\u00e1m\u010deka \u2013 border<\/h3>\n<p>Umo\u017e\u0148uje skr\u00e1ten\u00fd z\u00e1pis v\u0161etk\u00fdch vlastnost\u00ed r\u00e1m\u010deka:<\/p>\n<ul>\n<li>border-width<\/li>\n<li>border-style<\/li>\n<li>border-color<\/li>\n<\/ul>\n<pre>h1 {border: 4px groove green;}\r\np {border: 4px ridge green;}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>Pri pou\u017eit\u00ed zdru\u017eenej defin\u00edcie s\u00fa pri neuveden\u00fdch vlastnostiach nastaven\u00e9 v\u00fdchodiskov\u00e9 hodnoty.<\/p>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 strany:<\/p>\n<pre>body {\r\n  border-top: 10px solid lime;\r\n  border-right: 10px double green;\r\n  border-bottom: 10px dotted purple;\r\n  border-left: 10px dashed blue;\r\n}<\/pre>\n<h3>\u0160\u00edrka r\u00e1m\u010deka \u2013 border-width<\/h3>\n<pre>body {\r\n  border: solid green;\r\n  border-width: 1px 2px 3px 4px;\r\n}<\/pre>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 strany:<\/p>\n<pre>body {\r\n  border: solid green;\r\n  border-top-width: 5px;\r\n  border-right-width: 10px;\r\n  border-bottom-width: 15px;\r\n  border-left-width: 20px;\r\n}<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>\u0160\u00edrka vykres\u013eovania k\u013e\u00fa\u010dov\u00fdch slov (thin, medium, thick) sa v jednotliv\u00fdch prehliada\u010doch l\u00ed\u0161i.<\/p>\n<h3>\u0160t\u00fdl r\u00e1m\u010deka \u2013 border-style<\/h3>\n<ul>\n<li>solid \u2013 spojit\u00fd<\/li>\n<li>double \u2013 dvojit\u00fd<\/li>\n<li>groove \u2013 priekopa<\/li>\n<li>ridge \u2013 val<\/li>\n<li>inset \u2013 stla\u010den\u00fd<\/li>\n<li>outset &#8211; vyst\u00fapen\u00fd<\/li>\n<li>dotted \u2013 bodkovan\u00fd<\/li>\n<li>dashed \u2013 \u010diarkovan\u00fd<\/li>\n<li>none \u2013 \u017eiadny<\/li>\n<\/ul>\n<pre>body {\r\n  border: 10px green;\r\n  border-style: solid;\r\n}<\/pre>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 strany:<\/p>\n<pre>body {\r\n  border: 10px green;\r\n  border-top-style: double;\r\n  border-right-style: dotted;\r\n  border-bottom-style: dashed;\r\n  border-left-style: none;\r\n}<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span>\u00a0vykres\u013euje bodkovan\u00fd r\u00e1m\u010dek so \u0161\u00edrkou 1px \u010diarkovane.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>\u00a0<span class=\"abbr\" title=\"Internet Explorer 5 a ni\u017e\u0161ia verzia\">IE5-<\/span>\u00a0vykres\u013euje bodkovan\u00fd a \u010diarkovan\u00fd r\u00e1m\u010dek ako spojit\u00fd.<\/p>\n<h3>Farba r\u00e1m\u010deka \u2013 border-color<\/h3>\n<pre>body {\r\n  border: 10px solid;\r\n  border-color: \u010derven\u00e1 \u010dierna green;\r\n}<\/pre>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 strany:<\/p>\n<pre>body {\r\n  border: 10px solid;\r\n  border-top-color: \u010derven\u00e1;\r\n  border-right-color: \u010dierna;\r\n  border-bottom-color: blue;\r\n  border-left-color: transparent;\r\n}<\/pre>\n<h3 id=\"border-radius\">Zaoblenie r\u00e1m\u010deka \u2013 border-radius<\/h3>\n<pre>.radius {\r\n   <strong>-webkit-border-radius: 10px 10px 0 0;\r\n\u00a0 -moz-border-radius: 10px 10px 0 0;\r\n\u00a0 -o-border-radius: 10px 10px 0 0;\r\n\u00a0 border-radius: 10px 10px 0 0;<\/strong>\r\n  position: relative;\r\n  <a href=\"https:\/\/tomas.dankovi.info\/node\/583\/\">behavior<\/a> : url('sites\/all\/themes\/legadino\/design\/pie.htc');\r\n}\r\n<\/pre>\n<p>V s\u00fa\u010dasnej dobe nepodporuj\u00fa prehliada\u010de IE a Opera.\u00a0Pre prehliada\u010de Mozilla Firefox, Google Chrome a Safari je mo\u017en\u00e9 u\u017e dnes pou\u017e\u00edva\u0165 sk\u00fa\u0161obn\u00e9 vlastnosti\u00a0<strong>-moz-border-radius<\/strong>\u00a0a\u00a0\u00a0<strong>-webkit-border-radius<\/strong>\u00a0.<\/p>\n<p>Obmedzenie:<\/p>\n<ul>\n<li>zaobli\u0165 rohy elementu\u00a0<code>&lt;img&gt;<\/code>nie je mo\u017en\u00e9, ale m\u00f4\u017eete pou\u017ei\u0165 obr\u00e1zok v pozad\u00ed elementu<code>&lt;div&gt;<\/code><\/li>\n<li>pre prehliada\u010d Opera mus\u00ed by\u0165 \u0161t\u00fdl pre okr\u00fahle ro\u017eky uveden\u00fd v zdrojovom k\u00f3de str\u00e1nky (na odstr\u00e1nen\u00ed tohto obmedzenia sa pracuje)<\/li>\n<\/ul>\n<h3>Vonkaj\u0161\u00ed okraj \u2013 margin<\/h3>\n<pre>p {margin: 1em 0 .5em;}<\/pre>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 strany:<\/p>\n<pre>p {\r\n  margin-top: 1em;\r\n  margin-right: 0;\r\n  margin-bottom: .5em;\r\n  margin-left: 0;\r\n}\r\n<\/pre>\n<h3>Vn\u00fatorn\u00fd okraj \u2013 padding<\/h3>\n<pre>th, td {padding: 0.1em .3em 0;}<\/pre>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 strany:<\/p>\n<pre>th, td {\r\n  padding-top: .1em;\r\n  padding-right: .3em;\r\n  padding-bottom: 0;\r\n  padding-left: .3em;\r\n}<\/pre>\n<h3>V\u00fd\u0161ka \u2013 height<\/h3>\n<ul>\n<li>iba pre blokov\u00e9 elementy (pre riadkov\u00e9 je mo\u017en\u00e9 pou\u017ei\u0165 vlastnos\u0165\u00a0<code>line-height<\/code>)<\/li>\n<li>hodnota vyjadren\u00e1 percentami sa vz\u0165ahuje k zadanej v\u00fd\u0161ke nadraden\u00e9ho elementu<\/li>\n<li>ak je obsah elementu men\u0161\u00ed ako zadan\u00e1 v\u00fd\u0161ka, vytvor\u00ed sa pod obsahom pr\u00e1zdne miesto<\/li>\n<li>prete\u010deniu obsahu rie\u0161i vlastnos\u0165<code>overflow<\/code><\/li>\n<\/ul>\n<pre>#header {height: 100px;}\r\n<\/pre>\n<h3>\u00a0Maxim\u00e1lna v\u00fd\u0161ka \u2013 max-height<\/h3>\n<pre>div {max-height: 100px;}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>Nepodporuje\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span><\/p>\n<h3>Minim\u00e1lna v\u00fd\u0161ka \u2013 min-height<\/h3>\n<pre>div {min-height: 100px;}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>Nepodporuje\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span><\/p>\n<h3>\u0160\u00edrka \u2013 width<\/h3>\n<ul>\n<li>iba pre blokov\u00e9 elementy<\/li>\n<li>hodnota vyjadren\u00e1 percentami sa vz\u0165ahuje k zadanej \u0161\u00edrke nadraden\u00e9ho elementu<\/li>\n<li>ak je obsah elementu men\u0161\u00ed ako zadan\u00e1 \u0161\u00edrka, vytvor\u00ed sa ved\u013ea obsahu pr\u00e1zdne miesto<\/li>\n<li>prete\u010deniu obsahu rie\u0161i vlastnos\u0165<code>overflow<\/code><\/li>\n<\/ul>\n<pre>#header, #content, #footer {width: 760px;}<\/pre>\n<h3>Maxim\u00e1lna \u0161\u00edrka \u2013 max-width<\/h3>\n<pre>div {max-width: 100px;}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>Nepodporuje\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span><\/p>\n<h3>\u00a0Minim\u00e1lna \u0161\u00edrka \u2013 min-width<\/h3>\n<pre>div {min-width: 100px;}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>Nepodporuje\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span><\/p>\n<h3>Tie\u0148 bloku \u2013 box-shadow<\/h3>\n<p>box-shadow: [horizont\u00e1lny posun] [vertik\u00e1lny posun] (rozostrenie) (roztiahnutie) [farba] \u200b\u200b(poz\u00edcia), (&#8230;\u010fal\u0161ie tiene&#8230;)<\/p>\n<pre>.box-shadow {\r\n  -moz-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0     \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 0 -20px 20px 20px rgba(0, 0, 0, .7); \/* FF(3.5-3.6) *\/\r\n  -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0        \u00a0\u00a0\u00a0 0 -20px 20px 20px rgba(0, 0, 0, .7); \/* Chrome(4-9), Safari(3.1-4), iOS(3.2-4.3), Android(2.1-3) *\/\r\n  box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,\r\n              0 -20px 20px 20px rgba(0, 0, 0, .7); \/* Opera10.5+, IE9+ *\/\r\n}<\/pre>\n<p>Praktick\u00fd pr\u00edklad pou\u017eitia tie\u0148ov je vidie\u0165 napr. u loga\u00a0<a class=\"ext\" href=\"http:\/\/codepen.io\/zhusee2\/pen\/qJuzw\" target=\"_blank\" rel=\"nofollow noopener\">Microsoft<\/a>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Z\u00e1pis hodn\u00f4t vlastnost\u00ed, pri ktor\u00fdch je mo\u017en\u00e9 nastavova\u0165 v\u0161etky \u0161tyri strany je mo\u017en\u00e9 skr\u00e1ti\u0165. Pr\u00edklad nastavenia vn\u00fatorn\u00e9ho okraja Defin\u00edcia Horn\u00fd Prav\u00fd Doln\u00fd \u013dav\u00fd padding: 1px 2px 3px 4px; 1 2 3 4 padding: 1px 2px 3px; 1 2 3 2 padding: 1px 2px; 1 2 1 2 padding: 1px; 1 1 1 1 Zdru\u017een\u00e1 defin\u00edcia [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279"}],"version-history":[{"count":3,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions"}],"predecessor-version":[{"id":307,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions\/307"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}