Background css gradient

[Marco]

I have seen that it's possible to use css gradient in gwt 2.5.

http://code.google.com/p/google-web-toolkit/issues/detail?id=5771

I tried to set a css gradient to a simplepanel with both examples in bug 5771:

.foo {
  background-image: literal("-ms-linear-gradient(top, #000 20%, #fff 80%)");
  background-image: literal("-moz-linear-gradient(top, #000 20%, #fff 80%)");
  background-image: literal("-o-linear-gradient(top, #000 20%, #fff 80%)");
  background-image: literal("-webkit-linear-gradient(top, #000 20%, #fff 80%)");
  background-image: literal("linear-gradient(to bottom, #000 20%, #fff 80%)");
}

OR

@def FOO_GRADIENT_COLORS #000 20%, #fff 80%;
@def FOO_GRADIENT_OLD top FOO_GRADIENT_COLORS;
.foo {
  background-image: -ms-linear-gradient(FOO_GRADIENT_OLD);
  background-image: -moz-linear-gradient(FOO_GRADIENT_OLD);
  background-image: -o-linear-gradient(FOO_GRADIENT_OLD);
  background-image: -webkit-linear-gradient(FOO_GRADIENT_OLD);
  background-image: linear-gradient(to bottom, FOO_GRADIENT_COLORS);
}

I have set the css to my SimplePanel:

mySimplePanel.setStyleName("foo");

Sadly there is no effect. The panel is just white.

Any ideas?

[Thomas Broyer]

This is not how one uses a CssResource. You have to call the foo() method of your CssResource interface.

See https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#CssResource

[Marco]

I tried this way now:

GradientStyle.css

.backgroundtoolbar {

  background-image: literal("-ms-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("-moz-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("-o-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("-webkit-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("linear-gradient(to bottom, #000 20%, #fff 80%)");

}

public interface IGradientStyle extends ClientBundle {

public static final IGradientStyle INSTANCE = GWT.create(IGradientStyle.class);

@Source("GradientStyle.css")

Style style();

public interface Style extends CssResource{

String backgroundtoolbar();

}

}

mySimplePanel.setStyleName(IGradientStyle.INSTANCE.style().backgroundtoolbar());

Again, no effect. Have I missed something? Is there a other better way to have a simple gradient background?

[Jens]

Have you called IGradientStyle.INSTANCE.style().ensureInjected() ? Only when calling this method the CSS will be injected into your html page. Once it is injected this method becomes a no-op.

-- J.

[Andrei]

I think you have wrong definitions of gradients, so browsers just ignore them. You don't need "literal" for non-IE browsers. Google a "CSS gradient maker" and use its output - I never had problems with gradients. 

[Marco]

@Jens

When and where should I call:

IGradientStyle.INSTANCE.style().ensureInjected()  ?

I called IGradientStyle.INSTANCE.style().ensureInjected() 

just before 

mySimplePanel.setStyleName(IGradientStyle.INSTANCE.style().backgroundtoolbar());

but without any effect.

@Andrei:

What kind of definition should I use instead?

I tried IE and Chrome.

[RyanZA]

  background-image: literal("-ms-linear-gradient(top, #000 20%, #fff 80%)");

You can't set a gradient as a background image - only images can be set with the background-image tag...

[Marco]

I had a little mistake in my program therefore CssResource did not work.

Only with the literal css description it work now:

.backgroundtoolbar {

  background-image: literal("-ms-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("-moz-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("-o-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("-webkit-linear-gradient(top, #000 20%, #fff 80%)");

  background-image: literal("linear-gradient(to bottom, #000 20%, #fff 80%)");

}

Thanks to Jens because without 

IGradientStyle.INSTANCE.style().ensureInjected()

it will not work.

The gradient is not working in IE but will work in Chrome. Any idea?

[Marco]

I have added following line to my css file:

filter: literal("progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')");

now the gradient is also working in IE.

Thanks a lot.