{"id":166,"date":"2016-06-22T23:35:10","date_gmt":"2016-06-23T02:35:10","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=166"},"modified":"2016-06-29T03:21:11","modified_gmt":"2016-06-29T06:21:11","slug":"imagem-em-preto-e-branco-com-css","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/imagem-em-preto-e-branco-com-css\/","title":{"rendered":"Imagem em Preto e Branco com CSS"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/06\/pb.png\" alt=\"filter: grayscale(100%);\" \/>\n<p>Com a propriedade filter do CSS, voc\u00ea consegue mudar as cores de uma imagem para preto e branco.<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"ezBPpr\" 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\/ezBPpr\/\">ezBPpr<\/a> by Andr\u00e9 | Origamid (<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<p>\u00c9 bem simples basta utilizar o c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">\nimg {\n  -webkit-filter: grayscale(100%);\n  filter: grayscale(100%);\n  filter: gray; \/* IE *\/\n}\n<\/code><\/pre>\n<p>J\u00e1 \u00e9 bem suportado nos browsers modernos, por\u00e9m \u00e9 necess\u00e1rio o uso do prefixo -webkit- para Chrome e outros que utilizam o webkit.<\/p>\n<p>N\u00e3o se limite a utilizar apenas em fotos, <strong>voc\u00ea pode utilizar tamb\u00e9m na marca de parceiros, clientes e outras imagens.<\/strong><\/p>\n<p>Assim voc\u00ea evita uma polui\u00e7\u00e3o de cores, causada quando adicionamos diversas marcas para mostrarmos com quem j\u00e1 trabalhamos.<\/p>\n<p>PS: Voc\u00ea vai encontrar esse c\u00f3digo pela Web com gambiarras utilizando SVG para funcionar no Firefox. Por\u00e9m n\u00e3o \u00e9 mais necess\u00e1rio isso.<\/p>\n<p><a href=\"http:\/\/caniuse.com\/#feat=css-filters\" target=\"_blank\">http:\/\/caniuse.com\/#feat=css-filters<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Com a propriedade filter do CSS, voc\u00ea consegue mudar as cores de uma imagem para preto e branco. See the Pen ezBPpr by Andr\u00e9 | Origamid (@origamid) on CodePen. \u00c9 bem simples basta utilizar o c\u00f3digo: img { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; \/* IE *\/ } J\u00e1 \u00e9 bem suportado nos browsers modernos, [&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\/166"}],"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=166"}],"version-history":[{"count":11,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/166\/revisions\/185"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}