Re: Background css gradient

[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?

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/GyGMdCC7PhsJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[Marco]

I have added following line to my css file:

filter: 
literal(progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc', 
endColorstr='#00'));

now the gradient is also working in IE.

Thanks a lot.

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/Uk3Cn8CfRRUJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

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?

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/m_vvHIriDiwJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[Thomas Broyer]

On Sunday, December 23, 2012 10:58:25 AM UTC+1, Marco wrote:

 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);


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

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/vPwjfPdql3EJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[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?

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/WBiCuucCWZQJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[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.


-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/FQGYSoxqQYQJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[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. 

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/zPpKiWQ-j4YJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[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.

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/V3qdA1hE1XAJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Re: Background css gradient

[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...

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/NF7Ql_f6R20J.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.