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 feComponentTransfer (Componentes de transferencia)

La primitiva feComponentTransfer permite la redefinición independiente de cada uno de los cuatro canales de color: R, G, B, y A (alfa). Permite realizar operaciones como el ajuste del brillo, el contraste, equilibrio de color o umbral través de diferentes funciones que son aplicables a uno o varios canales de una imagen. El filtro feComponentTransfer se define a través de sus métodos feFuncR, feFuncG, feFuncB y feFuncA que crean y gregan una función de transferencia para cada canal R G B A y, cada una de ellas puede tener, además del indicador de tipo, uno o varios parámetros.

Leer más

SVG Filters: Uso de feColorMatrix (Matrices de Color)

La primitiva feColorMatrix permite la redefinición de colores dentro de una imagen, basandose en la capacidad de multiplicar los niveles de cada píxel RGB y alfa por coeficientes numéricos. En una situación muy compleja, un usuario podría especificar una matriz entera de veinte coeficientes (es decir, de 4 por 5), que debe de multiplicarse por el vector de uno a cuatro compuesto por los valores R G B A que representan el valor de color y opacidad de un píxel determinado. Las filas de la matriz representan respectivamente los tonos R, G, B, y el Alfa, al igual que el vector de uno a cuatro antes comentado.

Leer más

SVG Filters: Uso de feGaussianBlur (Filtro Gausiano)

Se utiliza para realizar un desenfoque gaussiano en la imagen. Tiene 2 atributos para realizar distintas acciones. stdDesviation que define la desviación estándar para la operación de desenfoque.

Leer más

SVG Filters: Uso de feBlend (Fusionar)

Realiza pixel a pixel una combinación de dos imágenes de entrada. Los modos de fusión son: Normal, Multiplicar (multiply), Pantalla (screen), oscurecer (darken) y aclarar (lighten). Los atributos in e in2 representan la primera y segunda imagen de entrada para realizar la operación de fusión. Tanto in como in2 contendrán uno de sus valores estándar o podrán tener otra fuente o imagen de entrada definida por el usuario.

Leer más

Path: Definición de trayectorias en SVG

Una cuestión que no se había tratado todavía es el manejo de trayectorias. Esto es útil si queremos realizar transformaciones o curvas complejas. El elemento que hace esto es path. Se pueden definir hasta 10 tipos de trayectorias, las cuales pasamos a describir ahora. Los siguientes comandos están disponibles para los datos de la trayectoria:

Leer más

Shapes:Formas básicas de los gráficos SVG

A continuación pasamos a describir las formas básicas que se pueden crear en los gráficos vectoriales SVG. Como veréis más adelante se puede realizar cuadrados y rectángulos con o sin bordes redondeados, círculos o elipses, líneas y polilíneas, e incluso, estrellas y polígonos. El elemento rect es el encargado de hacer esta tarea.

Leer más

LinearGradient: Cómo crear gradientes lineales en SVG

En los gráficos vectoriales escalables (SVG), vamos escribiendo las instrucciones para el parser de XML cree una imagen interpretando dichas instrucciones. Los gradientes o degradados lineales, lo que hacen es, fundir un color con otro de forma equilibrada para agregar un aire de profundidad al diseño. Los gradientes lineales pueden construirse horizontal o verticalmente. Para Trabajar con degradados, lo adecuado es que cree un elemento dentro de la etiqueta defs. El elemento defs, como ya se explicó en el capítulo cuándo utilizar el elemento defs en un gráfico SVG, funciona como un disparador que declara que se va a definir algo. En este caso, vamos a establecer un color degradado.

Leer más

Text: Insertar Texto dentro de un gráfico SVG

Otra de las necesidades que a veces nos encontramos al crear diseños web es la de insertar un texto de forma distinta. Todo lo que se puede realizar en SVG se puede hacer en CSS3 como cambiar la fuente, poner sombras o, incluso, transformar el texto a través de efectos como transform, rotate, skew, ... Hoy vamos a aprender como crear texto dentro de un SVG.

Leer más

InkScape: Editor de graficos SVG de código libre

Inkscape es un editor de gráficos vectoriales de código abierto, con capacidades similares a Illustrator, Freehand, CorelDraw o Xara X, usando el estándar de la W3C: el formato de archivo Scalable Vector Graphics (SVG). Las características soportadas incluyen: formas, trazos, texto, marcadores, clones, mezclas de canales alfa, transformaciones, gradientes, patrones y agrupamientos. Inkscape también soporta meta-datos Creative Commons, edición de nodos, capas, operaciones complejas con trazos, vectorización de archivos gráficos, texto en trazos, alineación de textos, edición de XML directo y mucho más. Puede importar formatos como Postscript, EPS, JPEG, PNG, y TIFF y exporta PNG asi como muchos formatos basados en vectores.

Leer más

RadialGradient: Cómo crear gradientes lineales en SVG

En los gráficos vectoriales escalables (SVG), vamos escribiendo las instrucciones para el parser de XML cree una imagen interpretando dichas instrucciones. Los gradientes o degradados radiales, lo que hacen es, imitar una fuente de luz que llega a un color sólido para crear un efecto de atenuación circular. Para Trabajar con degradados, lo adecuado es que cree un elemento dentro de la etiqueta defs. El elemento defs, como ya se explicó en el capítulo cuándo utilizar el elemento defs en un gráfico SVG, funciona como un disparador que declara que se va a definir algo. En este caso, vamos a establecer un color degradado.

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

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.