Visual Guide to Filters

blur Filter
grayscale Filter
opacity Filter
rotate Filter
scale Filter
Combining Filters
Sample Application

RGB filters are a powerful tool for adding some 'wow' to your applications. This movie demonstrates the blur filter in combination with CSS Animations. You can even combine filters by defining them in a comma separated list. 

.mainItem {
	font-style: bold;
	font-size: medium;
	padding: 0px;
	icon-image: url( icon%INDEX%.png );
	icon-image-align: top;
	layout: center;
	icon-filter: blur;
	filter-blur-grade: 100%;
	filter-blur-grade-animation {
		on: defocus;
		range: 0%..100%;
	}
}

.mainItem:hover {
	font-color: white;
	text-effect: shadow;
	filter-blur-grade-animation {
		on: focus;
		range: 100%..0%;
	}
}

blur Filter

Apply a gaussian blur to elements using blur filter.

grayscale Filter

Remove colors from elements using grayscale filter.

opacity Filter

Add translucency to UI elements with the opacity filter.

rotate Filter

rotate UI elements up or down with the rotate filter.

scale Filter

Scale UI elements up or down with the scale filter.

Combining Filters

You can also combine RGB filters.

Sample Application

You can check out the rgbfilter sample application to see a live example of the effects. You can also download the 'Animated Menu' sample application from m.j2mepolish.org on your MIDP phone!