cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<rml>
<head>
<link type="text/rcss" href="/assets/rml.rcss"/>
<link type="text/rcss" href="effects_style.rcss"/>
<title>Effects Sample</title>
<style>
@spritesheet effects-sheet
{
	src: /assets/invader.tga;
	icon-invader: 179px 152px 51px 39px;
}

.filter {
	transform-origin: 50% 0;
}

.box {
	color: black;
	font-size: 18dp;
	width: 280dp;
	height: 70dp;
	background: #fff8;
	border: 2dp #def6f7;
	margin: 10dp auto;
	padding: 15dp;
	border-radius: 30dp 8dp;
	box-sizing: border-box;
	position: relative;
}
.box img, .box .placeholder {
	float: left;
	margin-right: 8dp;
}
.box .placeholder {
	width: 51dp;
	height: 39dp;
}
.box .label {
	color: #bbba;
	position: absolute;
	font-size: 0.75em;
	bottom: 0.1em;
	right: 1.5em;
}

.box.window {
	position: absolute;
	left: 30dp;
	margin: 0;
}
.box.window handle {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: block;
	cursor: move;
}
.box.big {
	width: 500dp;
	height: 260dp;
	max-width: 100%;
	border-color: #333;
}

.transform, .filter.transform_all > .box { transform: rotate3d(0.2, 0.4, 0.1, 15deg); }

