CSS Gradient Generator: Una Herramienta Útil para Diseñadores Web
CSS Gradient Generator es una aplicación que ofrece una serie de funciones para facilitar la creación y gestión de gradientes CSS. A continuación, se describirán sus principales características y cómo se pueden utilizar.
Pantalla Principal
La aplicación se divide en varias partes principales. En el lado izquierdo, se encuentra la lista de capas. Si hay al menos una capa en la lista, se puede descargar el código final al hacer clic en el botón correspondiente. En este panel, se puede gestionar el orden de las capas, eliminarlas y controlar su visibilidad. Si una capa se establece como invisible, no se tendrá en cuenta en la generación del código final.
Panel de Ajustes de la Capa
Al hacer clic en una capa en particular en el panel de capas, se mostrará el panel de ajustes. En la esquina superior izquierda de este panel, hay botones que se usan para establecer el tipo de gradiente. Junto a ellos, hay un botón que abre el panel con los ajustes de un gradiente dado, como el tamaño, la repetibilidad, la transparencia general, el modo de mezcla, etc. Se pueden cambiar los valores en los campos de entrada escribiendo, utilizando la rueda del mouse o haciendo clic en el campo y arrastrando el cursor hacia arriba o hacia abajo.
Además, junto al título de este panel, hay un icono. Al hacer clic en él, se mostrará un menú que permite, entre otras cosas, aplicar los ajustes de una capa dada a otras capas. También se puede mover todo el panel al agarrar su borde superior. Junto a él, hay un botón que abre un panel donde se pueden agregar puntos automáticamente al control deslizante.
El lugar principal del panel es ocupado por el control deslizante del gradiente. Al hacer doble clic en un punto dado del control deslizante, se agregará un nuevo punto. Se pueden mover los puntos con el mouse o las teclas de flecha. También se pueden seleccionar varios puntos con la tecla Ctrl.
En la esquina derecha, justo encima del control deslizante, hay algunos botones. Con estos botones, se pueden seleccionar el punto siguiente/anterior en el control deslizante, cortar el gradiente para el punto seleccionado, establecer un color sólido en el lado izquierdo/derecho para el punto seleccionado y copiar/pegar el color del punto seleccionado. Se pueden realizar todas estas acciones con las teclas correspondientes. La mejor manera es consultar la pestaña del teclado en esta ayuda.
Panel Principal
Al seleccionar una capa desde el panel izquierdo, en el panel principal se podrá establecer su punto focal, la dirección del gradiente y la posición del gradiente. Estas opciones están disponibles dependiendo del tipo de gradiente dado y su tamaño. Las opciones dadas se muestran en la parte inferior del panel principal. Se pueden cambiar a otros modos utilizando las teclas (Q, W, E) mostradas en la parte inferior del panel. También se pueden cambiar entre estos modos utilizando las teclas del mouse.
Por defecto, la tecla izquierda se usa para mover el punto central del gradiente y la tecla derecha se usa para rotar el gradiente. Además, se usa la tecla S para habilitar/deshabilitar el modo de rejilla y ajuste.
Biblioteca
La biblioteca se usa para almacenar los trabajos guardados en ella. Para mostrarla, hacer clic en el icono correspondiente. Cuando se agrega al menos una capa a su trabajo, se puede guardar todo el trabajo actual en la biblioteca. Al hacer clic en un elemento en la lista de la biblioteca, sus capas se agregarán a su trabajo actual sin eliminar ninguna capa. Se puede continuar trabajando en su trabajo y luego guardarlo en la biblioteca como un nuevo elemento.
En la esquina superior derecha de la biblioteca, hay un icono de menú. En este menú, hay varias opciones. La primera opción "gestionar la biblioteca" permite agregar nuevos grupos, renombrar grupos existentes o arrastrar elementos entre grupos. Las opciones de importación y exportación permiten importar un elemento seleccionado desde un archivo y exportar a un archivo. La última opción en este menú permite abrir una biblioteca en línea. Desde este panel, se pueden agregar elementos creados por otros usuarios. Si se quiere compartir su trabajo, se puede usar un formulario adicional, que se puede abrir al hacer clic en el enlace en el texto en la parte superior del panel de la biblioteca en línea.
CSS Gradient Generator es una herramienta muy útil para los diseñadores web que desean crear y gestionar gradientes CSS de manera eficiente.
