mirror of
https://github.com/GabsPuNs/Project-Zenith-Main.git
synced 2026-07-17 16:01:14 +00:00
195 lines
8.5 KiB
Plaintext
195 lines
8.5 KiB
Plaintext
<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>
|