Página inicial Explorar Ajuda
Entrar
cpp
/
RmlUi
mirror de https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Arquivos Issues 0 Wiki
Branch: master
Branches Tags
RmlUi
/
Tests
/
Data
/
VisualTests
/
clip_mask.rml

clip_mask.rml 1.3 KB
Link permanente Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 	<title>Clip mask</title>
    4. 

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

  5. 	<meta name="Description" content="Clipping with border-radius should clip along its curved, inner border. Requires clip mask support in the renderer, commonly implemented using a stencil buffer." />
    6. 

  6. 	<style>
    7. 

  7. 		.clip {
    8. 

  8. 			overflow: hidden;
    9. 

  9. 		}
    10. 

  10. 		handle {
    11. 

  11. 			top: auto;
    12. 

  12. 			right: auto;
    13. 

  13. 			bottom: auto;
    14. 

  14. 			left: auto;
    15. 

  15. 			width: auto;
    16. 

  16. 			height: auto;
    17. 

  17. 			display: block;
    18. 

  18. 			position: relative;
    19. 

  19. 			cursor: move;
    20. 

  20. 		}
    21. 

  21. 		.box {
    22. 

  22. 			margin: 20dp auto;
    23. 

  23. 			position: relative;
    24. 

  24. 			width: 250dp;
    25. 

  25. 			border-color: #55f;
    26. 

  26. 			border-width: 20dp;
    27. 

  27. 			border-radius: 150dp;
    28. 

  28. 		}
    29. 

  29. 		.A {
    30. 

  30. 			height: 70dp;
    31. 

  31. 			background: #ffd34f;
    32. 

  32. 			border: 5dp #f57;
    33. 

  33. 		}
    34. 

  34. 		.B {
    35. 

  35. 			left: 50%;
    36. 

  36. 			background: #ffd34f;
    37. 

  37. 			border: 5dp #f57;
    38. 

  38. 			border-radius: 25dp;
    39. 

  39. 		}
    40. 

  40. 		.C {
    41. 

  41. 			width: 50%;
    42. 

  42. 			top: 50dp;
    43. 

  43. 			margin: 10dp auto;
    44. 

  44. 			height: 30dp;
    45. 

  45. 			background: #d3ff4f;
    46. 

  46. 			border: 5dp #3a4;
    47. 

  47. 			border-radius: 50dp;
    48. 

  48. 		}
    49. 

  49. 	</style>
    50. 

  50. </head>
    51. 

  51. 

  52. <body>
    53. 

  53. <div class="box clip">
    54. 

  54. 	Duck aloft
    55. 

  55. 	<handle move_target="#self" class="A" edge_margin="-70%">
    56. 

  56. 			A
    57. 

  57. 	</handle>
    58. 

  58. 	X
    59. 

  59. </div>
    60. 

  60. <div class="box clip">
    61. 

  61. 	Y
    62. 

  62. 	<handle move_target="#self" class="B clip" edge_margin="-70%">
    63. 

  63. 			C
    64. 

  64. 		<handle move_target="#self" class="C clip" edge_margin="-70%">
    65. 

  65. 				Some long text
    66. 

  66. 		</handle>
    67. 

  67. 			Z
    68. 

  68. 	</handle>
    69. 

  69. 	W
    70. 

  70. </div>
    71. 

  71. </body>
    72. 

  72. </rml>
    73.