Prosta i ciekawa funkcjonalno\u015b\u0107, kt\u00f3ra z pewno\u015bci\u0105 poprawi walory Twojej strony internetowej czy bloga.<\/p>\n
Do obs\u0142ugi zaokr\u0105gle\u0144 w CSS s\u0142u\u017cy parametr “border-radius<\/strong>“, kt\u00f3rego warto\u015bci\u0105 jest rozmiar promienia krzywizny zaokr\u0105glenia (lub dwa promienie w przypadku zokr\u0105gle\u0144 eliptycznych). Jako, \u017ce parametr jest sk\u0142adnikiem CSS3, musimy doda\u0107 “zamienniki” (-webkit-border-radius oraz -moz-border-radius), kt\u00f3re b\u0119d\u0105 zrozumia\u0142e dla przegl\u0105darek nie obs\u0142uguj\u0105cych w pe\u0142ni poleca\u0144 CSS3.<\/p>\n Przyk\u0142ad:<\/p>\n Tekst z zaokr\u0105glonymi bokami o promieniu 10px<\/p>\n [css] <\/p>\n Tekst z eliptycznym zaokr\u0105gleniem o promieniu 10px i 15px<\/p>\n Nale\u017cy pami\u0119ta\u0107, \u017ce mi\u0119dzy rozmiarami promieni powinien sta\u0107 znak “\/” zamiast spacji!<\/strong> Tekst z zaokr\u0105glon\u0105 praw\u0105 doln\u0105 kraw\u0119dzi\u0105 (promie\u0144 10px)<\/p>\n [css] <\/p>\n Tekst z zaokr\u0105glon\u0105 lew\u0105 g\u00f3rn\u0105 kraw\u0119dzi\u0105 (promie\u0144 10px)<\/p>\n [css] Ma\u0142e zaokr\u0105glenie wszystkich kraw\u0119dzi: Zaokr\u0105glenie g\u00f3rnych kraw\u0119dzi (g\u00f3rna prawa, g\u00f3rna lewa): Zaokr\u0105glenia dolnych kraw\u0119dzi (dolna lewa, dolna prawa): Prosta i ciekawa funkcjonalno\u015b\u0107, kt\u00f3ra z pewno\u015bci\u0105 poprawi walory Twojej strony internetowej czy bloga. Do obs\u0142ugi zaokr\u0105gle\u0144 w CSS s\u0142u\u017cy parametr “border-radius“, kt\u00f3rego warto\u015bci\u0105 jest rozmiar promienia krzywizny zaokr\u0105glenia (lub dwa promienie w przypadku zokr\u0105gle\u0144 eliptycznych). Jako, \u017ce parametr jest … <\/i> Czytaj ca\u0142o\u015b\u0107<\/a><\/p>\n","protected":false},"author":1,"featured_media":466,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5,3,24,6],"tags":[303,304,305,153,174,175,306,294,313,160,167,172,288,307,302,312,152,308,309,314,293,287,300,301,291,296,298,292,290,11,16,295,297,299,17,55,56,10,53,311,310,9,8,7,316,289,315],"class_list":["post-139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-poradniki","category-porady-dla-webmasterow","category-technologieinformatyka","category-tourtale","tag-moz-border-radius","tag-webkit-border-radius","tag-border-radius","tag-css","tag-css-bez-logowania","tag-css-bez-rejestracji","tag-css-border-radius","tag-css-jak-zaokraglic-elementy","tag-css-male-zaokraglenie-wszystkich-krawedzi","tag-css-niecierpliwych","tag-css-przyklady","tag-css-za-darmo","tag-css-zaokraglenia","tag-css-zaokraglenia-eliptyczne","tag-css3-zaokraglenia","tag-element-z-zaokraglona-lewa-gorna-krawedzia","tag-html","tag-html-elipsa-bez-obrazka","tag-html-elipsa-zaokraglenie","tag-html-male-zaokraglenie-wszystkich-krawedzi","tag-html-okragle-boki","tag-html-zaokraglenia","tag-html5","tag-html5-zaokraglenia","tag-ja-zrobic-zaokraglenia","tag-jak-polepszyc-strone-www","tag-jak-poprawic-wyglad-strony","tag-jak-zaokraglic-elementy-html","tag-jak-zrobic-okragle-boki-html","tag-jak-zrobic-strone-www","tag-jak-zrobic-swoja-strone-www","tag-poprawa-strony","tag-poprawa-wizual-strony","tag-poprawa-wygladu-strony","tag-porady-dla-webmasterow-2","tag-robienie-www","tag-strona-internetowa","tag-strony-internetowe","tag-strony-www","tag-tekst-z-zaokraglona-prawa-dolna-krawedzia","tag-tekst-z-zaokraglonymi-bokami","tag-tworzenie-stron-www","tag-webmaster","tag-webowiec","tag-zaokraglenia-dolnych-krawedzi","tag-zaokraglenia-na-stronie-www","tag-zaokraglenie-gornych-krawedzi"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":9,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":468,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media\/466"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n-webkit-border-radius: 10px;
\n-moz-border-radius: 10px;
\nborder-radius: 10px;
\n[\/css]<\/p>\n
\n[css]
\n-webkit-border-radius: 10px\/15px;
\n-moz-border-radius: 10px\/15px;
\nborder-radius: 10px\/15px;
\n[\/css]<\/p>\n
\nMo\u017cemy modyfikowa\u0107 tak\u017ce poszczeg\u00f3lne kraw\u0119dzie elementu:<\/p>\n
\n-webkit-border-bottom-right-radius: 10px;
\n-webkit-border-radius-bottomright: 10px;
\n-khtml-border-radius-bottomright: 10px;
\n-moz-border-radius-bottomright: 10px;
\nborder-borrom-right-radius: 10px;
\n[\/css]<\/p>\n
\n-webkit-border-top-left-radius: 10px;
\n-webkit-border-radius-topleft: 10px;
\n-khtml-border-radius-topleft: 10px;
\n-moz-border-radius-topleft: 10px;
\nborder-top-left-radius: 10px;
\n[\/css]<\/p>\n
\nPrzydatne klasy CSS (co to s\u0105 klasy CSS i jak ich u\u017cywa\u0107<\/a>):<\/p>\n
\n[css]
\n.m_oval{
\n -webkit-border-radius: 3px;
\n -khtml-border-radius: 3px;
\n -moz-border-radius: 3px;
\n border-radius: 3px;
\n}
\n[\/css]<\/p>\n
\n[css]
\n.oval_top {
\n -webkit-border-top-left-radius: 5px;
\n -webkit-border-top-right-radius: 5px;
\n -webkit-border-radius-topleft: 5px;
\n -webkit-border-radius-topright: 5px;
\n -khtml-border-radius-topleft: 5px;
\n -khtml-border-radius-topright: 5px;
\n -moz-border-radius-topleft: 5px;
\n -moz-border-radius-topright: 5px;
\n border-top-left-radius: 5px;
\n border-top-right-radius: 5px;
\n}
\n[\/css]<\/p>\n
\n[css]
\n.oval_bottom {
\n -webkit-border-bottom-left-radius: 5px;
\n -webkit-border-bottom-right-radius: 5px;
\n -webkit-border-radius-bottomleft: 5px;
\n -webkit-border-radius-bottomright: 5px;
\n -khtml-border-radius-bottomleft: 5px;
\n -khtml-border-radius-bottomright: 5px;
\n -moz-border-radius-bottomleft: 5px;
\n -moz-border-radius-bottomright: 5px;
\n border-bottom-left-radius: 5px;
\n border-bottom-right-radius: 5px;
\n}
\n[\/css]<\/p>\n","protected":false},"excerpt":{"rendered":"