Kezdőlap Felfedezés Súgó
Bejelentkezés
cpp
/
RmlUi
tükrözi: https://github.com/mikke89/RmlUi.git
2
0
Másolás 0
Fájlok Problémák 0 Wiki
Forráskód Böngészése

Adjust gradient visual tests

Michael Ragazzon 1 éve
szülő
2744057b11
commit
8557c16571
3 módosított fájl, 48 hozzáadás és 0 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 22 0
      Tests/Data/VisualTests/shader_conic_gradient.rml
  2. 7 0
      Tests/Data/VisualTests/shader_linear_gradient.rml
  3. 19 0
      Tests/Data/VisualTests/shader_radial_gradient.rml

+ 22 - 0
Tests/Data/VisualTests/shader_conic_gradient.rml
Fájl Megtekintése 

@@ -25,6 +25,23 @@
 
 			margin-bottom: 1em;
 
 		}
 
 
+		button {
 
+			decorator: repeating-conic-gradient(from 90deg, #ffd700, #f06, #ffd700 180deg);
 
+			display: block;
 
+			width: 200dp;
 
+			box-sizing: border-box;
 
+			border-radius: 15dp;
 
+			border: 3dp #ffd700;
 
+			padding: 10dp 35dp;
 
+			margin-top: 5dp;
 
+			font-size: 30dp;
 
+			color: white;
 
+			font-effect: glow(3dp #ff6a), outline(2dp #0003);
 
+			font-weight: bold;
 
+			letter-spacing: 1dp;
 
+			text-align: center;
 
+		}
 
+
 
 		.basic > :nth-child(1) { decorator: conic-gradient(#f06, #ffd700); }
 
 		.basic > :nth-child(2) { decorator: conic-gradient(at 50% 50%, #f06, #ffd700); }
 
 		.basic > :nth-child(3) { decorator: conic-gradient(from 0deg, #f06, #ffd700); }
 
@@ -63,6 +80,11 @@
 
 </head>
 
 
 <body>
 
+Button with repeating conic gradient
 
+<group>
 
+	<button>Button</button>
 
+</group>
 
+
 
 Red to gold clockwise, from top [equivalent]
 
 <group class="basic">
 
 	<div/>

+ 7 - 0
Tests/Data/VisualTests/shader_linear_gradient.rml
Fájl Megtekintése 

@@ -37,6 +37,8 @@
 
 
 		.three_color > :nth-child(1) { decorator: linear-gradient(yellow, blue 20%, #0f0); }
 
 
+		.overlapping_gradients > :nth-child(1) { decorator: linear-gradient(to bottom, #00f3, #0001, #00f3), linear-gradient(to top right, red, blue); }
 
+
 
 		.corner_to_corner > :nth-child(1) { decorator: linear-gradient(to top right, red, white, blue); }
 
 		.corner_to_corner > :nth-child(2) { decorator: linear-gradient(to bottom right, red, white, blue); }
 
 		.corner_to_corner > :nth-child(3) { decorator: linear-gradient(to bottom left, red, white, blue); }
 
@@ -79,6 +81,11 @@ Yellow (top), blue, green (bottom)
 
 	<div/>
 
 </group>
 
 
+Multiple overlapping gradients
 
+<group class="overlapping_gradients">
 
+	<div/>
 
+</group>
 
+
 
 Corner-to-corner, first: red (bottom-left), white, blue (top-right)
 
 <group class="corner_to_corner">
 
 	<div/>

+ 19 - 0
Tests/Data/VisualTests/shader_radial_gradient.rml
Fájl Megtekintése 

@@ -25,6 +25,20 @@
 
 			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); }
 
@@ -70,6 +84,11 @@
 
 </head>
 
 
 <body>
 
+Button with radial gradient background
 
+<group>
 
+	<button>Button</button>
 
+</group>
 
+
 
 Ellipse, yellow (center) to green (corners) [equivalent]
 
 <group class="ellipse">
 
 	<div/>