tipos - GWT: Cómo aplicar un degradado CSS3

linea gradient css

Question

Me encargaron construir el front-end de una aplicación web y lo que estoy tratando de hacer es aplicar un degradado CSS3 en un botón. Estoy usando Eclipse con el complemento GWT y estoy viendo la interfaz de usuario en Google Chrome con el complemento GWT.

Mi problema es que GWT parece eliminar espacios en blanco entre paréntesis para que:

.gwt-Button {
background: -moz-linear-gradient(top, white, #72C6E4 4%, #0C5FA5);
background:-webkit-gradient(linear, left top, left bottom, from(white), to(#0C5FA5), color-stop(0.03, #72C6E4));

se convierte en:

.gwt-Button {
background: -moz-linear-gradient(top,white,#72C6E44%,#0C5FA5);
background:-webkit-gradient(linear,lefttop,lefbottom, from(white), to(#0C5FA5), color-stop(0.03, #72C6E4));

Lo que los hace inválidos. ¿Hay alguna otra manera de lograr esto o una forma de evitar que se eliminen los espacios en blanco cuando se compila la aplicación? Gracias.

Answer 1

Tienes que usar la función literal (). Creo que solo puede funcionar con estilos utilizados a través de aCssResource ya que es una función de GWT.

background: -webkit-gradient(linear, literal("left top"),
literal("left bottom"), from(white), to(#0C5FA5) );

Hace un tiempo me molestaron esto pero no recibí ninguna respuesta del equipo de GWT, así que por favor Star si crees que es un error válido.

Además, como nota al margen, esos estilos no funcionarán con versiones anteriores de, es decir, deberá agregar la propiedad del filtro. Aquí hay un ejemplo .