Mini-Capitolul 3. Codul propriu-zis<\/strong><\/p>\n\u00cen momentul de fa\u0163\u0103, atributele CSS pentru col\u0163uri rotunjite nu sunt \u00eenc\u0103 finalizate astfel \u00eenc\u00e2t, anumite browsere (Mozilla, Google Chrome sau Safari) folosesc anumite conven\u0163ii. Astfel, pentru Mozilla avem :<\/p>\n
\r\n\r\n-moz-border-radius \/\/ (toate col\u0163urile)\r\n-moz-border-radius-topright \/\/ (col\u0163ul din dreapta sus)\r\n-moz-border-radius-bottomright \/\/ (col\u0163ul din dreapta jos)\r\n-moz-border-radius-topleft \/\/ (col\u0163ul din st\u00e2nga sus)\r\n-moz-border-radius-bottomleft \/\/ (col\u0163ul st\u00e2nga jos)\r\n\r\n<\/pre>\nPentru Google Chrome sau Safari avem :<\/p>\n
\r\n\r\n-webkit-border-radius \/\/ (toate col\u0163urile)\r\n-webkit-border-top-right-radius \/\/ (col\u0163ul din dreapta sus)\r\n-webkit-border-bottom-right-radius \/\/ (col\u0163ul din dreapta jos)\r\n-webkit-border-top-left-radius \/\/ (col\u0163ul din st\u00e2nga sus)\r\n-webkit-border-botom-left-radius \/\/ (col\u0163ul st\u00e2nga jos)\r\n\r\n<\/pre>\n <\/p>\n
Standardul CSS :<\/p>\n
\r\n\r\nborder-radius \/\/ (toate col\u0163urile)\r\nborder-radius-topright \/\/ (col\u0163ul din dreapta sus)\r\nborder-radius-bottomright \/\/ (col\u0163ul din dreapta jos)\r\nborder-radius-topleft \/\/ (col\u0163ul din st\u00e2nga sus)\r\nborder-radius-bottomleft \/\/ (col\u0163ul st\u00e2nga jos)\r\n\r\n<\/pre>\nAt\u00e2t pe Google Chrome c\u00e2t \u015fi pe Mozilla Firefox (versiunile noi) codul standard CSS ar trebui sa func\u0163ioneze corect.<\/p>\n
Mini-capitolul 4. Exemplul<\/strong><\/p>\nVom crea un box de culoare ro\u015fie cu toate col\u0163urile rotunjite, direct din codul CSS:<\/p>\n
\r\n\r\n#coltrotunjit\r\n{\r\nwidth:100px; \/* latimea va avea 100px *\/\r\nheight:50px; \/* inaltimea va avea 50px *\/\r\nbackground:#ff0000; \/*culoarea va fi rosie*\/\r\npadding:5px;\r\nborder-radius:5px;\r\n-moz-border-radius:5px; \/* pentru versiunile vechi de mozilla *\/\r\n-webkit-border-radius:5px;\/* pentru versiunile vechi de google chrome si safari *\/\r\n}\r\n\r\n#coltrotunjit p\r\n{\r\ntext-align:center;\r\ncolor:#fff;\r\nfont-size:14px;\r\n}\r\n\r\n<\/pre>\nCodul HTML pentru Output folosit de mine este urm\u0103torul :<\/p>\n
\r\n\r\n\r\n\r\n\r\nCril Design - Colturi rotunjite.<\/title>\r\n<link href='style.css' rel='stylesheet' type='text\/css' \/> <!-- includem stilul creat, am preferat sa pun stilul in folderul radacina -->\r\n<\/head>\r\n<body>\r\n<div id=\"coltrotunjit\"> <!-- folosim id-ul coltrotunjit din stylecss -->\r\n<p>test<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n<p><a href=\"http:\/\/j.gs\/1466382\/coltrotunjit\"><strong>DEMO<\/strong><\/a>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"http:\/\/j.gs\/1466382\/coltrotdown\"><strong>DOWNLOAD<\/strong><\/a><\/p>\n<p>Sper s\u0103 v\u0103 fie de folos acest mic tutorial. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bun\u0103 seara, \u00cen primul r\u00e2nd tutorialele pe care le voi face pe acest mini-blog se adreseaz\u0103 celor familiariza\u0163i deja cu (m\u0103car) urm\u0103toarele limbaje : (x)HTML, CSS, Javascript, jQuery, PHP. Din moment ce b\u0103nuiesc c\u0103 majoritatea dintre cei interesa\u0163i de aceste tutoriale sunt \u00eencep\u0103tori, nivelul de dificultate va fi mic spre mediu, a\u015fa c\u0103 dac\u0103 nu … <a href=\"https:\/\/cril.biz\/blog\/css\/colturi-rotunjite-utilizand-css3\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Colturi rotunjite utilizand CSS3<\/span> <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5],"tags":[10,9,8,6,7],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","tag-butoane-rotunjite","tag-colturi","tag-colturi-rotunjite","tag-css-2","tag-css3-2"],"_links":{"self":[{"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":7,"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cril.biz\/blog\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}