cpp
/
RmlUi
réplica de https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<rml>
<head>
	<title>radial-gradient</title>
	<link type="text/rcss" href="../style.rcss"/>
	<meta name="Description" content="A variety of radial-gradient backgrounds. Each group should match their description." />
	<meta name="Backend" content="Requires backend support for rendering with compiled shaders." />
	<link rel="source" href="https://www.w3.org/TR/css-images-3/#radial-gradients" />
	<style>
		body {
			background: #ddd;
			color: #444;
			width: 900dp;
		}
		div {
			margin: 5dp;
			width: 200dp;
			height: 100dp;
			box-sizing: border-box;
			border: 1dp #bbb;
			float: left;
		}
		group {
			margin-left: 1em;
			display: flow-root;
			margin-bottom: 1em;
		}

		button {
			decorator: radial-gradient(circle farthest-side at center, #ff6b6b, #fec84d, #4ecdc4);
			display: block;
			width: 200dp;
			margin: 8dp 0;
			padding: 15dp 0;
			border: 4dp #fff;
			border-radius: 50dp;
			box-shadow: #000a 0 4dp 12dp, #000a 0 1dp 3dp;
			color: white;
			font-size: 26dp;
			text-align: center;
		}

		.ellipse > :nth-child(1) { decorator: radial-gradient(yellow, green); }
		.ellipse > :nth-child(2) { decorator: radial-gradient(ellipse at center, yellow 0%, green 100%); }
		.ellipse > :nth-child(3) { decorator: radial-gradient(farthest-corner at 50% 50%, yellow, green); }

		.circle > :nth-child(1) { decorator: radial-gradient(circle, yellow, green); }

		.three_color > :nth-child(1) { decorator: radial-gradient(red, yellow, green); }

		.origin_bottom_left > :nth-child(1) { decorator: radial-gradient(farthest-side at left bottom, red, yellow 50px, green); }

		.closest_side_ellipse > :nth-child(1) { decorator: radial-gradient(closest-side at 20px 30px, red, yellow, green); }
		.closest_side_ellipse > :nth-child(2) { decorator: radial-gradient(20px 30px at 20px 30px, red, yellow, green); }

		.closest_side_circle > :nth-child(1) { decorator: radial-gradient(circle closest-side at 20px 30px, red, yellow, green); }
		.closest_side_circle > :nth-child(2) { decorator: radial-gradient(20px 20px at 20px 30px, red, yellow, green); }

		.closest_corner_ellipse > :nth-child(1) { decorator: radial-gradient(closest-corner at 20px 30px, red, yellow, green); }

		.closest_corner_circle > :nth-child(1) { decorator: radial-gradient(circle closest-corner at 20px 30px, red, yellow, green); }

		.sharp > :nth-child(1) { decorator: radial-gradient(circle closest-side, red 50%, yellow 50%, green); }
		.sharp > :nth-child(2) { decorator: radial-gradient(red 50%, yellow 50%, green); }
		.sharp > :nth-child(3) { decorator: radial-gradient(60% 10px, red 50%, yellow 50%, green); }
		.sharp > :nth-child(4) { decorator: radial-gradient(10px 60%, red 50%, yellow 50%, green); }

		.problematic > :nth-child(1) { decorator: radial-gradient(circle closest-side at 199px 30px, red, yellow, green); }
		.problematic > :nth-child(2) { decorator: radial-gradient(circle closest-side at 200px 30px, red, yellow, green); }
		.problematic > :nth-child(3) { decorator: radial-gradient(circle closest-side at -1px, red, yellow, green); }
		.problematic > :nth-child(4) { decorator: radial-gradient(circle closest-side at 0px, red, yellow, green); }
		.problematic > :nth-child(5) { decorator: radial-gradient(5px 0.1px, red, yellow, green); }
		.problematic > :nth-child(6) { decorator: radial-gradient(0px 0px, red, yellow, green); }

		.repeating > :nth-child(1) { decorator: repeating-radial-gradient(circle 30px, red, yellow, green 90%, red); }
		.repeating > :nth-child(2) { decorator: repeating-radial-gradient(farthest-side at left bottom, red, yellow 50px, green 90%, red); }
		.repeating > :nth-child(3) { decorator: repeating-radial-gradient(closest-side at 20px 30px, red, yellow, green 90%, red); }
		.repeating > :nth-child(4) { decorator: repeating-radial-gradient(circle closest-side at -15% 50%, red, yellow, green 90%, red); }

		.repeating > :nth-child(5) { decorator: repeating-radial-gradient(red, yellow 20px, green 40px); }
		.repeating > :nth-child(6) { decorator: repeating-radial-gradient(circle 20px, red, yellow, green 100%, yellow 150%, red 200%); }
		.repeating > :nth-child(7) { decorator: repeating-radial-gradient(circle 30px, red -30px, yellow); }
		.repeating > :nth-child(8) { decorator: repeating-radial-gradient(circle 30px, red 15px, yellow); }
	</style>
</head>

<body>
Button with radial gradient background
<group>
	<button>Button</button>
</group>

Ellipse, yellow (center) to green (corners) [equivalent]
<group class="ellipse">
	<div/>
	<div/>
	<div/>
</group>

Circle, yellow (center) to green (corners)
<group class="circle">
	<div/>
</group>

Ellipse, red (center), yellow, green (corners)
<group class="three_color">
	<div/>
</group>

Red (bottom-left), yellow, green (top-right)
<group class="origin_bottom_left">
	<div/>
</group>

Repeating radial gradients
<group class="repeating">
	<div/>
	<div/>
	<div/>
	<div/>
	<div/>
	<div/>
	<div/>
	<div/>
</group>

Ellipse (top-left, closest-side), red, yellow, green [equivalent]
<group class="closest_side_ellipse">
	<div/>
	<div/>
</group>

Circle (top-left, closest-side), red, yellow, green [equivalent]
<group class="closest_side_circle">
	<div/>
	<div/>
</group>

Ellipse (top-left, closest-corner), red, yellow, green
<group class="closest_corner_ellipse">
	<div/>
</group>

Circle (top-left, closest-corner), red, yellow, green
<group class="closest_corner_circle">
	<div/>
</group>

Sharp color transitions for testing anti-aliasing
<group class="sharp">
	<div/>
	<div/>
	<div/>
	<div/>
</group>

Edge cases, should be green, possibly with a tiny ellipse.
<group class="problematic">
	<div/>
	<div/>
	<div/>
	<div/>
	<div/>
	<div/>
</group>
</body>
</rml>