{"id":409,"date":"2016-12-31T12:34:23","date_gmt":"2016-12-31T14:34:23","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=409"},"modified":"2016-12-31T12:34:30","modified_gmt":"2016-12-31T14:34:30","slug":"circulos-com-css","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/circulos-com-css\/","title":{"rendered":"C\u00edrculos com CSS"},"content":{"rendered":"<p>No exemplo abaixo eu mostro c\u00edrculos criados com CSS:<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"mPGRBj\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-pen-title=\"css-circulo\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/mPGRBj\/\">css-circulo<\/a> by Andre  Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Bordas arredondadas eram criadas a partir de imagens e hacks bizarros feitos com CSS. O surgimento da propriedade border-radius acabou com essa gambiarra.<\/p>\n<p>Basta adicionar border-radius: 5px; para arredondar as bordas com CSS.<\/p>\n<p>E o que acontece se arredondarmos ao m\u00e1ximo as bordas de um quadrado? Ele vai virar um c\u00edrculo.<br \/>\nEnt\u00e3o basta adicionarmos border-radius: 50%; para transformamos um elemento que possui height e width iguais, em um c\u00edrculo.<\/p>\n<p>O valor precisa ter um valor igual ou maior que 50% do valor do width\/height. Por exemplo um quadrado de 100px de largura e 100px de altura precisa de 50px de border-radius. (Basta usar sempre o 50%, assim voc\u00ea n\u00e3o precisa ficar dividindo esse valor).<\/p>\n<pre><code class=\"language-css\">\n.circulo {\nwidth: 100px;\nheight: 100px;\nborder-radius: 50%;\n}\n<\/code><\/pre>\n<p>Se voc\u00ea adicionar a propriedade overflow: hidden; as imagens que estiverem dentro dos c\u00edrculos ter\u00e3o as pontas das suas bordas escondidas e ficar\u00e3o contidas no c\u00edrculo.<\/p>\n<p>\u00c9 assim que s\u00e3o criadas as maiorias das fotos de profile, dos aplicativos Web hoje em dia.<\/p>\n<p>Os c\u00edrculos podem ser usados de maneiras criativas, aqui no contato do meu site, eu uso eles para marcar os itens <a href=\"https:\/\/www.origamid.com\/contato\/\">https:\/\/www.origamid.com\/contato\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No exemplo abaixo eu mostro c\u00edrculos criados com CSS: See the Pen css-circulo by Andre Origamid (@origamid) on CodePen. Bordas arredondadas eram criadas a partir de imagens e hacks bizarros feitos com CSS. O surgimento da propriedade border-radius acabou com essa gambiarra. Basta adicionar border-radius: 5px; para arredondar as bordas com CSS. E o que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/409"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":1,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/409\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/409\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}