Mask Background

Bring any background into your desired shape and add transparency to it using the mask background.

Design

The mask background below has been realized with the following design settings:

colors {
	maskColor: red;
}

backgrounds {
	maskBackground {
		type: polygon;
		points: 5,90 55,0 105,90 155,0 205,90;
		reference-width: 210;
		reference-height: 100;
		scale-mode: scale;
		color: maskColor;
	}
	maskGradient {
		type: vertical-gradient;
		top-color: white;
		bottom-color: blue;
	}	
}


menubar {
	margin: 0;
	padding-top: 3;
	padding: 2;
	background {
		type: mask;
		mask: maskBackground;
		mask-color: maskColor;
		background: titleGradient;
		opacity: 150;
	}
}

.mainScreen {
	padding: 2;
	padding-left: 10;
	padding-right: 10;
	background {
		type: horizontal-stripes;
		first-top-color: rgb(165,190,247);
		second-top-color: white;
		first-bottom-color: blue;
		second-bottom-color: black;
	}
	layout: horizontal-expand | horizontal-center | vertical-center;
	//#if polish.midp2
		screen-change-animation: fade;
	//#endif
}

The principle of the masked background is simple: You can take any background, including a combined background or even a masked background as the source, and another background as mask.
The MaskBackground will show only parts of the source background that are covered with the mask color in the mask background. The following images illustrate this:

maskGradient {
	type: vertical-gradient;
	top-color: white;
	bottom-color: blue;
}

maskBackground {
	type: polygon;
	points: 5,90 55,0 105,90 155,0 205,90;
	reference-width: 210;
	reference-height: 100;
	scale-mode: scale;
	color: red;
}

background {
	type: mask;
	mask: maskBackground;
	mask-color: red;
	background: titleGradient;
	opacity: 150;
}

CSS attributes:

CSS Attribute	Default	Values	Explanation
mask	n/a	background in the backgrounds section	The background that is being used as a mask.
mask-color	n/a	color definition	The mask color - every pixel in this color will considered visible in the backround.
background	n/a	background definition from the backgrounds section	Background that is masked.
opacity	255	definition	Opacity between 0 (transparent) and 255 (opaque).

JavaDoc

MaskBackground.

Username:
Password: