{"id":69,"date":"2025-06-26T14:43:54","date_gmt":"2025-06-26T14:43:54","guid":{"rendered":"https:\/\/corporativa.biz\/wp1\/?p=69"},"modified":"2026-01-05T14:46:43","modified_gmt":"2026-01-05T14:46:43","slug":"filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer","status":"publish","type":"post","link":"https:\/\/corporativa.biz\/wp1\/2025\/06\/26\/filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer\/","title":{"rendered":"Filtros CSS para im\u00e1genes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>En muchas ocasiones cuando un desarrollador o dise\u00f1ador web lleva a cabo la maquetaci\u00f3n de un proyecto, necesita aplicar determinados efectos en algunas im\u00e1genes. Vamos a mostrar unos filtros para aplicar los efectos m\u00e1s populares usando \u00fanicamente c\u00f3digo&nbsp;CSS.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Efecto de desenfoque<\/strong>: tendremos que indicar un n\u00famero de p\u00edxeles, proporcional a la intensidad del efecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Escala de grises<\/strong>: indicaremos el porcentaje de decoloraci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Invertir<\/strong>: invierte el color, la saturaci\u00f3n y el brillo. Indicaremos el porcentaje de aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tono sepia<\/strong>: indicaremos un porcentaje de aplicaci\u00f3n del t\u00edpico efecto \u201cvintage\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Rotando el color<\/strong>: \u00bfte imaginabas poder rotar el color de la imagen unos cuantos grados? Pues s\u00ed se puede, indicando los grados a rotar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Brillo<\/strong>: indicaremos el porcentaje de brillo que queramos darle a la imagen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Contraste<\/strong>: igual que en el caso anterior, indicaremos el porcentaje de contraste que nos interese.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Saturaci\u00f3n<\/strong>: este es un efecto bastante popular que sirve para incrementar la saturaci\u00f3n de color en im\u00e1genes subexpuestas. Indicaremos un porcentaje.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfSimple verdad? Si tienes cualquier duda o conoces alg\u00fan efecto que no hayamos incluido, puedes dejarnos un comentario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fuente: <a href=\"https:\/\/blog.endeos.com\/\">https:\/\/blog.endeos.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En muchas ocasiones cuando un desarrollador o dise\u00f1ador web lleva a cabo la maquetaci\u00f3n de un proyecto, necesita aplicar determinados efectos en algunas im\u00e1genes. Vamos a mostrar unos&#8230;<\/p>\n","protected":false},"author":2,"featured_media":150,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[108,109,116,111,117,112,115,110,114,113,118],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-digital-y-redes-sociales","tag-css","tag-css3","tag-desenfoque","tag-diseno-web","tag-efecto-vintage","tag-efectos-de-imagen","tag-escala-de-grises","tag-filtros-css","tag-front-end","tag-maquetacion","tag-propiedad-filter"],"_links":{"self":[{"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":3,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":151,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/posts\/69\/revisions\/151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/media\/150"}],"wp:attachment":[{"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corporativa.biz\/wp1\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}