{"id":3667,"date":"2014-11-04T10:42:57","date_gmt":"2014-11-04T12:42:57","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3667"},"modified":"2014-11-04T10:42:57","modified_gmt":"2014-11-04T12:42:57","slug":"filtros-em-imagens-com-css3","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/filtros-em-imagens-com-css3\/","title":{"rendered":"Filtros em imagens com CSS3"},"content":{"rendered":"<p>Vimos uma postagem no blog <a title=\"TABLELESS\" href=\"http:\/\/tableless.com.br\/css-filters-aplicando-filtros-em-imagens-com-css\/\">TABLELESS<\/a>\u00a0e resolvemos compartilha aqui no nosso blog.<\/p>\n<p>A publica\u00e7\u00e3o abaixo explica, de forma bem simples, como aplicar filtros em imagens usando apenas CSS3.\u00a0A possibilidade de aplicar filtros com CSS j\u00e1 \u00e9 poss\u00edvel desde algo em torno de 2011, mas apenas para o motor WebKit. Agora essa possibilidade se transformou de fato em <a href=\"http:\/\/www.w3.org\/TR\/filter-effects\/\">rascunho do W3C<\/a>\u00a0para que um dia vire uma recomenda\u00e7\u00e3o. O <a href=\"http:\/\/caniuse.com\/#feat=css-filters\">suporte ainda n\u00e3o \u00e9 muito bom<\/a>, mas, dependendo do seu p\u00fablico, voc\u00ea j\u00e1 pode usar agora.<\/p>\n<p>A sintaxe \u00e9 simples e bem f\u00e1cil de entender:<\/p>\n<pre class=\"lang:css decode:true \">seletor {\u00a0filter: funcao(valor) | none\u00a0}<\/pre>\n<p>Os valores poss\u00edveis por enquanto s\u00e3o:<\/p>\n<ul>\n<li><em>blur()<\/em><\/li>\n<li><em>brightness()<\/em><\/li>\n<li><em>contrast()<\/em><\/li>\n<li><em>drop-shadow()<\/em><\/li>\n<li><em>grayscale()<\/em><\/li>\n<li><em>sepia()<\/em><\/li>\n<li><em>hue-rotate()<\/em><\/li>\n<li><em>invert()<\/em><\/li>\n<li><em>opacity()<\/em><\/li>\n<\/ul>\n<p>O script abaixo mostra os diferentes efeitos aplicados \u00e0 imagem.<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"570px\" src=\"http:\/\/jsfiddle.net\/90yguxby\/3\/embedded\/result,js,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Abaixo voc\u00ea pode ver alguns exemplos:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"800\" src=\"http:\/\/jsfiddle.net\/tableless\/FgGNN\/27\/embedded\/result,css,html\/presentation\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\" framescroll=\"none\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Existem algumas observa\u00e7\u00f5es interessantes sobre a aplica\u00e7\u00e3o dos filtros. Por exemplo, se voc\u00ea quiser combinar os filtros sepia() e grayscale(), certifique-se de adicionar sepia() antes do grayscale(), caso contr\u00e1rio o resultado ser\u00e1 apenas grayscale().<\/p>\n<p>Voc\u00ea pode n\u00e3o entender o efeito de hue-rotate(), sugiro que <a href=\"http:\/\/en.wikipedia.org\/wiki\/Hue\">leia mais sobre HUE aqui<\/a>. Leia mais sobre <a href=\"http:\/\/tableless.com.br\/sobre-cor-e-webdesign\/\">cores na web aqui<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Veja como fazer de maneira simples, lindos efeitos em suas imagens utilizando CSS3. S\u00e3o diversos filtros com c\u00f3digo pronto para copiar e colar em seus projetos.<\/p>\n","protected":false},"author":1,"featured_media":3677,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,6],"tags":[140,174,185,277],"class_list":["post-3667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-2","category-dicas","tag-construcao-de-sites","tag-design","tag-dicas","tag-fotografia"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3667"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3667\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3677"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}