{"id":140,"date":"2016-06-14T03:06:08","date_gmt":"2016-06-14T06:06:08","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=140"},"modified":"2016-06-17T01:49:43","modified_gmt":"2016-06-17T04:49:43","slug":"cores-com-css","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/cores-com-css\/","title":{"rendered":"Cores com CSS"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/06\/colors.png\" alt=\"Cores com CSS\" \/>\n<p>Existem diferentes maneiras de adicionarmos cores no CSS.<\/p>\n<p>Os valores podem ser expressados atrav\u00e9s do nome da cor, do hexadecimal, rgba ou hsla.<\/p>\n<p data-height=\"340\" data-theme-id=\"24256\" data-slug-hash=\"wWGXNO\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/wWGXNO\/\">colors<\/a> by Andr\u00e9 Rafael (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Nomes<\/h2>\n<p>Os nomes s\u00e3o limitados e provavelmente a paleta de cor do seu projeto n\u00e3o estar\u00e1 listada nos nomes.<\/p>\n<p>Existem desde os cl\u00e1ssicos red, green e blue, at\u00e9 nomes como Tomato e DodgerBlue. Eu utilizo bastante tamb\u00e9m o black e white.<\/p>\n<p>Confira uma lista completa nesse site: <a href=\"http:\/\/www.colors.commutercreative.com\/grid\/\" target=\"_blank\">http:\/\/www.colors.commutercreative.com\/grid\/<\/a><\/p>\n<h2>Hexadecimal<\/h2>\n<p>Talvez o formato mais comum de se adicionar uma cor seja atrav\u00e9s de hexadecimais. O <a href=\"https:\/\/www.origamid.com\/codex\/dica-03-css-hexadecimal\/\">hexadecimal<\/a> \u00e9 composto por uma Cerquilha (#) seguida por 6 caracteres.<\/p>\n<p>Eles v\u00e3o de 0 at\u00e9 F, ou seja: 0 1 2 3 4 5 6 7 8 9 A B C D E F. O #000000 \u00e9 o preto puro e o #FFFFFF \u00e9 o branco puro.<\/p>\n<p>Exemplo: #8844ee;<\/p>\n<h2>RGBA<\/h2>\n<p>Com o RGBA voc\u00ea define os valores do red, green e blue em uma escala de 0 \u00e0 255. Al\u00e9m disso voc\u00ea ainda pode adicionar o valor de Alpha que define a transpar\u00eancia da cor, o valor vai de 0 \u00e0 1, sendo 0 totalmente transparente e 1 totalmente opaco.<\/p>\n<p>Exemplo: rgba(255, 255, 255, .5);<\/p>\n<p>Voc\u00ea pode utliza apenas o rgb tamb\u00e9m e n\u00e3o informar o valor de Alpha, assim ele ir\u00e1 manter 1 de alpha.<\/p>\n<p>Exemplo: rgb(255,255,255);<\/p>\n<p>Utilizo muito o rgba em sombras. Assim eu uso o alpha para diminuir a opacidade e fazer com que a sombra se mescle com a cor de fundo do site.<\/p>\n<h2>HSLA<\/h2>\n<p>Talvez um dos formatos menos utilizados. \u00c9 poss\u00edvel informar o hue (que \u00e9 a matiz da cor e vai de 0 \u00e0 360), a saturation (satura\u00e7\u00e3o que vai de 0% \u00e0 100%) e o lightness (ilumina\u00e7\u00e3o que vai de 0 \u00e0 100%). Por \u00faltimo temos tamb\u00e9m o Alpha que segue o mesmo padr\u00e3o do RGBA.<\/p>\n<p>Exemplo: hsla(208, 73%, 88%, .5);<\/p>\n<p>Dropper by Joe Harrison from the Noun Project<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existem diferentes maneiras de adicionarmos cores no CSS. Os valores podem ser expressados atrav\u00e9s do nome da cor, do hexadecimal, rgba ou hsla. See the Pen colors by Andr\u00e9 Rafael (@origamid) on CodePen. Nomes Os nomes s\u00e3o limitados e provavelmente a paleta de cor do seu projeto n\u00e3o estar\u00e1 listada nos nomes. Existem desde os [&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\/140"}],"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=140"}],"version-history":[{"count":9,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/140\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}