Recursos en línea para generar gradientes css3

La capacidad de generar mezclas de gradiente complejos es una de las mejoras realmente espectaculares en CSS3. Hasta el advenimiento de CSS3, los diseñadores se basaron en los archivos de imagen en mosaico para crear fondos texturizados detrás de las páginas y elementos de diseño (como etiquetas). Esos archivos de imagen se desaceleró páginas, y se veía mal gusto cuando se descargan lentamente en las páginas de un usuario tenía abierta.

Esa es la buena noticia.

El inconveniente es que la definición de la sintaxis para incluso un simple gradiente lineal es una molestia porque los diferentes navegadores tienen diferentes sintaxis para definir incluso estos gradientes simples. Y cuando se trata de definir los gradientes radiales o diagonales, las diferencias entre la sintaxis del navegador se hacen aún más evidentes.

Video: HTML5 y CSS3 - 16 - Como crear degradados con css3

Sólo para dar una idea de esto, examinar el CSS necesario para producir la imagen de fondo en la siguiente figura:

Video: CSS3 // Generar degradados con Ultimate CSS Gradient Generator

fondo: -moz-radial-gradiente (centro, cubierta elipse, RGBA (228,245,252,1) 0%, RGBA (191,232,249,1) 50%, RGBA (159,216,239,1) 51%, RGBA (42,176,237,1) 100%) - / * FF3.6 + * / fondo: -webkit-gradiente (radial, centro centro, 0px, centro centro, 100%, color-stop (0%, RGBA (228,245,252,1)), color-parada (50% , RGBA (191,232,249,1)), color-parada (51%, RGBA (159,216,239,1)), color-stop (100%, RGBA (42,176,237,1))) - / * Chrome, Safari4 + * / fondo: - webkit-radial-gradiente (centro, cubierta elipse, RGBA (228,245,252,1) 0%, RGBA (191,232,249,1) 50%, RGBA (159,216,239,1) 51%, RGBA (42,176,237,1) 100%) - / * Chrome10 +, Safari5.1 + * / fondo: -o-radial-gradiente (centro, cubierta elipse, RGBA (228,245,252,1) 0%, RGBA (191,232,249,1) 50%, RGBA (159,216,239,1) 51%, RGBA (42,176,237,1) 100%) - / * Opera 12+ * / fondo: -ms-radial-gradiente (centro, cubierta elipse, RGBA (228,245,252,1) 0%, RGBA (191,232,249,1) 50%, RGBA ( 159,216,239,1) 51%, RGBA (42,176,237,1) 100%) - / * IE10 + * / fondo: radial-gradiente (elipse en el centro, RGBA (228,245,252,1) 0%, RGBA (191,232,249,1) 50%, RGBA (159,216,239,1) 51%, RGBA (42,176,237,1) 100%) - / * W3C * /

Por lo tanto, lo que es un pobre diseñador para hacer? Por suerte hay varios generadores realmente útiles gradiente CSS en línea. Aquí están tres de los mejores:

Gradiente generador CSS Ultimate ColorZilla

Probablemente el más poderoso de los generadores de gradiente CSS3, la Gradiente máximo generador de CSS permite a los diseñadores definen gradientes con controles deslizantes que se sienta cómodo para cualquiera que haya definido un gradiente en Illustrator, Corel Draw u otros programas de dibujo, se muestra aquí:

El CSS Gradient Generador Ultimate también proporciona opciones para la generación de imágenes SVG que serán reconocidos en Internet Explorer 9 (que ha limitado el apoyo de gradientes CSS3).

Gradiente generador CSS3

El gradiente generador CSS3, creado por Damian Galarza, tiene algunas características menos que el gradiente Generador de Ultimate CSS, pero con una interfaz muy limpia, accesible hace que sea fácil crear lineal básico y mezclas diagonales, mientras ve el código CSS aparece en la pantalla.

Este recurso es especialmente útil para crear el gradiente de fondo para los botones desde la ventana de previsualización es una bonita plaza tamaño de un botón, limpio preconfigurado.

CSS fondo del gradiente Fabricante

Algunos tipos en un garaje hasta cerca de Seattle pusieron un generador de CSS3 gradiente fácil de usar y potente que llaman el CSS fondo del gradiente Fabricante. Ellos tienen una alternativa de puesta en marcha que llaman Microsoft, y los gradientes que generan aquí trabajan en - sí, Internet Explorer (versiones 10 y posteriores), sino también todos los demás navegadores actuales.

El fabricante de fondo CSS Gradient podría ser la manera más rápida de crear gradientes del montón ya que viene con más de una docena de pre-series.

Video: Como animar gradientes en CSS3

¿Cómo funcionan Generadores CSS3 gradiente

Los tres de los generadores de gradiente CSS3 enumerados aquí, y otros, así, crear trozos de código CSS3 que los diseñadores pueden copiar y pegar en los archivos CSS. Ellos generadores no proporcionan mucha ayuda en cómo hacerlo - que esperan que seas capaz de manejar la definición de fondos CSS3 para los elementos y la clase y selectores div en un archivo CSS.

Pero el proceso no es demasiado difícil. Por ejemplo, si crea un estilo de clase y el nombre de .background, puede copiar y pegar un estilo gradiente en ese selector como se muestra aquí:

.fondo {/ * IE10 Consumer Preview * / Imagen de fondo: -ms-radial gradiente (centro, un círculo del lado más cercano, #FFFFFF 0%, # 00A3EF 100%) - / * Mozilla Firefox * / Imagen de fondo: -moz -radial gradiente (centro, un círculo del lado más cercano, #FFFFFF 0%, # 00A3EF 100%) - / * * Opera / imagen de fondo: radial gradiente -o (centro, un círculo del lado más cercano, #FFFFFF 0% , # 00A3EF 100%) - / * Webkit (Safari / Chrome 10) * / imagen de fondo: -webkit-gradiente (radial, centro centro, 0, centro centro, 140, color-stop (0, # FFFFFF), color -detención (1, # 00A3EF)) - / * Webkit (Chrome 11+) * / imagen de fondo: -webkit-radial-gradiente (centro, un círculo alrededor del lado más cercano, #FFFFFF 0%, # 00A3EF 100%) - / * W3C marcado, IE10 vista previa de lanzamiento * / imagen de fondo: radial gradiente (círculo más cercano del lado en el centro, #FFFFFF 0%, # 00A3EF 100%) -}

Y luego, se puede aplicar el fondo a cualquier elemento en el archivo HTML. En este caso, el fondo se aplica a una etiqueta:

Video: Tutorial de HTML5 + CSS3 - 14 - Diseñar Fondos

(Contenido aquí)