Posts

Showing posts with the label CSS

Using variables in CSS via GWT

<ui:style> @def corporateTextColor #426; @eval corporateBackgroundColor my.company.Resource.INSTANCE.constant().red(); .aCSSclass { color: corporateTextColor; background: corporateBackgroundColor; /* certain CSS property definitions */ } .anotherCSSclass { color: corporateTextColor; background: corporateBackgroundColor; /* certain CSS property definitions */ } </ui:style>

Several ways to inject CSS in GWT

There are several ways in GWT to include CSS into you code: via  *.gwt.xml using  <stylesheet src="my.css"/> via your container.html  using  <link href="my.css" rel="stylesheet"> <style> /* my CSS */ </style> <style>@import url("my.css");</style> via  *.ui.xml using <ui:style> /* my CSS */ </ui:style> <ui:style>@import url("my.css");</ui:style> <ui:style src="my.css"/> in this case your CSS is checked for validity, so you can't use some CSS3 yet <ui:style import="my.project.CSSResource"> whereby  my.project.CSSResource has to be annotated with @Shared  via the @Source annotation using [ in this case your CSS is checked for validity, so you can't use CSS3 yet] @Source("my.css") MyCSS myCSS();  within an interface called (in this case) My that extends ClientBundle  with a nested interface calle...

How to get rounded corners in CSS 3 without images

Below the magic CSS3 property that saves a lot of effort to get rounded HTML element corners: -moz -border-radius: 0 1em 0 1em; -webkit -border-radius: 9px; border-radius: 0 1em 0 1em; /* the second notation is for browsers that already support this CSS3 property */ The " border-radius " CSS property can be applied on any (X)HTML element, including fieldsets and labels . Hereby "-moz-" is the Mozilla/Firefox specific prefix for its experimental support of some CSS 3 properties. "-webkit-" is the corresponding WebKit engine based browser (Chrome, Safari, and Konqueror) prefix. See W3C's CSS 3 Border Module Working Draft 7 for more information!