{"id":13983,"date":"2022-12-05T10:15:42","date_gmt":"2022-12-05T08:15:42","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=13983"},"modified":"2022-12-05T11:25:19","modified_gmt":"2022-12-05T09:25:19","slug":"como-utilizar-los-css-filters","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-los-css-filters\/","title":{"rendered":"C\u00f3mo utilizar los CSS Filters"},"content":{"rendered":"

\u00bfPARA QUE SIRVEN LOS CSS FILTERS?<\/h2>\n

 <\/p>\n

Los CSS Filters<\/strong><\/span> o cambio de filtros<\/em><\/a><\/span>, sirven para poder cambiar la tipolog\u00eda\/color<\/span> <\/strong>de la imagen<\/em> aplicando diversos colores para las im\u00e1genes o videos adem\u00e1s de aplicar diferentes tonalidades de colores. Vamos a explicar c\u00f3mo utilizarlos.<\/p>\n

En este art\u00edculo voy a mostrar el c\u00f3digo y la estructura<\/span> del documento tanto de <html><\/strong><\/code> c\u00f3mo <css><\/strong><\/code>, en los que les he aplicado diferentes filtros.<\/p>\n

C\u00f3digo HTML y ESTRUCTURACI\u00d3N<\/h3>\n
<div class=\"cont\">\r\n       <img src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <p>SIN FILTRO<\/p>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"grayscale\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>ESCALA DE GRISES<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"invert\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>INVERTIR<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"brightness\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>BRILLO<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"saturation\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>SATURACION<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"sepia\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>SEPIA<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"blur\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>DIFUMINAR<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"opacity\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>OPACIDAD<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"blur-hue\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">\r\n           <P>DESENFOQUE + SATURACION<\/P>\r\n<\/div>\r\n\r\n<div class=\"cont\">\r\n       <img id=\"blur-text\" src=\"assets\/IMG\/gato_persa_miniatura.jpg\" alt=\"\">       \r\n           <P>DESENFOQUE<\/P>\r\n<\/div>\r\n<\/pre>\n
 <\/p>\n
Definici\u00f3n de C\u00f3digo<\/h4>\n
Como se puede observar en el c\u00f3digo, he utilizado una misma imagen en el cual la repito 10 veces y le aplico diferentes filtros de cambios, excepto una que es la original sin aplicar ning\u00fan filtro.<\/p>\n
Todas las im\u00e1genes las he introducido dentro de un <div><\/em><\/code>, de los cuales todos contendr\u00e1n la misma <class='cont'><\/strong><\/code>. Para abreviar la palabra contenido, lo que hago es ponerle el 'cont'<\/strong><\/code>, as\u00ed luego es m\u00e1s f\u00e1cil de acordarse a la hora de escribir c\u00f3digo en css<\/code><\/span>,<\/em> y al tener todas las fotos en el mismo <div><\/strong><\/code> luego te ahorras escribir m\u00e1s c\u00f3digo.<\/p>\n
De las 10 im\u00e1genes que hay en el documento, nueve ir\u00e1n con una <id=\"\"><\/strong><\/code> dentro de la imagen en el cual le pongo el nombre de lo que va a hacer esa <id><\/code><\/em>,para que luego\u00a0<\/em>cuando me toque incluirlo, use esa misma para darle los valores a los filtros.<\/p>\n
 <\/p>\n
C\u00f3digo CSS<\/h4>\n
\/*contenedor*\/\r\n.cont{display: inline-block;padding: 20px 10px;}\r\n.container:hover > .hidden {visibility: visible;pointer-events: none;}\r\n\r\n\/*---------------LA IMAGEN SIN FILTRO<\/span> --> NO VA A TENER ELEMENTOS EXTRAS DE FILTROS<\/span> ----------------<\/strong>*\/\r\n\/*escala de grises*\/\r\n#grayscale:hover {\r\n\u00a0 \u00a0 -webkit-filter: grayscale(1);\r\n\u00a0 \u00a0 filter: grayscale(1);\r\n\u00a0}\r\n\r\n\/*INVERTIR*\/\r\n#invert:hover {\r\n\u00a0 \u00a0 -webkit-filter: invert(.9);\r\n\u00a0 \u00a0 filter: invert(.9);\r\n\u00a0}\r\n\/*BRILLO*\/\r\n#brightness:hover {\r\n\u00a0 \u00a0 -webkit-filter: brightness(.5);\r\n\u00a0 \u00a0 filter: brightness(.5);\r\n\u00a0}\r\n\r\n\/*SATURACION*\/\r\n#saturation:hover {\r\n\u00a0 \u00a0 -webkit-filter: saturate(6);\r\n\u00a0 \u00a0 filter: saturate(6);\r\n\u00a0}\r\n\r\n\/*SEPIA*\/\r\n#saturation:hover {\r\n\u00a0 \u00a0 -webkit-filter: saturate(6);\r\n\u00a0 \u00a0 filter: saturate(6);\r\n\u00a0}\r\n\/*DIFUMINAR*\/\r\n#blur:hover {\r\n\u00a0 \u00a0 -webkit-filter: blur(5px);\r\n\u00a0 \u00a0 filter: blur(5px);\r\n\u00a0}\r\n\r\n\/*OPACIDAD*\/\r\n#opacity:hover {\r\n\u00a0 \u00a0 -webkit-filter: opacity(.5);\r\n\u00a0 \u00a0 filter: opacity(.5);\r\n\u00a0}\r\n\r\n\/*DESENFOQUE + SATURACION*\/\r\n#blur-hue:hover {\r\n\u00a0 \u00a0 -webkit-filter: blur(5px) saturate(6);\r\n\u00a0 \u00a0 filter: blur(5px) saturate(6); \u00a0\r\n\u00a0}\r\n\r\n\/*DESENFOQUE SIMPLE*\/\r\n#blur-text:hover {\r\n\u00a0 \u00a0 -webkit-filter: blur(5px);\r\n\u00a0 \u00a0 \u00a0filter: blur(5px);\r\n\u00a0 }\r\n\r\n<\/pre>\n
Definici\u00f3n c\u00f3digo CSS<\/h3>\n
C\u00f3mo se puede observar, en el c\u00f3digo lo que hago es remarcar con un\u00a0 \/*comentario*\/<\/strong><\/code> lo que voy a incluir dentro de ese contenido, as\u00ed es m\u00e1s f\u00e1cil localizar el c\u00f3digo que buscas. Adem\u00e1s por si tienes que hacer un cambio de c\u00f3digo<\/span> o (a\u00f1adir\/eliminar)<\/em><\/span> m\u00e1s contenido, sea m\u00e1s f\u00e1cil de localizar para aplicar los cambios.<\/span><\/p>\n
Podemos aplicar filters<\/span> a cualquier imagen a partir de este c\u00f3digo<\/h5>\n
 <\/p>\n
  \u00a0\u00a0img {-webkit-filter: filter(valor);}<\/strong><\/pre>\n
 <\/p>\n
FILTERS USADOS<\/h4>\n
Muestro como se deben llamar los diferentes filtros en el CSS<\/span>.<\/strong><\/p>\n