Banner

DESARROLLO Y DISEÑO WEB

Listado de Artículos sobre CSS3

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.

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:

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.

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.

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.

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.

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.

Cuándo utilizar el elemento Defs de un gráfico SVG

Una etiqueta que verás contínuamente en SVG es defs. Es crucial que se entienda cuándo usar el elemento defs en SVG ya que es como una alerta que le indica al parser XML que está a punto de definir algo. Al igual que cualquier otra etiqueta XML, defs debe tener una etiqueta de apertura y cierre en el código. La etiqueta defs es un contenedor que contiene otros elementos. Cuando colocamos otras etiquetas dentro defs, se está creando un conjunto identificable que puede ser usado una vez o varias veces. La etiqueta defs permite, por tanto, establecer una definición que no se mostrará hasta que se requiera. Se podría pensar en defs como un modelo. Se crea un único esquema que se puede utilizar para construir otras estructuras múltiples.

Comprender el atributo viewBox de SVG

Viewbox es un atributo que se utiliza cuando creamos formas SVG. Si piensamos en un documento como un lienzo, el viewBox (o área de visión) es la parte del lienzo que deseamos que el espectador vea. A pesar de que la página puede cubrir la pantalla completa del equipo, la figura sólo puede existir dentro de esa área de visión que hemos definido. Viewbox indicar al parser que debe hacer un zoom sobre esa zona. Esto elimina el espacio en blanco extra. El atributo viewBox actúa como una lente que disminuye o aumenta el punto o la zona enfocada.

Página   2  3  4  5  6