Startsida Utforska Hjälp
Logga in
cpp
/
RmlUi
spegling av https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Filer Ärenden 0 Wiki
Gren: fontAtlasShelfAllocation_testing
Grenar Taggar
RmlUi
/
Tests
/
Data
/
VisualTests
/
mask_image.rml

mask_image.rml 1.6 KB
Permalänk Historik Rå

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 	<title>Mask image</title>
    4. 

  4. 	<link type="text/rcss" href="../style.rcss"/>
    5. 

  5. 	<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image" />
    6. 

  6. 	<meta name="Description" content="The `mask-image` property can be used with any decorator, using the resulting alpha channel as a mask for its element." />
    7. 

  7. 	<style>
    8. 

  8. 		@spritesheet effects-sheet
    9. 

  9. 		{
    10. 

  10. 			src: /assets/invader.tga;
    11. 

  11. 			icon-invader: 179px 152px 51px 39px;
    12. 

  12. 			icon-lives: 383px 152px 51px 39px;
    13. 

  13. 		}
    14. 

  14. 		body {
    15. 

  15. 			background: #ddd;
    16. 

  16. 			color: #444;
    17. 

  17. 		}
    18. 

  18. 		div {
    19. 

  19. 			margin: 20dp auto;
    20. 

  20. 			width: 180dp;
    21. 

  21. 			height: 80dp;
    22. 

  22. 			background: #c3c3c3;
    23. 

  23. 			border-color: #f9a #f57 #f9a #f57;
    24. 

  24. 			border-width: 10dp 5dp 20dp 18dp;
    25. 

  25. 			border-radius: 80dp 30dp;
    26. 

  26. 			font-size: 22dp;
    27. 

  27. 			line-height: 80dp;
    28. 

  28. 			text-align: center;
    29. 

  29. 			decorator: horizontal-gradient(#ffd34f #ecda6f);
    30. 

  30. 		}
    31. 

  31. 		img {
    32. 

  32. 			height: 22dp;
    33. 

  33. 			vertical-align: baseline;
    34. 

  34. 		}
    35. 

  35. 		.heart {
    36. 

  36. 			mask-image: image(icon-lives contain);
    37. 

  37. 		}
    38. 

  38. 		.present {
    39. 

  39. 			mask-image: image("/assets/present.tga" scale-none);
    40. 

  40. 		}
    41. 

  41. 		.radial-gradient {
    42. 

  42. 			mask-image: radial-gradient(circle closest-side, black 50%, transparent);
    43. 

  43. 		}
    44. 

  44. 		.horizontal-gradient {
    45. 

  45. 			mask-image: horizontal-gradient(black transparent);
    46. 

  46. 		}
    47. 

  47. 	</style>
    48. 

  48. </head>
    49. 

  49. 

  50. <body>
    51. 

  51. <div>
    52. 

  52. 	I <img sprite="icon-lives"/> RmlUi
    53. 

  53. </div>
    54. 

  54. <hr/>
    55. 

  55. <div class="heart">
    56. 

  56. 	I <img sprite="icon-lives"/> RmlUi
    57. 

  57. </div>
    58. 

  58. <div class="present">
    59. 

  59. 	I <img sprite="icon-lives"/> RmlUi
    60. 

  60. </div>
    61. 

  61. <div class="radial-gradient">
    62. 

  62. 	I <img sprite="icon-lives"/> RmlUi
    63. 

  63. </div>
    64. 

  64. <div class="horizontal-gradient">
    65. 

  65. 	I <img sprite="icon-lives"/> RmlUi
    66. 

  66. </div>
    67. 

  67. </body>
    68. 

  68. </rml>
    69.