Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

DESARROLLO Y DISEÑO WEB
Listado de Artículos sobre CSS3

SVG Filters: Uso de feMerge (Combinaciones)

El filtro feMerge permite la combinación de filtros de forma concurrente, en vez de secuencialmente. En lugar de que cada primitiva de filtro se aplique a la salida de la primitiva de filtro que le precede, feMerge nos proporciona una forma para almacenar temporalmente la salida de cada filtro, para así, colocarlas en el tapiz en orden de abajo hacia arriba. Es evidente que las capas superiores deberían tener cierta transparencia (o estar incompletas) dentro del en el área afectada por el filtro, a fin de permitir que esas capas por debajo sean visibles.

Leer más

SVG Filters: Uso de feImage (Imágenes)

Esta primitiva de filtro se refiere a un gráfico externo al elemento de filtro que es cargado o renderizado y que, finalmente, se convierte en el resultado de la primitiva de filtro. Puede hacer referencia a una imagen externa o puede ser una referencia interna o externa de otra pieza de SVG. Se produce una imagen similar a la incorporada en el SourceGraphic de la imagen de entrada, excepto que el gráfico proviene de una fuente externa.

Leer más

SVG Filters: Uso de feTile (Azulejos - Embaldosar)

La primitiva de filtro feFlood es para rect como feImage es para image. De la misma forma, feTile es directamente similar a pattern. Nos permite llevar patrones de repetición de imágenes en el filtro, de modo que luego se puedan utilizar para crear efectos. Esta primitiva de filtro rellena un rectángulo blanco con un patrón repetido de "azulejos" de una determinada imagen. El rectángulo de destino es tan grande como la subregión de la primitiva del filtro establecida por la anchura x, y, width y height de feTile.

Leer más

SVG Filters: Uso de feMorphology (Morfologías)

Este primitiva de filtro interpreta una dilatación o erosión de la imagen. Es particularmente útil para usarlo con el canal alfa. El núcleo de dilatación (o erosión) es un rectángulo con un ancho de (2 * x) de radio y una altura de (2 * y-radio). En la dilatación, el píxel de salida es el máximo valor de la componente individual que corresponde a los valores R, G, B, A del núcleo del rectángulo de la imagen de entrada. En la erosión, el píxel de salida es el mínimo.

Leer más

SVG Filters: Uso de feFlood (Inundaciones)

Esta primitiva de filtro crea un rectángulo relleno con el color y la opacidad de los valores de las propiedades del flood-color y flood-opacity. La posición, ancho y alto se establece por los atributos de x, y, width y height del elemento filter. Dicho de otra forma, la primitiva feFlood permite una manera distinta de dibujar un rectángulo en la pantalla. La diferencia entre éste y los creados a través de rect es que, éstos, se pueden combinar fácilmente sobre la marcha con una variedad de otros filtros.

Leer más

SVG Filters: Uso de feSpecularLighting (Iluminación especular)

Existen numerosas técnicas dentro de SVG para diseñar y controlar la colocación de las fuentes de luz. Muchos de estos efectos pueden ser simulados a través de la superposición de gradientes parcialmente transparentes, pero el uso de feSpecularLighting, bien utilizado, producirá efectos potentes y fáciles de utilizar para los que ya saben algo del mundo de los efectos de iluminación.

Leer más

SVG Filters: Uso de feDisplacementMap (Mapas de desplazamiento)

Este efecto es un poco diferente de los demás en el sentido de que convierte los valores de color de los píxeles de una imagen en distorsiones geométricas de otra. La primitiva feDisplacmentMap utiliza los canales de entrada in (SourceGraphic por defecto) e in2, y utiliza un canal especificado (R, G, B, o A) de in2 que sirven como valores de desplazamiento que determinan la dirección y la distancia de cada píxel en la que se moverán por los ejex X,Y.

Leer más

SVG Filters: Uso de feDiffuseLighting (Iluminaciones Difusas)

Esta primitiva de filtro ilumina una imagen utilizando el canal alfa como un mapa de relieve. El mapa de la luz producida por esta primitiva se puede combinar con una textura usando el operador arithmetic de feDiffuseLighting. Se pueden simular múltiples fuentes de luz mediante la adición de varios de estos mapas de iluminación antes de aplicarlo a una textura.

Leer más

SVG Filters: Uso de feConvolveMatrix (Matrices de Convolución)

Este filtro permite el procesamiento de la imagen en lo que se conoce como un filtro de convolución. Nos permite definir una matriz cuadrada (típicamente n por n elementos para algún número impar n) en la que la celda o valor central de la matriz se refiere al propio píxel, y las celdas anteriores, izquierda, abajo y derecha de la misma dentro de la matriz, se refieren a los píxeles arriba, izquierda, abajo y a la derecha del píxel en la imagen de origen. Los coeficientes numéricos en la matriz definen el peso que cada píxel vecino que tendrá en el cálculo del nuevo color de dicho píxel.

Leer más

SVG Filters: Uso de feComposite (Composiciones)

Combina dos imágenes pixel a pixel en un mismo espacio usando el canal alfa de Porter-Duff para realizar las operaciones de composición. Las operaciones son over, in, out, atop, xor, and arithmetic. Hay que tener en cuenta que, en una cierta medida, la imagen resultante puede aumentar de tamaño, incluso si las dos imágenes se superponen.

Leer más
Página  2  3  4  5  6    

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.