.mask {
	decorator: horizontal-gradient(#f00 #ff0);
	mask-image: image(icon-invader scale-none 15px 50%), horizontal-gradient(#0000 #000f);
}
.shader { decorator: shader("creation"); }
.gradient { decorator: linear-gradient(110deg, #fff3, #fff 10%, #c33 250dp, #3c3, #33c, #000 90%, #0003) border-box; }

.brightness { filter: brightness(0.5); }
.contrast { filter: contrast(0.5); }
.sepia { filter: sepia(80%); }
.grayscale { filter: grayscale(0.9); }

.saturate { filter: saturate(200%); }
.hue_rotate { filter: hue-rotate(260deg); }
.invert { filter: invert(100%); }
.opacity_low { filter: opacity(0.2); }

.blur { filter: blur(10px); }
.back_blur { backdrop-filter: blur(5px);  }

.dropshadow { filter: drop-shadow(#f33f 30px 20px 5px); }

.boxshadow_blur {
	box-shadow:
		#f00f  40px  30px 25px 0px,
		#00ff -40px -30px 45px 0px,
		#0f08 -60px  70px 60px 0px,
		#333a  0px  0px 30px 15px inset
		;
	margin-top: 100px;
	margin-bottom: 100px;
}
.boxshadow_trail {
	box-shadow:
		#f66 30dp 30dp 0 0,
		#c88 60dp 60dp 0 0,
		#baa 90dp 90dp 0 0,
		#ffac 0 0 .8em 8dp inset
		;
	margin-bottom: 100px;
	filter: opacity(1); /* Tests filter clipping behavior when element has ink overflow due to box-shadow. */
}
.boxshadow_inset { box-shadow: #f4fd 10px 5px 5px 3px inset; }

@keyframes animate-filter {
	from { filter: drop-shadow(#f00) opacity(1.0) sepia(1.0); }
	to   { filter: drop-shadow(#000 30px 20px 5px) opacity(0.2) sepia(0.2); }
}
.animate {
	animation: animate-filter 1.5s cubic-in-out infinite alternate;
}

</style>
</head>
<body
	data-model="effects"
	data-style-perspective="perspective >= 3000 ? 'none' : perspective + 'dp'"
	data-style-perspective-origin-x="perspective_origin_x + '%'"
	data-style-perspective-origin-y="perspective_origin_y + '%'"
>
<handle move_target="#document"><h1>Effects Sample</h1></handle>
<handle class="size" size_target="#document"/>
<div id="menu_button" data-class-open="show_menu" data-event-click="show_menu = !show_menu">—<br/>—<br/>—</div>
<div id="menu" data-if="show_menu">
	<div id="submenu">
		<div data-event-click="submenu = 'filter'" data-class-selected="submenu == 'filter'">Filter</div>
		<div data-event-click="submenu = 'transform'" data-class-selected="submenu == 'transform'">Transform</div>
	</div>
	<table>
		<col style="width: 200%"/><col style="width: 300%"/><col style="width: 100%"/>
		<tbody data-if="submenu == 'filter'">
			<tr><td>Opacity</td><td><input type="range" min="0" max="1" step="0.01" data-value="opacity"/></td><td>{{ opacity }}</td></tr>
			<tr><td>Sepia</td><td><input type="range" min="0" max="1" step="0.01" data-value="sepia"/></td><td>{{ sepia*100 }} %</td></tr>
			<tr><td>Grayscale</td><td><input type="range" min="0" max="1" step="0.01" data-value="grayscale"/></td><td>{{ grayscale*100 }} %</td></tr>
			<tr><td>Saturate</td><td><input type="range" min="0" max="2" step="0.01" data-value="saturate"/></td><td>{{ saturate*100 }} %</td></tr>
			<tr><td>Brightness</td><td><input type="range" min="0" max="2" step="0.02" data-value="brightness"/></td><td>{{ brightness*100 }} %</td></tr>
			<tr><td>Contrast</td><td><input type="range" min="0" max="2" step="0.02" data-value="contrast"/></td><td>{{ contrast*100 }} %</td></tr>
			<tr><td>Hue</td><td><input type="range" min="0" max="360" step="1" data-value="hue_rotate"/></td><td>{{ hue_rotate }} deg</td></tr>
			<tr><td>Invert</td><td><input type="range" min="0" max="1" step="0.01" data-value="invert"/></td><td>{{ invert*100 }} %</td></tr>
			<tr><td>Blur</td><td><input type="range" min="0" max="50" step="1" data-value="blur"/></td><td>{{ blur }} px</td></tr>
			<tr><td><label for="drop_shadow">Drop shadow</label></td><td colspan="2"><input id="drop_shadow" type="checkbox" data-checked="drop_shadow"/></td></tr>
		</tbody>
		<tbody data-if="submenu == 'transform'">
			<tr><td>Scale</td><td><input type="range" min="0.1" max="2.0" step="0.1" data-value="scale"/></td><td>{{ scale | format(1) }}x</td></tr>
			<tr><td>Rotate X</td><td><input type="range" min="-90" max="90" step="5" data-value="rotate_x"/></td><td>{{ rotate_x }} deg</td></tr>
			<tr><td>Rotate Y</td><td><input type="range" min="-90" max="90" step="5" data-value="rotate_y"/></td><td>{{ rotate_y }} deg</td></tr>
			<tr><td>Rotate Z</td><td><input type="range" min="-90" max="90" step="5" data-value="rotate_z"/></td><td>{{ rotate_z }} deg</td></tr>
			<tr><td>Perspective</td><td><input type="range" min="100" max="3000" step="25" data-value="perspective"/></td><td>{{ perspective >= 3000 ? 'none' : perspective + ' dp' }}</td></tr>
			<tr><td>Perspective X</td><td><input type="range" min="-100" max="200" step="5" data-value="perspective_origin_x" data-attrif-disabled="perspective >= 3000"/></td><td>{{ perspective_origin_x }} %</td></tr>
			<tr><td>Perspective Y</td><td><input type="range" min="-100" max="200" step="5" data-value="perspective_origin_y" data-attrif-disabled="perspective >= 3000"/></td><td>{{ perspective_origin_y }} %</td></tr>
			<tr><td><label for="transform_all">Transform all</label></td><td colspan="2"><input id="transform_all" type="checkbox" data-checked="transform_all"/></td></tr>
		</tbody>
	</table>
	<button data-event-click="reset()">Reset</button>
</div>
<div class="filter"
	data-style-transform="'scale(' + scale + ') rotateX(' + rotate_x + 'deg) rotateY(' + rotate_y + 'deg) rotateZ(' + rotate_z + 'deg)'"
	data-style-filter="'opacity(' + opacity + ') sepia(' + sepia + ') grayscale(' + grayscale + ') saturate(' + saturate + ') brightness(' + brightness + ') contrast(' + contrast + ') hue-rotate(' + hue_rotate + 'deg) invert(' + invert + ') blur(' + blur + 'px)' + (drop_shadow ? ' drop-shadow(#f11b 10px 10px 8px)' : '')"
	data-class-transform_all="transform_all"
>
	<div class="box boxshadow_blur transform"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box boxshadow_trail"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box boxshadow_inset"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>

	<div class="box"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box big shader"><div class="label">"Creation" (Danilo Guanabara)</div></div>
	<div class="box big gradient"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box mask"><div class="placeholder"/>Hello, do you feel the funk?</div>

	<div class="box hue_rotate"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>

	<div class="box animate"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box saturate"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box invert"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box blur"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>

	<div class="box brightness"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box contrast"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box dropshadow"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>

	<div class="box grayscale"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
	<div class="box opacity_low"><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
</div>

<div class="box window sepia" style="top: 375dp"><handle move_target="#parent"/><img sprite="icon-invader"/>Hello, do you feel the funk?</div>
<div class="box window back_blur" style="top: 475dp"><handle move_target="#parent"/><img sprite="icon-invader"/>Hello, do you feel the funk?
</div>
</body>
</rml>